:root{--blue:#1164e8;--blue2:#0953d8;--indigo:#5733e8;--green:#02b875;--red:#ff4d67;--orange:#ff9b23;--dark:#102033;--nav:#071e35;--muted:#697386;--bg:#f4f7fb;--card:#fff;--line:#e7edf5;--shadow:0 18px 45px rgba(16,32,51,.08);--shadow2:0 8px 24px rgba(16,32,51,.08);--radius:18px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:#1b2430}a{text-decoration:none;color:inherit}button,input,select,textarea{font-family:inherit}.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,#e8eeff,transparent 35%),linear-gradient(135deg,#f8fbff,#edf3ff);padding:18px}.auth-card{width:100%;max-width:430px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:26px}.brand{text-align:center;font-weight:900;color:#0b218a;font-size:24px;margin-bottom:16px}.brand-logo img{max-width:300px;width:84%;height:auto}.auth-title{text-align:center;font-weight:900;color:#0b218a;font-size:24px;margin-bottom:10px}.auth-card h2{text-align:center;margin:4px 0 8px;font-size:30px}.sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:20px}.field{margin-bottom:12px}.field label{display:block;font-weight:800;font-size:13px;margin-bottom:6px;color:#273246}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff;outline:none;min-height:44px}.input:focus,select:focus,textarea:focus{border-color:#2c73f0;box-shadow:0 0 0 4px rgba(44,115,240,.1)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{border:0;border-radius:11px;padding:12px 16px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;box-shadow:0 10px 22px rgba(17,100,232,.20)}.btn-green{background:var(--green);color:#fff}.btn-red{background:#ffecef;color:#c01632}.btn-ghost{background:#f2f6ff;color:#155bd4}.btn-dark{background:var(--dark);color:#fff}.btn-full{width:100%}.alert{padding:12px 14px;border-radius:12px;margin-bottom:15px;font-size:14px}.alert-error{background:#fff0f0;color:#bb1230}.alert-ok{background:#edfff7;color:#087a50}.app{display:flex;min-height:100vh}.sidebar{width:260px;background:linear-gradient(180deg,#09233f,#05182b);color:#d9e9ff;padding:18px;position:fixed;top:0;bottom:0;left:0;z-index:20;box-shadow:9px 0 30px rgba(7,30,53,.1)}.side-logo{font-weight:900;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:24px}.side-logo img{width:42px;height:42px;object-fit:contain;border-radius:12px;background:#fff;padding:4px}.side-logo b{letter-spacing:.3px}.nav a{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;margin-bottom:6px;color:#d9e9ff;font-size:14px}.nav a.active,.nav a:hover{background:#1265e8;color:#fff}.main{margin-left:260px;flex:1;min-width:0}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:8}.topbar strong{color:#0b218a;letter-spacing:.3px}.hamb{display:none}.content{padding:24px}.page-title{font-size:24px;margin:0 0 18px;color:#0b218a;font-weight:900}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid rgba(231,237,245,.8)}.metric-title{color:var(--muted);font-size:13px;font-weight:800}.metric{font-size:28px;font-weight:900;margin-top:8px;line-height:1.1}.green{color:#06a867}.red{color:#e53955}.blue{color:#1265e8}.purple{color:#6e3ee8}.orange{color:#ff8b00}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}.quick .q{color:#fff;border-radius:18px;padding:22px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow2);overflow:hidden;position:relative}.quick .q:after{content:"";position:absolute;right:-20px;bottom:-28px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12)}.q1{background:linear-gradient(135deg,#1265e8,#224deb)}.q2{background:linear-gradient(135deg,#7047ee,#8738d5)}.q3{background:linear-gradient(135deg,#01b97a,#03a069)}.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:16px}.dash-card{min-height:280px}.placeholder-chart{height:210px;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#f5f8ff);position:relative;overflow:hidden;border:1px solid var(--line)}.placeholder-chart:before{content:"";position:absolute;left:28px;right:28px;bottom:45px;height:90px;border-bottom:4px solid #1265e8;border-radius:55% 45% 0 0;transform:skewX(-10deg);opacity:.85}.donut{width:190px;height:190px;border-radius:50%;margin:15px auto;background:conic-gradient(#1265e8 0 60%,#00b875 60% 90%,#7b42ec 90% 100%);position:relative}.donut:after{content:"";position:absolute;inset:38px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}table{width:100%;border-collapse:collapse}th,td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;white-space:nowrap}th{color:#4d5b6e;font-size:12px;background:#fafcff}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.badge-ok{background:#eafff5;color:#058555}.badge-pending{background:#fff3df;color:#d47a00}.badge-lock{background:#ffecef;color:#c01632}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}.actions{display:flex;gap:6px;flex-wrap:wrap}.panel{background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);padding:14px}.panel h3{font-size:15px;margin:0 0 12px}.muted{color:var(--muted)}.table-scroll{overflow:auto}.pending-box{text-align:center;max-width:620px;margin:80px auto}.mobile-only{display:none}.hide{display:none!important}
/* Editor */
.editor-shell{display:flex;flex-direction:column;gap:14px}.editor-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:0}.editor-top .editor-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.editor-top select{min-width:260px}.editor-layout{display:grid;grid-template-columns:235px minmax(420px,1fr) 270px;gap:16px;align-items:start}.tool-btn{width:100%;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;font-weight:800;cursor:pointer;min-height:44px}.tool-btn:hover{border-color:#1265e8;background:#f7fbff}.canvas-wrap{background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);padding:14px;min-height:560px}.stage{height:460px;background:#edf3fb;border-radius:12px;display:grid;place-items:center;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}.stage-inner{position:relative;background:#d9e3f0;box-shadow:0 8px 35px rgba(0,0,0,.14);overflow:hidden;flex:0 0 auto}.stage canvas,.stage video{max-width:100%;display:block}.wm-item{position:absolute;min-width:40px;min-height:24px;cursor:move;border:2px dashed transparent;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}.wm-item.active{border-color:#1265e8}.wm-logo img{max-width:100%;max-height:100%;pointer-events:none}.wm-text{font-weight:800;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.45);padding:2px 5px}.resize-handle{width:16px;height:16px;background:#1265e8;border:2px solid #fff;border-radius:50%;position:absolute;right:-8px;bottom:-8px}.footer-actions{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}.mobile-stepbar{display:none}.mobile-bottom-export{display:none}
@media(max-width:1200px){.editor-layout{grid-template-columns:220px minmax(360px,1fr)}.editor-props{grid-column:1/-1}.cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:1000px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:18}.sidebar.open + .sidebar-backdrop{display:block}.main{margin-left:0}.hamb{display:inline-flex}.cards,.quick{grid-template-columns:1fr}.topbar{padding:0 14px;height:56px}.topbar strong{font-size:13px}.content{padding:14px}.grid2{grid-template-columns:1fr}.mobile-only{display:block}.toolbar{flex-direction:column;align-items:stretch}.auth-card{margin:0}.brand-logo img{max-width:250px}.auth-title{font-size:22px}.auth-card h2{font-size:28px}}
@media(max-width:760px){body{background:#eef4fb}.content{padding:10px}.page-title{font-size:19px;margin-bottom:10px}.card{padding:14px;border-radius:16px}.metric{font-size:24px}.editor-shell{gap:10px}.editor-top{position:sticky;top:56px;z-index:7;display:block;padding:10px;border-radius:14px}.editor-top .btn-ghost:first-child{display:none}.editor-top .editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-top label{grid-column:1/-1;font-size:12px;font-weight:900;color:#536176}.editor-top select{grid-column:1/-1;min-width:0}.editor-top #exportBtn{font-size:15px}.editor-layout{display:flex;flex-direction:column;gap:10px}.editor-tools{order:1}.canvas-wrap{order:2;min-height:auto;padding:10px;border-radius:16px}.editor-props{order:3}.editor-tools .tool-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-tools .tool-btn{margin:0;font-size:13px;text-align:center;padding:11px 8px}.mobile-stepbar{display:flex;gap:8px;overflow:auto;padding:0 2px}.mobile-stepbar a{white-space:nowrap;background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:999px;font-size:12px;font-weight:900;color:#155bd4}.stage{height:calc(100vh - 360px);min-height:310px;max-height:560px;border-radius:14px;display:flex;align-items:center;justify-content:flex-start;padding:14px;overflow:auto}.stage-inner{transform-origin:left top!important}.footer-actions{justify-content:space-between}.footer-actions .btn{padding:10px 12px;font-size:12px}.editor-props .field{margin-bottom:9px}.editor-props{padding-bottom:82px}.mobile-bottom-export{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);padding:10px 12px;border-top:1px solid var(--line)}.mobile-bottom-export .btn{min-height:46px}.alert{font-size:12px;padding:10px}.panel{padding:12px}.table-scroll{margin:0 -8px;padding:0 8px}.quick{gap:10px}.quick .q{min-height:94px;padding:17px}.cards{gap:10px}.dashboard-grid{gap:10px}.canvas-wrap #statusText{font-size:12px}.input,select,textarea{min-height:44px}.btn{min-height:44px}.auth-bg{align-items:flex-start}.auth-card{border-radius:0;box-shadow:none;min-height:100vh}.brand-logo img{max-width:280px;width:100%}}
@media(max-width:420px){.editor-tools .tool-list{grid-template-columns:1fr}.stage{height:360px}.topbar div:last-child{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-card h2{font-size:25px}.auth-title{font-size:20px}.grid2{gap:0}}
.role-user .sidebar{background:#fff;color:#334155;border-right:1px solid var(--line);box-shadow:var(--shadow2)}.role-user .side-logo{color:#0b218a}.role-user .nav a{color:#334155}.role-user .nav a.active,.role-user .nav a:hover{background:#eef5ff;color:#1265e8}.role-user .topbar{background:linear-gradient(135deg,#1164e8,#0b45c6);color:#fff}.role-user .topbar strong{color:#fff}.role-user .topbar .btn-ghost{background:rgba(255,255,255,.18);color:#fff}.role-user .topbar div:last-child{color:#fff}.role-admin .sidebar{background:linear-gradient(180deg,#09233f,#05182b);color:#d9e9ff}.role-admin .topbar{background:#fff}
@media(max-width:1200px){.cards[style*="repeat(6"]{grid-template-columns:repeat(3,1fr)!important}.cards[style*="1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}}
@media(max-width:760px){.cards[style]{grid-template-columns:1fr!important}.cards[style*="repeat(6"]{grid-template-columns:1fr!important}}

/* V4: bảng hiển thị 1 hàng ngang + phân trang */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.nowrap-table{min-width:980px}.nowrap-table th,.nowrap-table td{white-space:nowrap;vertical-align:middle}.actions-nowrap{flex-wrap:nowrap;align-items:center;min-width:max-content}.balance-inline{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}.compact{padding:10px 14px;min-height:40px;border-radius:12px}.compact-input{width:130px!important;min-height:40px!important;padding:9px 12px!important}.search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search-row .input{min-width:320px}.search-row select{width:auto;min-width:170px}.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}.pagination-info{color:var(--muted);font-size:13px;font-weight:700}.page-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.page-link,.page-dot{min-width:38px;height:38px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#155bd4}.page-link.active{background:#1265e8;color:#fff;border-color:#1265e8}.page-link:hover{border-color:#1265e8}.page-dot{color:var(--muted);border:0;background:transparent}.table-scroll .actions form{margin:0}
@media(max-width:760px){.nowrap-table{min-width:1050px}.search-row{display:grid;grid-template-columns:1fr;gap:8px}.search-row .input,.search-row select{min-width:0;width:100%}.toolbar{gap:8px}.pagination{align-items:flex-start}.page-link,.page-dot{min-width:34px;height:34px;padding:0 10px}.compact-input{width:120px!important}.actions-nowrap .btn{white-space:nowrap}.table-scroll{padding-bottom:8px}}

/* V5: popup nạp tiền + admin xác nhận */
.modal-backdrop{position:fixed;inset:0;background:rgba(8,18,38,.56);display:none;align-items:center;justify-content:center;z-index:80;padding:18px}.modal-backdrop.show{display:flex}.modal-card{background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(5,18,43,.25);width:min(620px,100%);max-height:92vh;overflow:auto;padding:24px;position:relative}.modal-close{position:absolute;right:16px;top:12px;border:0;background:#f1f5fb;border-radius:12px;width:40px;height:40px;font-size:28px;line-height:1;cursor:pointer;color:#1d2a3c}.modal-card h2{margin:0 0 8px;font-size:26px;color:#0b218a}.bank-box{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:linear-gradient(135deg,#eef6ff,#f8fbff);border:1px solid var(--line);border-radius:18px;padding:14px;margin:16px 0}.bank-box div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.bank-box span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:5px}.bank-box b{font-size:16px;color:#14233b}.recharge-form label{font-weight:900;color:#2c3a4d}.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0}.amount-grid input{display:none}.amount-grid span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;font-weight:900;color:#155bd4;cursor:pointer}.amount-grid input:checked+span{background:linear-gradient(135deg,#1265e8,#5539eb);border-color:#1265e8;color:#fff;box-shadow:0 12px 25px rgba(18,101,232,.22)}.checkline{display:flex;gap:10px;align-items:center;margin:12px 0 16px;font-size:14px}.checkline input{width:18px;height:18px}.green-text{color:#05a66b}.ok-alert{background:#eafff5;color:#057b50;border:1px solid #c7f6e1}.error-alert{background:#fff0f2;color:#be123c;border:1px solid #ffd3da}
@media(max-width:760px){.modal-backdrop{align-items:flex-end;padding:0}.modal-card{border-radius:24px 24px 0 0;max-height:88vh;padding:20px}.bank-box{grid-template-columns:1fr}.amount-grid{grid-template-columns:1fr 1fr}.modal-card h2{font-size:22px}}

/* V6: mobile app-like editor */
.mobile-editor-hero{display:none}.step-chip{border:1px solid var(--line);background:#fff;color:#155bd4;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:900;white-space:nowrap;cursor:pointer}.step-chip.active{background:linear-gradient(135deg,#1265e8,#5539eb);color:#fff;border-color:#1265e8;box-shadow:0 10px 20px rgba(18,101,232,.18)}.editor-section-title{font-size:13px;font-weight:900;color:#0b218a;margin:0 0 10px}.mobile-upload-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}.upload-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#fbfdff,#f7faff);min-height:104px;box-shadow:var(--shadow2);overflow:hidden;cursor:pointer}.upload-card input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-icon{font-size:24px}.upload-title{font-weight:900;color:#173256}.upload-sub{font-size:12px;color:var(--muted)}.camera-card{background:linear-gradient(135deg,#eef6ff,#f6f1ff)}.compact-field .input[readonly]{background:#f8fbff;color:#516071;font-weight:700}.app-tool-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.app-tool-list .tool-btn{margin:0;text-align:center;border-radius:14px;background:#fff;box-shadow:var(--shadow2)}.mobile-next-row{display:none}.canvas-mobile-tip{font-size:12px;color:#627185;background:#f7fbff;border:1px dashed #d5e4fb;border-radius:12px;padding:10px 12px;margin:0 0 10px}.editor-props .field{position:relative}.editor-props .input,.editor-props select{background:#fbfdff}
@media(max-width:760px){
  .mobile-editor-hero{display:block;background:linear-gradient(135deg,#1164e8,#5539eb);color:#fff;padding:14px 16px;border-radius:18px;box-shadow:var(--shadow2)}
  .hero-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:11px;font-weight:900;margin-bottom:8px}
  .hero-title{font-size:18px;font-weight:900;margin-bottom:4px}.hero-sub{font-size:12px;line-height:1.45;opacity:.95}
  .mobile-stepbar{display:flex;gap:8px;overflow:auto;padding:0 2px 2px;scrollbar-width:none}.mobile-stepbar::-webkit-scrollbar{display:none}
  .mobile-stepbar a{display:none}
  .editor-top{padding:12px;background:#fff;box-shadow:var(--shadow2)}
  .editor-top .editor-actions{grid-template-columns:1fr 1fr}
  .editor-top .editor-actions .btn{min-height:46px;border-radius:14px}
  .editor-top select{border-radius:14px}
  .editor-tools,.editor-props,.canvas-wrap{border-radius:20px;box-shadow:0 12px 30px rgba(12,32,64,.08)}
  .editor-layout{display:block}
  .mobile-panel{display:none}.mobile-panel.active{display:block}
  .editor-tools{padding:14px}.canvas-wrap{padding:12px}.editor-props{padding:14px 14px 82px}
  .mobile-upload-grid{grid-template-columns:1fr 1fr}.upload-card{min-height:114px;padding:14px}
  .app-tool-list{grid-template-columns:repeat(2,1fr)}
  .app-tool-list .tool-btn{padding:13px 10px;font-size:13px;min-height:52px}
  .mobile-next-row{display:block;margin-top:10px}
  .stage{height:calc(100vh - 410px);min-height:300px;max-height:480px;padding:10px;background:linear-gradient(180deg,#eef4fb,#e6eef9)}
  .stage-inner{border-radius:12px;overflow:hidden}
  .footer-actions{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:8px;align-items:center}.footer-actions .btn{width:100%;min-height:42px}.footer-actions #zoomText{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#526173}
  .mobile-bottom-export{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -10px 30px rgba(9,20,40,.08)}
  .mobile-bottom-export .btn-primary{font-size:15px}
}
@media(max-width:480px){
  .mobile-upload-grid{grid-template-columns:1fr}
  .app-tool-list{grid-template-columns:1fr 1fr}
  .stage{height:300px}
  .footer-actions{grid-template-columns:1fr 72px 1fr;}.footer-actions .btn-red{grid-column:1/-1}
}


/* V7: fix mobile preview/canvas visibility */
@media(max-width:760px){
  .canvas-wrap.mobile-panel.active{display:block!important}
  .editor-tools.mobile-panel.active,.editor-props.mobile-panel.active{display:block!important}
  .stage{justify-content:center!important;align-items:flex-start!important;overflow:auto!important}
  .stage-inner{transform-origin:top center!important;background:#d9e3f0!important}
  #baseCanvas{display:block!important;background:#d9e3f0!important}
  .editor-top{top:56px}
  .mobile-panel:not(.active){display:none!important}
}


/* V8: desktop/mobile canvas paint fix */
.stage canvas{background:#d9e3f0!important}
@media(min-width:761px){
  .stage{align-items:flex-start!important;justify-content:center!important;padding:18px}
  .stage-inner{transform-origin:top center!important}
}


/* V9: fit image fully inside frame on desktop and mobile */
.stage{position:relative;display:block!important;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}
.stage-space{position:relative;margin:0 auto;min-width:1px;min-height:1px}
.stage-inner{position:relative;transform-origin:top left!important;will-change:transform}
.stage canvas,.stage video{width:100%;height:100%;display:block}
@media(min-width:761px){
  .stage{height:70vh;min-height:520px;max-height:760px;padding:18px;background:linear-gradient(180deg,#eef4fb,#e6eef9)}
  .canvas-wrap{min-height:auto}
}
@media(max-width:760px){
  .stage{height:calc(100vh - 410px);min-height:300px;max-height:500px;padding:10px}
}