/* Tách nguyên văn từ public/index.php (giai đoạn 1 tái kiến trúc, 27/09/2026). */
/* ============================================================
   RESKIN "giống localhost:8088" — component riêng trang chủ (prefix x).
   Token màu/phông (slate + Inter, sáng + tối): /assets/css/tokens.css (chung toàn site).
   ============================================================ */
.xwrap *{box-sizing:border-box;}
.xhide{display:none!important;}

/* ---------- MAIN / HERO ---------- */
.xmain{max-width:1120px;margin:0 auto;width:100%;padding:44px 24px 8px;}
.xhero{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;}
.xbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--blue-strong);background:var(--blue-wash);border:1px solid var(--o-ln-1);padding:5px 13px;border-radius:999px;}
.xhero h1{font-family:var(--font-display);font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.025em;color:var(--fg);margin:0;}
.xhero-sub{font-size:16px;line-height:1.6;color:var(--o-tx-1);max-width:640px;margin:0 auto;}

/* ---------- UPLOAD CARD ---------- */
.xcard{max-width:640px;margin:32px auto 0;background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:18px;padding:28px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:18px;}
.xdrop{border:2px dashed var(--o-ln-5);border-radius:14px;padding:38px 20px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--o-bg-10);transition:.15s;}
.xdrop:hover,.xdrop.dragover{border-color:var(--o-ln-3);background:var(--o-bg-4);}
.xdrop-ico{width:56px;height:56px;border-radius:14px;background:var(--o-bg-3);border:1px solid var(--o-ln-1);display:flex;align-items:center;justify-content:center;color:var(--blue);}
.xdrop-title{font-size:14px;font-weight:600;color:var(--o-tx-4);}
.xdrop-hint{font-size:12px;color:var(--o-tx-3);margin-top:2px;}
.xfmt{display:inline-flex;gap:6px;margin-top:4px;}
.xfmt span{font-size:10.5px;font-weight:600;color:var(--o-tx-14);background:var(--o-bg-11);border:1px solid var(--o-ln-2);border-radius:5px;padding:1px 7px;}

/* notice items inside upload card */
.xcard-notices{display:flex;flex-direction:column;gap:8px;}
.xcard-notice-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--fg-2);line-height:1.45;}
.xcard-notice-left{display:flex;align-items:center;gap:9px;}
.xcard-notice-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--blue-wash);color:var(--blue);flex-shrink:0;}
.xcard-notice-link{color:var(--blue);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;font-size:12px;}
.xcard-notice-link:hover{text-decoration:underline;color:var(--blue-strong);}

/* smart routing banner */
.xsmart-routing{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--o-bg-10);border:1px solid var(--o-ln-2);border-radius:10px;font-size:12.5px;color:var(--o-tx-8);}
.xsmart-info{display:flex;align-items:center;gap:8px;}
.xsmart-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:600;background:var(--blue-wash);color:var(--blue);border:1px solid #C2CEDA;}
.xsmart-bal{font-size:12px;color:var(--fg-3);white-space:nowrap;}
.xsmart-bal b{color:var(--blue);font-weight:700;}
.xsmart-bal a{color:var(--blue);font-weight:600;text-decoration:none;margin-left:3px;}

/* collapsible tips inside upload card */
.xcard-tips{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:10px 14px;font-size:12px;color:var(--fg-2);}
.xcard-tips summary{cursor:pointer;font-weight:700;color:var(--blue-strong);display:flex;align-items:center;gap:6px;list-style:none;user-select:none;}
.xcard-tips summary::-webkit-details-marker{display:none;}
.xcard-tips summary svg{transition:transform .2s ease;}
.xcard-tips[open] summary svg{transform:rotate(90deg);}
.xcard-tips-content{margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0;display:grid;grid-template-columns:1fr;gap:6px;line-height:1.5;}
.xcard-tips-content li{margin-left:18px;color:var(--fg-2);}

