:root{--do:#DA1E39;--do-dam:#b5162e;--den:#101010;--xam:#f3f4f6;--vien:#e2e4e8;--chu:#1f2328;--nhat:#6b7280;
--xanh:#0f8a4f;--vang:#b7791f;--nen:#f7f7f9}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Segoe UI",Roboto,Arial,sans-serif;color:var(--chu);background:var(--nen)}
a{color:var(--do);text-decoration:none}a:hover{text-decoration:underline}
.thanh{background:var(--den);color:#fff;display:flex;align-items:center;gap:4px;padding:0 16px;height:52px;position:sticky;top:0;z-index:5}
.thanh img{height:34px;margin-right:14px}
.thanh nav{display:flex;gap:2px;flex:1;overflow-x:auto}
.thanh nav a{color:#ddd;padding:8px 12px;border-radius:6px;white-space:nowrap}
.thanh nav a:hover{background:#262626;text-decoration:none}
.thanh nav a.on{background:var(--do);color:#fff}
.thanh .ai{color:#bbb;font-size:13px;white-space:nowrap}.thanh .ai a{color:#fff;margin-left:10px}
.khung{max-width:1280px;margin:0 auto;padding:18px 16px 40px}
.dieu-khien{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.dieu-khien h1{font-size:20px;margin:0 12px 0 0;font-weight:600}
.dieu-khien .gian{flex:1}
.nut{display:inline-block;border:1px solid var(--vien);background:#fff;color:var(--chu);padding:7px 14px;border-radius:6px;cursor:pointer;font:inherit}
.nut:hover{background:var(--xam);text-decoration:none}
.nut.chinh{background:var(--do);border-color:var(--do);color:#fff}.nut.chinh:hover{background:var(--do-dam)}
.nut.xoa{color:var(--do)}
form.loc{display:flex;flex-wrap:wrap;gap:8px}
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--vien);border-radius:6px;background:#fff;width:100%}
form.loc input,form.loc select{width:auto}
textarea{min-height:70px}
input:focus,select:focus,textarea:focus{outline:2px solid #f3b3bd;border-color:var(--do)}
.bang-wrap{background:#fff;border:1px solid var(--vien);border-radius:8px;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{background:var(--xam);text-align:left;font-weight:600;font-size:13px;color:#374151;padding:9px 10px;border-bottom:1px solid var(--vien);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid #eef0f2;vertical-align:top}
tr.dong:hover td{background:#fff5f6;cursor:pointer}
td.so,th.so{text-align:right;white-space:nowrap}
tfoot td{font-weight:700;background:var(--xam)}
.the{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.t-qua{background:#fde2e6;color:#9c0006}.t-den{background:#fff1cc;color:#8a5a00}.t-sap{background:#fff7e0;color:#8a5a00}
.t-trong{background:#e7f0ff;color:#1d4ed8}.t-xong{background:#dcf5e7;color:#0f6b3c}
.to{background:#fff;border:1px solid var(--vien);border-radius:8px;padding:22px 26px;margin-bottom:16px}
.to h2{margin:0 0 14px;font-size:22px}
.to h3{margin:18px 0 10px;font-size:15px;color:#374151}
.luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.luoi .rong{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:600;color:var(--nhat);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.o-chk label{display:inline;text-transform:none;font-size:14px;color:var(--chu);font-weight:400}
.o-chk input{width:auto}
.the-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
.o{background:#fff;border:1px solid var(--vien);border-radius:8px;padding:16px}
.o .nhan{color:var(--nhat);font-size:12px;text-transform:uppercase;font-weight:600}
.o .gia{font-size:22px;font-weight:700;margin-top:4px}
.o.do{border-top:4px solid var(--do)}
.bao{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.bao.loi{background:#fde2e6;color:#9c0006}.bao.ok{background:#dcf5e7;color:#0f6b3c}.bao.vang{background:#fff1cc;color:#6b4500}
.nho{color:var(--nhat);font-size:12px}
.dang-nhap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fff}
.dang-nhap .hop{width:100%;max-width:360px;padding:16px}
.dang-nhap img{display:block;width:170px;margin:0 auto 22px}
.dang-nhap .truong{margin-bottom:12px}
.dang-nhap .nut{width:100%;padding:10px}
.chan{margin-top:24px;text-align:center;color:var(--nhat);font-size:12px}
@media (max-width:760px){.luoi{grid-template-columns:1fr}.to{padding:16px}.thanh .ai span{display:none}}
.nn{display:inline-flex;border:1px solid #444;border-radius:6px;overflow:hidden;margin-left:12px;vertical-align:middle}
.nn a{color:#bbb!important;margin:0!important;padding:2px 8px;font-size:12px;font-weight:600}
.nn a.on{background:var(--do);color:#fff!important}.nn a:hover{text-decoration:none}
.nn-goc{text-align:right;margin-bottom:8px}.nn-goc .nn{border-color:var(--vien)}.nn-goc .nn a{color:var(--nhat)!important}.nn-goc .nn a.on{color:#fff!important}
.tab-con{display:flex;gap:6px;padding-top:14px;padding-bottom:0}
.tab-con a{padding:6px 14px;border-radius:999px;border:1px solid var(--vien);background:#fff;color:var(--chu)}
.tab-con a.on{background:var(--den);border-color:var(--den);color:#fff}.tab-con a:hover{text-decoration:none}
h2.muc{font-size:17px;margin:26px 0 10px}
.to table th{background:transparent}
.thanh nav{scrollbar-width:none}.thanh nav::-webkit-scrollbar{display:none}
@media (max-width:760px){.luoi[style]{grid-template-columns:1fr!important}}

.thanh-td{height:8px;background:#eceef1;border-radius:99px;overflow:hidden;margin:6px 0 2px}
.thanh-td i{display:block;height:100%;background:var(--do);border-radius:99px}
.muc-cl{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f0f1f3}
.o-tick{width:22px;height:22px;border:2px solid var(--vien);border-radius:6px;background:#fff;cursor:pointer;color:#fff;font-weight:700;padding:0;line-height:18px}
.o-tick.xong{background:var(--xanh);border-color:var(--xanh)}
.gach{text-decoration:line-through;color:var(--nhat)}
.hai-cot{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.hai-cot{grid-template-columns:1fr}}

.thanh-tick{position:sticky;top:52px;z-index:3;display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#101010;color:#fff;padding:10px 14px;border-radius:8px;margin-bottom:10px}
.thanh-tick input,.thanh-tick select{width:auto}

.tuoi-no{grid-template-columns:repeat(5,minmax(0,1fr))}.tuoi-no .o.chon{outline:2px solid var(--do)}
@media (max-width:900px){.tuoi-no{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Chuẩn hóa chữ (12/10/2026): 1 phông tiếng Việt, cỡ chữ thống nhất, nhãn không viết hoa ===== */
body,input,select,textarea,button{font-family:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif}
body{font-size:14px;line-height:1.5;color:#1f2328;-webkit-font-smoothing:antialiased}
.thanh nav a{font-size:14px;font-weight:500;padding:7px 11px}
.thanh .ai{font-size:13px}
.dieu-khien h1{font-size:20px;font-weight:700;color:#101010;letter-spacing:-.01em}
.dieu-khien h1 a{color:#6b7280;font-weight:500}
.dieu-khien h1 a:hover{color:var(--do)}
h2.muc{font-size:16px;font-weight:700;color:#101010}
.to h2{font-size:18px;font-weight:700}
.to h3{font-size:14px;font-weight:700;color:#101010;margin:18px 0 10px}
label{font-size:13px;font-weight:600;color:#4b5563;text-transform:none;letter-spacing:0;margin-bottom:5px}
.o-chk label{font-weight:500;color:#1f2328}
input,select,textarea{font-size:14px;padding:8px 10px}
input[style*="font-size:18px"]{font-size:15px!important;font-weight:600}
.nut{font-size:14px;font-weight:500}
th{font-size:12.5px;font-weight:600;color:#4b5563;text-transform:none}
td{font-size:13.5px}
td.so,th.so,.o .gia,.the{font-variant-numeric:tabular-nums}
.o .nhan{font-size:12.5px;font-weight:600;color:#6b7280;text-transform:none;letter-spacing:0}
.o .gia{font-size:21px;font-weight:700}
.the{font-size:12px;font-weight:600}
.nho{font-size:12.5px}
.bao{font-size:13.5px}

.nhom-hang td{background:#101010;color:#fff;font-weight:700;font-size:13.5px;padding:7px 10px}
.nhom-hang td span{font-weight:400;opacity:.7;margin-left:8px;font-size:12px}
.nut-menu{display:none}

/* ===== Điện thoại (≤ 760px) ===== */
@media (max-width:760px){
  .thanh{flex-wrap:wrap;height:auto;min-height:52px;padding:6px 12px}
  .thanh img{height:30px}
  .nut-menu{display:block;margin-left:auto;background:transparent;border:1px solid #444;color:#fff;font-size:20px;border-radius:6px;padding:2px 10px;cursor:pointer}
  .thanh nav,.thanh .ai{display:none;width:100%}
  body.mo-menu .thanh nav{display:flex;flex-direction:column;gap:2px;padding:6px 0}
  body.mo-menu .thanh .ai{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 10px;border-top:1px solid #333}
  body.mo-menu .thanh .ai span{display:inline}
  .thanh nav a{padding:10px 12px;font-size:15px}
  .khung{padding:12px 12px 32px}
  .tab-con{flex-wrap:wrap}
  .dieu-khien{gap:8px}
  .dieu-khien h1{font-size:18px;width:100%}
  .dieu-khien .gian{display:none}
  form.loc{width:100%}
  form.loc input,form.loc select{flex:1 1 140px;min-width:0}
  .nut{padding:9px 14px}
  .luoi,.luoi[style]{grid-template-columns:1fr!important}
  .the-so,.tuoi-no{grid-template-columns:1fr 1fr!important;gap:8px}
  .o{padding:12px}.o .gia{font-size:17px}
  .hai-cot{grid-template-columns:1fr}
  .to{padding:14px}
  .thanh-tick{top:0;font-size:13px}
  /* bảng → thẻ */
  .bang-wrap{background:transparent;border:0;overflow:visible}
  .bang-wrap table,.bang-wrap tbody,.bang-wrap tfoot,.bang-wrap tr,.bang-wrap td{display:block;width:100%}
  .bang-wrap thead{display:none}
  .bang-wrap tr{background:#fff;border:1px solid var(--vien);border-radius:10px;margin-bottom:10px;padding:8px 12px}
  .bang-wrap tr.dong:hover td{background:transparent}
  .bang-wrap td{border:0;padding:4px 0;text-align:left!important;white-space:normal!important;display:flex;gap:10px;justify-content:space-between}
  .bang-wrap td[data-l]::before{content:attr(data-l);color:var(--nhat);font-size:12px;font-weight:600;flex:0 0 42%}
  .bang-wrap td:empty{display:none}
  .bang-wrap td input,.bang-wrap td select{flex:1}
  .bang-wrap tr.nhom-hang{background:#101010;padding:8px 12px}
  .bang-wrap tr.nhom-hang td{background:transparent}
  .bang-wrap tfoot tr{background:var(--xam)}
}
.thanh-tick[hidden]{display:none!important}

.kenh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:8px}
.kenh .kenh-dau{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kenh .kenh-dau b{font-size:15px}.kenh .gia-nho{font-weight:700;font-variant-numeric:tabular-nums}
.pheu{display:flex;align-items:center;gap:6px;margin:10px 0 8px}
.pheu div{flex:1;text-align:center;font-size:12px;color:var(--nhat)}
.pheu div span{display:block;font-size:20px;font-weight:700;color:var(--chu)}
.pheu .mui{flex:0 0 auto;font-size:18px;color:#c0c4cc}

/* chọn điều khoản bảo hành */
fieldset.bh-chon{border:1px solid var(--vien,#ddd);border-radius:8px;padding:10px 14px 14px;margin:0}
fieldset.bh-chon legend{font-weight:600;padding:0 6px}
.bh-cot{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0}
.bh-cot b{display:block;margin-bottom:6px}
label.tick{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:5px 0;line-height:1.4;text-transform:none}
label.tick input{width:auto;margin-top:3px;flex:none}
@media (max-width:700px){.bh-cot{grid-template-columns:1fr}}

/* menu gom nhóm thả xuống */
.thanh nav{overflow:visible;align-items:center}
.thanh .nhom{position:relative}
.thanh .nhom>button{background:none;border:0;color:#ddd;font:500 14px "Be Vietnam Pro",Arial,sans-serif;padding:7px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}
.thanh .nhom>button:hover,.thanh .nhom:focus-within>button{background:#262626}
.thanh .nhom.on>button{background:var(--do);color:#fff}
.thanh .menu-con{display:none;position:absolute;top:100%;left:0;z-index:60;min-width:230px;background:#1a1a1a;border:1px solid #333;border-radius:8px;padding:6px;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.thanh .nhom:hover .menu-con,.thanh .nhom:focus-within .menu-con{display:flex}
.thanh .menu-con a{padding:8px 12px}
@media (max-width:760px){
  .thanh .nhom>button{width:100%;text-align:left;padding:10px 12px;font-size:15px;color:#999;cursor:default}
  .thanh .nhom.on>button{background:none;color:#fff}
  .thanh .menu-con{display:flex;position:static;box-shadow:none;border:0;background:none;padding:0 0 0 12px;min-width:0}
}

/* dashboard tổng quan */
.db-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#101010 0%,#2a0a10 55%,#DA1E39 130%);color:#fff;border-radius:16px;padding:22px 26px;margin-bottom:16px;box-shadow:0 10px 30px rgba(218,30,57,.18)}
.db-chao{font-size:24px;font-weight:700}.db-ngay{opacity:.75;margin-top:2px}
.db-nhanh{display:flex;gap:8px;flex-wrap:wrap}
.db-nhanh a{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:999px;font-weight:500;font-size:14px;text-decoration:none;transition:.15s}
.db-nhanh a:hover{background:#DA1E39;border-color:#DA1E39;text-decoration:none}
.db-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{position:relative;background:#fff;border-radius:14px;padding:16px 16px 14px;box-shadow:0 2px 10px rgba(16,16,16,.06);color:inherit;text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s;border-top:4px solid #ccc}
.kpi:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,16,16,.12);text-decoration:none}
.kpi .ic{position:absolute;right:12px;top:10px;font-size:26px;opacity:.85}
.kpi .nhan{font-size:13px;color:#666;font-weight:500;padding-right:30px}
.kpi .so{font-size:24px;font-weight:700;margin:6px 0 4px;letter-spacing:-.3px}.kpi .so small{font-size:13px;color:#888;font-weight:500}
.kpi .phu{font-size:12px;color:#777}
.kpi .tang{color:#1a9c5b}.kpi .giam{color:#DA1E39}
.k-do{border-top-color:#DA1E39}.k-xanh{border-top-color:#1a9c5b}.k-den{border-top-color:#101010}.k-cam{border-top-color:#f08a24}.k-tim{border-top-color:#7b4bd6}.k-xam{border-top-color:#9a9a9a}
.db-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:8px}
.db-the{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px rgba(16,16,16,.06)}
.db-the.rong2{grid-column:span 2}
.db-tde{font-weight:700;font-size:15px;margin-bottom:8px;display:flex;flex-direction:column}.db-tde span{font-weight:400;font-size:12px;color:#888}
.db-bd{position:relative;height:260px}
.db-top a{display:block;color:inherit;text-decoration:none;padding:6px 0}
.db-top .t{display:flex;justify-content:space-between;gap:8px;font-size:13px}.db-top .t b{color:#DA1E39;white-space:nowrap}
.db-top .vach{height:7px;background:#f3f3f3;border-radius:9px;margin-top:4px;overflow:hidden}.db-top .vach i{display:block;height:100%;background:linear-gradient(90deg,#DA1E39,#f2a1ad);border-radius:9px}
@media (max-width:1000px){.db-luoi{grid-template-columns:1fr 1fr}.db-the.rong2{grid-column:1/-1}}
@media (max-width:640px){.db-luoi{grid-template-columns:1fr}.db-chao{font-size:20px}.db-hero{padding:16px}}

.nut-khoa{background:none;border:0;cursor:pointer;font-size:15px;padding:0 2px;opacity:.55}.nut-khoa:hover{opacity:1}

.nut-khoa2{padding:4px 10px;font-size:13px;white-space:nowrap}.nut-khoa2.dang-khoa{background:#fde8eb;border-color:#DA1E39;color:#8a0f22}

/* bảng sản phẩm dễ đọc */
.bang-wrap td{color:#1a1a1a}
.bang-wrap td .nho,.bang-wrap .nho{color:#555}
.nhom-hang td{font-size:14.5px}