/* full tips section */
.xtips-section{background:var(--o-bg-10);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 24px;}
.xtips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1120px;margin:0 auto;}
.xtip-card{background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:14px;padding:22px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;}
.xtip-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
.xtip-icon.blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.xtip-icon.amber{background:linear-gradient(135deg,#f59e0b,#d97706);}
.xtip-icon.green{background:linear-gradient(135deg,#10b981,#047857);}
.xtip-icon.purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9);}
.xtip-card h3{font-size:15px;font-weight:700;color:var(--fg);margin:0;}
.xtip-card p{font-size:12.8px;color:var(--fg-3);line-height:1.55;margin:0;}
.xtip-card b{color:var(--o-tx-4);}
@media(max-width:960px){
  .xtips-grid{grid-template-columns:1fr 1fr;gap:14px;}
}
@media(max-width:600px){
  .xtips-grid{grid-template-columns:1fr;gap:12px;}
}

.xcta-btn{width:100%;padding:14px;border-radius:12px;border:0;background:var(--blue);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow);transition:.15s;}
.xcta-btn:hover{background:var(--blue-strong);}
.xtrust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:16px;border-top:1px solid var(--line);text-align:center;font-size:11.5px;color:var(--fg-3);}
.xtrust b{color:var(--o-tx-4);font-weight:600;display:block;}
#status:empty{display:none;}

/* ---------- FEATURES ---------- */
.xsection{max-width:1120px;margin:0 auto;padding:56px 24px;}
.xsec-head{text-align:center;max-width:640px;margin:0 auto 32px;}
.xsec-eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);}
.xsec-title{font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--fg);margin:6px 0 8px;}
.xsec-sub{font-size:15px;color:var(--fg-2);line-height:1.6;}
.xfeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.xfeat{background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:14px;padding:22px;box-shadow:var(--shadow);}
.xfeat-ico{width:38px;height:38px;border-radius:10px;background:var(--o-bg-4);border:1px solid var(--o-ln-12);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:12px;}
.xfeat h3{font-size:15px;font-weight:700;color:var(--fg);margin:0 0 6px;}
.xfeat p{font-size:13px;color:var(--fg-3);line-height:1.6;margin:0;}

/* ---------- PRICING ---------- */
.xprice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:0 auto;}
.xpcard{background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:18px;padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow);}
.xpcard.hl{border-color:var(--o-ln-3);box-shadow:0 12px 36px rgba(37,99,235,.18);position:relative;}
.xpcard.hl::after{content:'KHUYÊN DÙNG';position:absolute;top:0;right:24px;transform:translateY(-50%);background:var(--blue);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;padding:4px 12px;border-radius:8px;}
.xptier{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);margin-bottom:12px;}
.xpamt{font-family:var(--font-display);font-size:40px;font-weight:900;letter-spacing:-.03em;color:var(--fg);line-height:1;}
.xpamt small{font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--fg-3);}
.xpdesc{font-size:13px;color:var(--fg-3);margin:6px 0 22px;}
.xpf{list-style:none;padding:0;margin:0 0 24px;flex:1;}
.xpf li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--fg-2);padding:9px 0;border-bottom:1px solid var(--line);}
.xpf li:last-child{border-bottom:0;}
.xpf .ok{color:var(--green);flex-shrink:0;margin-top:1px;}
.xpf .no{color:#cbd5e1;flex-shrink:0;margin-top:1px;}
.xpbtn{width:100%;padding:12px;border-radius:11px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:.15s;border:1px solid var(--o-ln-2);background:var(--o-bg-10);color:var(--o-tx-10);}
.xpbtn:hover{background:var(--o-bg-11);border-color:var(--o-ln-3);color:var(--o-tx-5);}
.xpbtn.blue{background:var(--o-bg-12);color:var(--o-tx-12);border-color:var(--o-ln-7);}
.xpbtn.blue:hover{background:var(--o-bg-13);color:var(--o-tx-12);}
/* Bảng giá 3 gói (minh bạch đơn giá/trang) */
.xp-pkgs{display:flex;flex-direction:column;gap:7px;margin:0 0 20px;}
.xp-pkg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--o-ln-2);border-radius:10px;background:var(--o-bg-4);}
.xp-pkg.pop{border-color:var(--o-ln-3);box-shadow:0 0 0 1px var(--blue);}
.xp-pkg-n{font-size:13px;font-weight:700;color:var(--fg);white-space:nowrap;}
.xp-pkg-n em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--blue);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle;}
.xp-pkg-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;}
.xp-pkg-r b{font-size:14px;font-weight:800;color:var(--fg);}
.xp-pkg-u{font-size:11.5px;color:var(--fg-3);font-weight:600;}
/* Ô đồng ý điều khoản khi đăng ký */

/* ---------- FAQ ---------- */
.xfaq-wrap{max-width:720px;margin:0 auto;}
.xfaq{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden;}
.xfaq-q{padding:16px 18px;font-size:14.5px;font-weight:600;color:var(--fg);cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;}
.xfaq-a{padding:0 18px;max-height:0;overflow:hidden;transition:.25s;}
.xfaq.open .xfaq-a{max-height:320px;padding:0 18px 16px;}
.xfaq-a p{font-size:13.5px;color:var(--fg-2);line-height:1.65;margin:0;}
.xfaq-dot{color:var(--blue);font-size:20px;font-weight:400;flex-shrink:0;}

/* ---------- CTA BAND ---------- */
.xcta-band{max-width:1120px;margin:16px auto 64px;padding:48px 28px;text-align:center;background:var(--grad);border-radius:20px;color:#fff;}
.xcta-band h2{font-family:var(--font-display);font-size:30px;font-weight:800;margin:0 0 8px;}
.xcta-band p{font-size:15px;opacity:.9;margin:0 0 22px;}
.xcta-band .xbtn{background:#fff;color:var(--blue);font-size:15px;padding:13px 26px;}

/* ---------- MOBILE MENU TOGGLE & DRAWER ---------- */

/* ---------- RESPONSIVE BREAKPOINTS (ALL DEVICES) ---------- */
@media(max-width:960px){
  .xfeatures{grid-template-columns:1fr;gap:14px;}
  .xprice-grid{grid-template-columns:1fr;gap:16px;}
  .xhero h1{font-size:32px;}
  .xcta-band{border-radius:16px;padding:36px 20px;margin:16px 12px 48px;}
  .xcta-band h2{font-size:26px;}
}
@media(max-width:768px){
  .xmain{padding:32px 16px 8px;}
  .xhero-sub{font-size:14.5px;line-height:1.55;}
  .xcard{padding:20px;border-radius:16px;margin-top:24px;}
  .xdrop{padding:28px 14px;}
  .xres-stats{grid-template-columns:1fr 1fr;gap:8px;}
  .xres-btns{flex-direction:column;}
}
@media(max-width:560px){
  .xmain{padding:20px 12px 6px;}
  .xbadge{font-size:11px;padding:4px 10px;}
  .xhero{gap:10px;}
  .xhero h1{font-size:24px;line-height:1.2;letter-spacing:-.015em;}
  .xhero-sub{font-size:13.5px;}
  .xcard{padding:14px;border-radius:14px;margin-top:16px;gap:14px;}
  .xdrop{padding:22px 12px;gap:10px;}
  .xdrop-ico{width:46px;height:46px;border-radius:12px;}
  .xdrop-ico svg{width:22px;height:22px;}
  .xdrop-title{font-size:13px;}
  .xdrop-hint{font-size:11px;}
  .xfmt span{font-size:9.5px;padding:1px 5px;}
  .xengine{gap:8px;}
  .xengine-lb{font-size:11.5px;}
  .xeng{padding:10px 12px;gap:8px;}
  .xeng-t{font-size:12.5px;}
  .xeng-d{font-size:11.5px;}
  .xcta-btn{padding:12px;font-size:13.5px;min-height:46px;}
  .xtrust{grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:10.5px;padding-top:12px;}
  .xtrust div{line-height:1.3;}
  .xtrust b{font-size:11px;}
  .xres-tile{padding:10px 12px;}
  .xres-tile .lb{font-size:10.5px;}
  .xres-tile .vl{font-size:16px;}
  .xpcard{padding:20px;border-radius:14px;}
  .xpamt{font-size:32px;}
  .xsection{padding:40px 14px;}
  .xsec-title{font-size:24px;}
  .xsec-sub{font-size:13.5px;}
  .xfeat{padding:16px;border-radius:12px;}
  .xfeat-ico{width:32px;height:32px;border-radius:8px;}
  .xfeat h3{font-size:14px;}
  .xfeat p{font-size:12px;}
  .xfaq-q{padding:14px 14px;font-size:13.5px;}
  .xfaq.open .xfaq-a{padding:0 14px 14px;}
  .xfaq-a p{font-size:12.5px;}
  .xcta-band{padding:28px 16px;border-radius:14px;margin:8px 8px 36px;}
  .xcta-band h2{font-size:22px;}
  .xcta-band p{font-size:13.5px;}
  .xcta-band .xbtn{width:100%;padding:12px 18px;font-size:14px;}
}

/* ---------- FILE CHIP / PROGRESS ---------- */
.xdrop-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue-strong);background:var(--blue-wash);border:1px solid var(--c-ln-c2ceda);border-radius:8px;padding:3px 10px;margin-top:6px;}
.xpagesel{background:var(--o-bg-4);border:1px solid var(--o-ln-1);border-radius:12px;padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.xps-head{font-size:13px;color:var(--fg-2);font-weight:600;}
.xps-req b{color:var(--seal);}
.xps-label{font-size:12.5px;font-weight:600;color:var(--fg-2);}
.xps-label small{font-weight:500;color:var(--fg-3);}
.xps-input{width:100%;height:42px;border:1px solid var(--o-ln-5);border-radius:10px;background:var(--o-bg-5);color:var(--o-tx-10);padding:0 14px;font-size:14px;outline:none;transition:.15s;}
.xps-input:focus{border-color:var(--o-ln-3);box-shadow:0 0 0 3px var(--blue-wash);}
.xps-input.invalid{border-color:var(--err);}   /* dải trang sai: viền ĐỎ (trước: --seal = navy từ khi đổi giao diện) */
.xps-count{font-size:12.5px;font-weight:600;min-height:16px;}
.xps-count.ok{color:var(--ok);} .xps-count.bad{color:var(--err);}
@keyframes xspin{to{transform:rotate(360deg);}}
.xspin{animation:xspin .8s linear infinite;}
.xprog{background:var(--o-bg-10);border:1px solid var(--o-ln-2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.xprog-top{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;gap:12px;}
.xprog-msg{display:flex;align-items:center;gap:8px;color:var(--fg-2);}
.xprog-msg .xspin{color:var(--blue);flex-shrink:0;}
.xprog-pct{color:var(--blue);font-variant-numeric:tabular-nums;font-weight:800;}
.xprog-track{width:100%;height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;}
.xprog-fill{height:100%;background:var(--blue);border-radius:999px;transition:width .5s ease;}
.xprog-actions{display:flex;align-items:center;justify-content:space-between;margin-top:2px;gap:10px;}
.xprog-cancel-btn{background:var(--bg-raised);border:1px solid var(--c-ln-red-300);color:var(--c-fg-red-600);border-radius:8px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;font-family:var(--font-body);}
.xprog-cancel-btn:hover{background:var(--c-bg-red-100);border-color:#ef4444;color:var(--c-fg-red-800);}
.xprog-cancel-btn:disabled{opacity:.5;cursor:not-allowed;}
.xps-guide{font-size:12px;color:var(--o-tx-8);background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:8px;padding:8px 12px;line-height:1.5;}
.xps-guide b{color:var(--blue-strong);}
/* ---- Xem trước PDF + chọn trang trực quan ---- */
.xpp-loading{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-2);padding:6px 0;}
.xpp-loading .xspin{color:var(--blue);}
.xpp-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.xpp-hint{font-size:12px;color:var(--fg-2);}
.xpp-hint b{color:var(--blue-strong);}
.xpp-btns{display:flex;gap:6px;}
.xpp-btn{background:var(--o-bg-5);border:1px solid var(--o-ln-5);color:var(--o-tx-5);border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:.15s;}
.xpp-btn:hover{background:var(--o-bg-8);border-color:var(--o-ln-3);}
.xthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:10px;max-height:340px;overflow-y:auto;padding:6px;background:var(--o-bg-5);border:1px solid var(--o-ln-2);border-radius:10px;}
.xthumb{position:relative;border:2px solid var(--o-ln-2);border-radius:8px;overflow:hidden;cursor:pointer;background:var(--o-bg-11);aspect-ratio:1/1.414;transition:border-color .12s,box-shadow .12s;}
.xthumb:hover{border-color:var(--o-ln-3);}
.xthumb.sel{border-color:var(--o-ln-3);box-shadow:0 0 0 2px var(--blue-wash);}
.xthumb-cv{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.xthumb-cv canvas{max-width:100%;max-height:100%;display:block;}
.xthumb-ph{font-size:12px;color:var(--fg-3);}
.xthumb-num{position:absolute;left:4px;bottom:4px;background:rgba(15,23,42,.72);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;line-height:1.5;}
.xthumb-check{position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--o-bg-5);border:1.5px solid var(--o-ln-5);color:var(--o-tx-13);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;transition:.12s;}
.xthumb.sel .xthumb-check{background:var(--o-bg-9);border-color:var(--o-ln-3);color:var(--o-tx-12);}
.xthumb-zoom{position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.92);border:1px solid var(--line-2);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:.12s;padding:0;}
.xthumb:hover .xthumb-zoom,.xthumb:focus-within .xthumb-zoom{opacity:1;}
.xpp-adv summary{cursor:pointer;color:var(--blue-strong);font-weight:600;user-select:none;font-size:12.5px;list-style:none;}
.xpp-adv summary::-webkit-details-marker{display:none;}
.xpp-adv summary:before{content:'▸ ';}
.xpp-adv[open] summary:before{content:'▾ ';}
/* Modal xem lớn 1 trang */
#xpdfZoom{position:fixed;inset:0;z-index:1700;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,44,78,.72);backdrop-filter:blur(6px);}
#xpdfZoom.open{display:flex;}
.xzoom-box{background:var(--o-bg-5);border-radius:16px;max-width:min(92vw,720px);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.35);}
.xzoom-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);gap:10px;}
.xzoom-title{font-weight:700;font-size:14px;color:var(--fg);}
.xzoom-nav{display:flex;align-items:center;gap:6px;}
.xzoom-btn{background:var(--o-bg-5);border:1px solid var(--o-ln-5);border-radius:8px;width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;color:var(--o-tx-5);display:flex;align-items:center;justify-content:center;}
.xzoom-btn:hover{background:var(--o-bg-8);} .xzoom-btn:disabled{opacity:.4;cursor:not-allowed;}
.xzoom-close{background:var(--blue-wash);border:none;border-radius:8px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;color:var(--blue);}
.xzoom-body{overflow:auto;padding:14px;background:var(--o-bg-33);display:flex;align-items:center;justify-content:center;min-height:200px;}
.xzoom-body canvas{max-width:100%;box-shadow:0 4px 16px rgba(0,0,0,.15);background:var(--o-bg-34);}
.xzoom-sel{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-top:1px solid var(--line);}
.xzoom-selbtn{border:1px solid var(--o-ln-5);background:var(--o-bg-5);color:var(--o-tx-5);border-radius:8px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);}
.xzoom-selbtn.on{background:var(--o-bg-9);color:var(--o-tx-12);border-color:var(--o-ln-3);}
/* ---- Multi-image batch scan & thumbnails deck ---- */
.xbatch-actions{display:flex;gap:10px;width:100%;margin-top:2px;}
.xbatch-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:.15s;background:var(--o-bg-14);border:1px solid var(--o-ln-5);color:var(--o-tx-5);}
.xbatch-btn:hover{background:var(--o-bg-4);border-color:var(--o-ln-3);}
.xbatch-btn.cam{background:var(--o-bg-4);color:var(--o-tx-15);border-color:var(--o-ln-8);}
.xbatch-btn.cam:hover{background:var(--o-bg-15);}
.xbatch-deck{background:var(--o-bg-4);border:1px solid var(--o-ln-8);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.xbatch-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--fg);}
.xbatch-head-title{display:flex;align-items:center;gap:6px;}
.xbatch-badge{background:var(--blue);color:#fff;font-size:11px;padding:2px 8px;border-radius:99px;}
.xbatch-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;max-height:300px;overflow-y:auto;padding:4px;background:var(--o-bg-14);border:1px solid var(--o-ln-2);border-radius:10px;}
.xbatch-item{position:relative;border:2px solid var(--o-ln-2);border-radius:8px;overflow:hidden;background:var(--o-bg-11);aspect-ratio:1/1.35;display:flex;align-items:center;justify-content:center;}
.xbatch-item img{width:100%;height:100%;object-fit:cover;display:block;}
.xbatch-item-num{position:absolute;left:4px;bottom:4px;background:rgba(15,23,42,.75);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;}
.xbatch-item-del{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:rgba(220,38,38,.9);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;cursor:pointer;transition:.15s;line-height:1;}
.xbatch-item-del:hover{background:#b91c1c;transform:scale(1.1);}
.xbatch-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.xbatch-tools-left{font-size:12px;color:var(--fg-3);}
.xbatch-tools-right{display:flex;gap:6px;}
@media(max-width:560px){
  .xbatch-actions{flex-direction:column;gap:8px;}
  .xbatch-thumbs{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:240px;}
}
.xcta-btn:disabled,.xcta-btn.busy{opacity:.65;cursor:not-allowed;}

/* ---------- RESULT CARD ---------- */
.xres-head{display:flex;align-items:center;gap:14px;}
.xres-ico{width:42px;height:42px;border-radius:999px;background:#ecfdf5;border:1px solid #a7f3d0;color:#059669;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.xres-title{font-size:16px;font-weight:800;color:var(--fg);}
.xres-sub{font-size:12.5px;color:var(--fg-3);margin-top:2px;}
.xres-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.xres-tile{background:var(--o-bg-10);border:1px solid var(--o-ln-2);border-radius:12px;padding:12px 14px;}
.xres-tile .lb{font-size:11.5px;color:var(--fg-3);}
.xres-tile .vl{font-size:18px;font-weight:800;color:var(--o-tx-4);margin-top:2px;line-height:1;}
.xres-tile .vl.blue{color:var(--o-tx-5);}
.xres-tile .vl.amber{color:var(--o-tx-6);}
/* Mobile khung kết quả: đặt SAU quy tắc gốc (trước 27/09 khối @media 768/560px ở trên bị '.xres-stats{repeat(4,1fr)}'
   này ghi đè -> 320px: 4 ô dồn 1 hàng, 'Công thức toán' gãy 3 dòng, ô cuối tràn khung) */
@media (max-width: 768px) { .xres-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .xres-tile { min-width: 0; } }
@media (max-width: 560px) { .xres-tile { padding: 10px 12px; } .xres-tile .lb { font-size: 10.5px; } .xres-tile .vl { font-size: 16px; } }
.xres-btns{display:flex;gap:10px;align-items:stretch;}
.xres-btns .xcta-btn{flex:1;text-decoration:none;}
.xres-again{white-space:nowrap;}
.xres-qual{margin:10px 0 2px;padding:9px 13px;border-radius:10px;font-size:13px;line-height:1.45;}
.xres-qual.good{background:var(--o-bg-23);border:1px solid var(--o-ln-15);color:var(--o-tx-19);}
.xres-qual.mid{background:var(--o-bg-24);border:1px solid var(--o-ln-16);color:var(--o-tx-20);}
.xres-qual.low{background:var(--o-bg-25);border:1px solid var(--o-ln-17);color:var(--o-tx-21);}
.xres-report{margin-top:10px;text-align:center;}
.xreport-link{background:none;border:none;color:var(--fg-3);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:4px;}
.xreport-link:hover{color:#991b1b;}

/* ---------- MODAL TIẾP TỤC CHUYỂN CÁC TRANG CÒN LẠI ---------- */
#continueModal{position:fixed;inset:0;z-index:1600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(14,44,78,.65);backdrop-filter:blur(8px);}
#continueModal.open{display:flex;}
.xcont-box{background:var(--o-bg-5);width:100%;max-width:540px;border-radius:22px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.28);display:flex;flex-direction:column;}
.xcont-head{background:var(--grad);padding:18px 24px;color:#fff;display:flex;align-items:center;justify-content:space-between;}
.xcont-head-title{font-family:var(--font-display);font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;}
.xcont-close{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.2);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.xcont-close:hover{background:rgba(255,255,255,.35);}
.xcont-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;}
.xcont-info{background:var(--o-bg-26);border:1.5px solid var(--o-ln-18);border-radius:12px;padding:12px 16px;color:var(--o-tx-22);font-size:13px;line-height:1.5;}
.xcont-field{display:flex;flex-direction:column;gap:8px;}
.xcont-label{font-size:13px;font-weight:700;color:var(--fg);}
.xcont-label small{font-weight:500;color:var(--fg-3);}
.xcont-input{width:100%;height:44px;border:1.5px solid var(--o-ln-5);border-radius:10px;background:var(--o-bg-14);color:var(--o-tx-10);padding:0 14px;font-size:15px;font-weight:600;outline:none;transition:.15s;}
.xcont-input:focus{border-color:var(--o-ln-3);box-shadow:0 0 0 3px var(--blue-wash);}
.xcont-hint{font-size:12.5px;color:var(--fg-3);line-height:1.45;}
.xcont-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;}
.xcont-actions .xbtn{height:42px;padding:0 20px;font-size:13.5px;}

/* ---------- KIỂM TOÁN UI 2026-09-17: sửa lỗi hiển thị + tinh gọn ---------- */
/* .xpagesel/.xprog đặt display:flex nên đè thuộc tính hidden -> panel "Tệp PDF gồm – trang" và thanh
   tiến độ rỗng hiện ngay khi CHƯA chọn tệp. */
[hidden]{display:none !important;}
.xdrop-title,.xdrop-hint{display:block;}

.xpf li>span:last-child{flex:1;min-width:0;}              /* chữ + <b> thành 1 khối, không bị tách cột */
.xsmart-routing{flex-wrap:wrap;}
.xsmart-info{flex-wrap:wrap;min-width:0;}

.xprog-cancel-btn{border-color:var(--line-2);color:var(--fg-3);font-weight:600;}
.xprog-cancel-btn:hover{border-color:var(--c-ln-red-300);color:var(--c-fg-red-600);}

@media(max-width:560px){
  .xhero-sub{display:none;}                                /* đưa thẻ upload lên màn hình đầu tiên */
  .xsmart-routing{flex-direction:column;align-items:flex-start;gap:4px;}
  .xsmart-bal{white-space:normal;}
}

/* ============================================================ CHẾ ĐỘ TỐI (bật bằng nút · mặc định theo hệ điều hành)
   Chỉ áp khi [data-theme="dark"] -> KHÔNG đụng giao diện sáng (an toàn tuyệt đối). */

/* Bề mặt trắng -> tối */
:root[data-theme="dark"] .xcard,:root[data-theme="dark"] .xtip-card,:root[data-theme="dark"] .xfeat,:root[data-theme="dark"] .xpcard,:root[data-theme="dark"] .xthumbs{color:var(--fg);}
:root[data-theme="dark"] .xfaq{background:var(--bg-raised);color:var(--fg);border-color:var(--line);}
:root[data-theme="dark"] .xzoom-box, :root[data-theme="dark"] .xcont-box {color:var(--fg);border-color:var(--line);}

/* Bề mặt chìm */
:root[data-theme="dark"] .xdrop,:root[data-theme="dark"] .xprog,:root[data-theme="dark"] .xthumb,:root[data-theme="dark"] .xbatch-deck,:root[data-theme="dark"] .xbatch-thumbs,:root[data-theme="dark"] .xbatch-item,:root[data-theme="dark"] .xres-tile{color:var(--fg);}
:root[data-theme="dark"] .xcard-notice-item,:root[data-theme="dark"] .xcard-tips,:root[data-theme="dark"] .bg-alt{background:var(--bg-sunken);color:var(--fg);border-color:var(--line);}
:root[data-theme="dark"] .xtips-section, :root[data-theme="dark"] .section.bg-alt {color:var(--fg);border-color:var(--line);}

:root[data-theme="dark"] .btn-cta:hover{background:var(--bg-sunken);color:var(--blue-strong);}
:root[data-theme="dark"] .xcard-tips{border-color:var(--line-2);}

/* Thông báo cảnh báo / chất lượng kết quả trong Dark Mode */

/* Zalo chat widget trong Dark Mode */

/* Footer: logo là CHỮ TÔ GRADIENT. Dark remap --grad thành gradient TỐI (#1e3650->#16273c) -> chữ
   tối trên nền tối (tương phản ~1.3, gần vô hình). Ép gradient XANH SÁNG cho chữ logo ở dark mode. */

/* Ảnh xem trước PDF LUÔN nền trắng (tài liệu là giấy) */
:root[data-theme="dark"] .xthumb-cv{background:#fff;}

   /* đặt SAU quy tắc gốc 40px (trước bị đè) */

/* Khối tải lên — trước là style="…" trong views/pages/home/_upload.php (28/09). */
#xbatchDeck .xbatch-head-note { font-weight: 500; font-size: 12px; color: var(--fg-3); }
#xbatchDeck .xpp-btn.xbatch-clear { color: var(--seal); }
#xppAdv .xps-label-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--fg-2); }
#xppAdv .xps-label-hint { color: var(--fg-3); }
#xppAdv .xps-input-gap { margin-top: 6px; }