/* Khanh Toan Computer - giao dien mau
   Thiet ke: Truong Thanh Design */

/* ---------- 1. Token ---------- */
:root{
  /* tang 1 - bang mau thuong hieu */
  --brand:#C4161C; --brand-soft:#DB3A40; --brand-deep:#9B0F14;
  --accent:#FFC72C; --on-accent:#231A00; --accent-strong:#B8121A;
  --ink:#1B1F27; --ink-soft:#2A303B;
  --ok:#0B7A38; --warn:#9A5B00;
  /* tang 2 - ngu nghia */
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-2:#F7F8FA;
  --text:#1B1F27; --muted:#4B5563; --muted-2:#5F6875;
  --line:#E3E6EB; --line-strong:#7A828E;
  --shadow:27 31 39;
  /* thang bo goc */
  --r-sm:6px; --r:8px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-tron:999px;
  /* chu */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-hien-thi:"Barlow Semi Condensed","Be Vietnam Pro",system-ui,sans-serif;
  --font-ma:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --khung:1600px;
  --sao:#B36B00;
}

/* ---------- 2. Nen tang ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-strong)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.khung{max-width:var(--khung);margin-inline:auto;padding-inline:16px}
.an-doc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bo-qua{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-md)}
.bo-qua:focus{top:8px;color:#fff}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.so{font-variant-numeric:tabular-nums}
.hop-text{text-align:justify;text-justify:inter-word;hyphens:auto}

/* ---------- 3. Nut, o nhap, nhan ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r-md);font-weight:700;font-size:.9rem;border:1px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap}
.nut-chinh{background:var(--brand);color:#fff}
.nut-chinh:hover{background:var(--brand-deep);color:#fff}
.nut-nhan{background:var(--accent);color:var(--on-accent)}
.nut-nhan:hover{background:#F2B705;color:var(--on-accent)}
.nut-vien{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.nut-vien:hover{background:var(--surface-2);color:var(--text)}
.nut-rong{width:100%}
.o-nhap{width:100%;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);font-size:.92rem}
textarea.o-nhap{min-height:92px;resize:vertical}
.nhan{display:block;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-bottom:5px}
.nhan b{color:var(--accent-strong)}
.truong{margin-bottom:14px}
.goi-y{font-size:.8rem;color:var(--muted-2);margin-top:4px}

/* ---------- 4. Combo box tu dung ---------- */
.cb{position:relative}
.cb-nut{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);font-size:.92rem;text-align:left}
.cb-nut .ic{width:16px;height:16px;transition:transform .15s ease}
.cb-nut[aria-expanded="true"] .ic{transform:rotate(180deg)}
.cb-ds{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgb(var(--shadow)/.18);padding:6px}
.cb-ds[hidden]{display:none}
.cb-muc{display:grid;grid-template-columns:32px 1fr 18px;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);border-left:3px solid transparent;cursor:pointer}
.cb-muc .cb-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}
.cb-muc .cb-ic .ic{width:16px;height:16px}
.cb-muc b{display:block;font-weight:600;font-size:.9rem}
.cb-muc small{display:block;font-size:.78rem;color:var(--muted-2)}
.cb-muc .cb-tich{color:var(--brand);visibility:hidden;width:18px;height:18px}
.cb-muc[aria-selected="true"] .cb-tich{visibility:visible}
.cb-muc.dang-tro{background:var(--surface-2);border-left-color:var(--accent)}

/* ---------- 5. Thanh tren cung ---------- */
.tren{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.tren .khung{display:flex;justify-content:space-between;gap:16px;min-height:36px;align-items:center}
.tren ul{display:flex;gap:20px;align-items:center}
.tren a,.tren button{display:inline-flex;align-items:center;gap:6px}
.tren .ic{width:15px;height:15px}
.goi{position:relative}
.goi-hop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:300px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgb(var(--shadow)/.18);padding:14px}
.goi-hop[hidden]{display:none}
.goi-hop h3,.goi-hop .td{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:8px 0 6px}
.goi-hop h3:first-child,.goi-hop .td:first-child{margin-top:0}
.goi-hop a{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line)}
.goi-hop a b{color:var(--accent-strong);font-family:var(--font-ma);font-weight:600}

/* ---------- 6. Dau trang ---------- */
.dau{background:var(--surface);position:relative;z-index:30}
.dau .khung{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:46px;height:46px;flex:none}
.logo span{display:block;font-family:var(--font-hien-thi);font-weight:800;font-size:1.5rem;line-height:1;color:var(--brand);letter-spacing:.01em}
.logo small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:4px;font-weight:600}
.tim{position:relative}
.tim form{display:flex;border:2px solid var(--brand);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.tim input{flex:1;min-width:0;border:0;padding:11px 14px;font-size:.92rem;background:transparent}
.tim input:focus{outline:0}
.tim form:focus-within{box-shadow:0 0 0 3px rgb(196 22 28/.18)}
.tim button{background:var(--brand);color:#fff;padding:0 20px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem}
.tim button:hover{background:var(--brand-deep)}
.tim-goi-y{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 32px rgb(var(--shadow)/.18);padding:6px}
.tim-goi-y[hidden]{display:none}
.tim-goi-y a{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:var(--r)}
.tim-goi-y a:hover{background:var(--surface-2);color:var(--text)}
.tim-goi-y img{width:44px;height:44px;object-fit:contain}
.tim-goi-y span{font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tim-goi-y b{color:var(--accent-strong);font-size:.86rem;white-space:nowrap}
.tien-ich{display:flex;gap:8px;align-items:center}
.tien-ich a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r);font-size:.8rem;line-height:1.25;color:var(--muted)}
.tien-ich a:hover{background:var(--surface-2);color:var(--text)}
.tien-ich a b{display:block;color:var(--text);font-size:.92rem}
.tien-ich .ic{width:26px;height:26px;color:var(--brand)}
.gio{position:relative}
.gio em{position:absolute;left:28px;top:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-tron);background:var(--accent);color:var(--on-accent);font-style:normal;font-size:.7rem;font-weight:700;display:grid;place-items:center}
.nut-menu{display:none}

/* thanh dieu huong */
.dh{background:var(--brand);color:#fff;position:relative;z-index:20}
.dh .khung{display:flex;align-items:stretch;gap:24px}
.dh-dm{position:relative;flex:0 0 264px}
.dh-dm>button{width:100%;height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--brand-deep);color:#fff;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em}
.dh-cam-ket{display:flex;flex:1;justify-content:space-between;align-items:center;gap:16px;font-size:.84rem;font-weight:500}
.dh-cam-ket li{display:flex;align-items:center;gap:8px}
.dh-cam-ket .ic{width:18px;height:18px;color:var(--accent)}
.dh-cam-ket a{background:var(--accent);color:var(--on-accent);padding:6px 14px;border-radius:var(--r-tron);font-weight:700}
.dh-cam-ket a:hover{background:#fff;color:var(--brand-deep)}

/* menu danh muc doc */
.dm{background:var(--surface);color:var(--text);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);position:relative}
.dh-dm .dm{position:absolute;left:0;right:0;top:100%;box-shadow:0 12px 32px rgb(var(--shadow)/.18)}
.dh-dm .dm[hidden]{display:none}
.dm>li>a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.92rem;font-weight:500;color:var(--text)}
.dm>li>a .ic{width:18px;height:18px;color:var(--muted-2)}
.dm>li>a .mui{margin-left:auto;width:14px;height:14px;color:var(--line-strong)}
.dm>li:hover>a,.dm>li:focus-within>a{background:var(--surface-2);color:var(--accent-strong)}
.dm>li:hover>a .ic:first-child,.dm>li:focus-within>a .ic:first-child{color:var(--brand)}
.dm-con{display:none;position:absolute;left:100%;top:0;min-height:100%;width:min(1100px,calc(100vw - 320px));background:var(--surface);border:1px solid var(--line);border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:12px 12px 32px rgb(var(--shadow)/.14);padding:18px 22px;z-index:25}
.dm>li:hover>.dm-con,.dm>li:focus-within>.dm-con{display:block}
.dm-con h3,.dm-con .td{font-family:var(--font-hien-thi);font-size:1.15rem;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.dm-con h3 a,.dm-con .td a{font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--accent-strong)}
.dm-con ul{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 20px}
.dm-con li a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:.88rem;border-bottom:1px dashed var(--line)}
.dm-con li a span{color:var(--muted-2);font-size:.78rem}

/* ---------- 7. Trang chu: khoi dau ---------- */
.mo{padding-bottom:18px}
.mo .khung{display:grid;grid-template-columns:264px minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px 12px}
.mo .dm{grid-row:1/3}
.truot{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-top:12px;background:var(--surface-2);aspect-ratio:930/430}
.truot-ray{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.truot-ray::-webkit-scrollbar{display:none}
.truot-ray a{flex:0 0 100%;scroll-snap-align:start}
.truot-ray img{width:100%;height:100%;object-fit:cover}
.truot-nut{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:var(--r-tron);background:rgb(255 255 255/.92);color:var(--text);display:grid;place-items:center;box-shadow:0 2px 8px rgb(var(--shadow)/.2)}
.truot-nut:hover{background:#fff;color:var(--brand)}
.truot-nut[data-huong="-1"]{left:10px}.truot-nut[data-huong="1"]{right:10px}
.truot-nut[data-huong="-1"] .ic{transform:rotate(180deg)}
.truot-cham{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.truot-cham button{width:8px;height:8px;border-radius:var(--r-tron);background:rgb(255 255 255/.6);box-shadow:0 0 0 1px rgb(var(--shadow)/.25)}
.truot-cham button[aria-current="true"]{width:22px;background:var(--accent)}
.mo-ben{display:grid;grid-template-rows:1fr 1fr;gap:12px;margin-top:12px;min-height:0}
.mo-ben .bn{min-height:0}
/* man hinh rong: 2 anh ben khong tu day cao hang, luon cao bang dung anh trinh chieu */
@media (min-width:1181px){.mo-ben .bn{position:relative}.mo-ben .bn img{position:absolute;inset:0}}
.mo-duoi{grid-column:2/4;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bn{border-radius:var(--r-lg);overflow:hidden;display:block;background:var(--surface-2)}
.bn img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.bn:hover img{transform:scale(1.03)}

/* dai danh muc icon (di dong) */
.dai-dm{display:none}

/* ---------- 8. Khoi san pham ---------- */
.khoi{margin-bottom:18px}
.khoi-hop{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
.khoi-dau{display:flex;align-items:center;gap:18px;padding:0 16px 0 0;border-bottom:2px solid var(--brand);min-height:46px}
.khoi-dau h2{font-family:var(--font-hien-thi);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;background:var(--brand);color:#fff;padding:0 26px 0 16px;height:46px;display:flex;align-items:center;gap:8px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.khoi-dau h2 a:hover{color:#fff}
.khoi-con{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.khoi-con a{padding:5px 12px;border-radius:var(--r-tron);border:1px solid var(--line);font-size:.82rem;white-space:nowrap;color:var(--muted)}
.khoi-con a:hover{border-color:var(--brand);color:var(--accent-strong)}
.khoi-con a.tat-ca{border-color:var(--brand);color:var(--accent-strong);font-weight:600}
.luoi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.luoi-dm{grid-template-columns:repeat(5,minmax(0,1fr))}

.sp{position:relative;display:flex;flex-direction:column;padding:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);transition:box-shadow .15s ease}
.sp:hover{box-shadow:0 6px 22px rgb(var(--shadow)/.14);z-index:1}
.sp-anh{display:block;aspect-ratio:1;margin-bottom:10px}
.sp-anh img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.sp:hover .sp-anh img{transform:scale(1.04)}
.sp-giam{position:absolute;left:10px;top:10px;background:var(--brand);color:#fff;font-weight:700;font-size:.76rem;padding:3px 8px;border-radius:var(--r-sm)}
.sp-the{position:absolute;right:10px;top:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.7rem;padding:3px 8px;border-radius:var(--r-sm);text-transform:uppercase;letter-spacing:.04em}
.sp-ten{font-size:.88rem;font-weight:500;line-height:1.4;min-height:calc(.88rem*1.4*3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px} /* co y cat 3 dong: ten SP rat dai */
.sp-gia{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:auto;min-height:30px;align-content:flex-end}
.sp-gia b{font-family:var(--font-hien-thi);font-size:1.22rem;font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.sp-gia s{font-size:.8rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.sp-gia .lh{font-size:.95rem}
.sp-sao{font-size:.8rem;color:var(--muted-2);margin-top:6px;line-height:1}
.sp-sao b{color:var(--sao);font-weight:400;letter-spacing:1px}
.sp-sao i{color:var(--line-strong);font-style:normal;letter-spacing:1px}
.ct-sao{font-size:.95rem;margin-top:10px}
.ct-sao+.ct-meta{margin-top:8px}
.sp-qua{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--warn);background:#FFF6DB;border-radius:var(--r-sm);padding:4px 8px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-qua .ic{width:14px;height:14px}
.sp-chan{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.kho{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600}
.kho .ic{width:14px;height:14px}
.kho-1{color:var(--ok)}.kho-2{color:var(--warn)}.kho-3{color:var(--muted-2)}
.sp-them{width:34px;height:34px;border-radius:var(--r);border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--brand);transition:background .15s ease,color .15s ease,border-color .15s ease}
.sp-them:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.sp-them .ic{width:18px;height:18px}

/* khoi khuyen mai */
.khoi-km .khoi-hop{background:linear-gradient(135deg,var(--brand-deep),var(--brand));border:0;padding:0 12px 12px}
.khoi-km .khoi-dau{border:0;color:#fff;padding:0 4px;min-height:54px}
.khoi-km .khoi-dau h2{background:none;clip-path:none;padding:0;font-size:1.45rem;color:var(--accent)}
.khoi-km .khoi-dau p{font-size:.86rem;opacity:.92}
.khoi-km .khoi-dau .nut{margin-left:auto;padding:7px 16px}
.khoi-km .luoi{gap:8px}
.khoi-km .sp{border:0;border-radius:var(--r)}

/* day san pham truot ngang */
.day{position:relative}
.day-ray{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.day-ray::-webkit-scrollbar{display:none}
.day-ray>.sp{flex:0 0 calc((100% - 40px)/6);min-width:0;scroll-snap-align:start}
.day .truot-nut[data-huong="-1"]{left:-6px}.day .truot-nut[data-huong="1"]{right:-6px}
.day .truot-nut:disabled{opacity:0;pointer-events:none}

/* thong so rut gon duoi anh + hop thoai */
.ct-ts{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ct-ts h2{font-family:var(--font-hien-thi);font-size:1.1rem;font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
.ct-ts .ts th,.ct-ts .ts td{padding:7px 12px;font-size:.84rem}
.ct-ts .nut{border:0;border-radius:0;color:var(--accent-strong)}
.ct-ts .nut .ic{width:15px;height:15px}
.hop-thoai{width:min(760px,100%);max-height:min(86vh,900px);padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgb(var(--shadow)/.35);overflow:hidden}
.hop-thoai[open]{display:flex;flex-direction:column}
.hop-thoai::backdrop{background:rgb(var(--shadow)/.55)}
.hop-thoai .hop-dau{align-items:center;flex:none}
.hop-thoai .hop-dau h2{font:inherit}
.ht-ten{padding:10px 18px;font-size:.88rem;font-weight:500;background:var(--surface-2);border-bottom:1px solid var(--line);flex:none}
.ht-than{overflow:auto;overscroll-behavior:contain}

/* tab */
.tab-ds{display:flex;gap:0}
.tab-ds button{height:46px;padding:0 20px;font-family:var(--font-hien-thi);font-weight:700;font-size:1.1rem;text-transform:uppercase;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tab-ds button[aria-selected="true"]{color:var(--accent-strong);border-bottom-color:var(--brand)}
[role="tabpanel"][hidden]{display:none}

/* ---------- 9. Tin tuc, thuong hieu ---------- */
.tin-luoi{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;padding:16px}
.tin{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:start}
.tin img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.tin h3{font-size:.9rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tin time{display:block;font-size:.76rem;color:var(--muted-2);margin-top:6px;font-family:var(--font-ma)}
.tin-lon{grid-row:1/4;display:block}
.tin-lon img{aspect-ratio:16/9;margin-bottom:10px}
.tin-lon h3{font-size:1.1rem;-webkit-line-clamp:2}
.tin-lon p{font-size:.88rem;color:var(--muted);margin-top:6px}
.hang{display:grid;grid-template-columns:repeat(11,1fr);align-items:stretch;gap:8px;padding:14px 16px}
.hang a{border:1px solid var(--line);border-radius:var(--r);padding:6px;display:grid;place-items:center;background:#fff}
.hang img{max-height:38px;object-fit:contain}

/* ---------- 10. Chan trang ---------- */
.dk{background:var(--brand);color:#fff}
.dk .khung{display:grid;grid-template-columns:1fr minmax(0,440px);gap:24px;align-items:center;padding-block:16px}
.dk h2{font-family:var(--font-hien-thi);font-size:1.3rem;font-weight:700}
.dk p{font-size:.86rem;opacity:.92}
.dk form{display:flex;gap:8px}
.dk .o-nhap{border-color:transparent}
.chan{--text:#F1F2F4;--muted:#B6BCC6;--muted-2:#A2A9B4;--surface:var(--ink);--surface-2:var(--ink-soft);--line:#363D49;--accent-strong:#FFC72C;background:var(--ink);color:var(--text);font-size:.88rem}
.chan a:hover{color:var(--accent-strong)}
.chan-luoi{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:32px}
.chan h3{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.chan li{margin-bottom:7px;color:var(--muted)}
.chan .logo span{color:#fff}
.chan .lh li{display:flex;gap:10px;align-items:flex-start}
.chan .lh .ic{width:17px;height:17px;margin-top:3px;color:var(--accent-strong)}
.chan .lh{margin-top:16px}
.chan-day{border-top:1px solid var(--line);padding-block:14px;display:flex;justify-content:space-between;gap:16px;color:var(--muted-2);font-size:.8rem}
.noi{position:fixed;right:14px;bottom:18px;z-index:45;display:grid;gap:8px}
.noi a{width:46px;height:46px;border-radius:var(--r-tron);display:grid;place-items:center;color:#fff;box-shadow:0 4px 14px rgb(var(--shadow)/.28);font-weight:800;font-size:.72rem}
.noi .zalo{background:#0068FF}.noi .mess{background:#8A3FFC}.noi .goi-ngay{background:var(--ok)}
.thanh-day{display:none}

/* ---------- 11. Trang danh muc ---------- */
.vun{font-size:.82rem;color:var(--muted-2);padding-block:12px}
.vun ol{display:flex;flex-wrap:wrap;gap:6px}
.vun li+li::before{content:"/";margin-right:6px;color:var(--line-strong)}
.vun [aria-current]{color:var(--text);font-weight:500}
.tieu-de-trang{font-family:var(--font-hien-thi);font-size:1.7rem;font-weight:700;line-height:1.2;margin-bottom:16px}
.tieu-de-trang small{font-family:var(--font);font-size:.86rem;font-weight:400;color:var(--muted-2);margin-left:8px}
.chip-ds{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-tron);border:1px solid var(--line-strong);background:var(--surface);font-size:.86rem;font-weight:500}
.chip span{color:var(--muted-2);font-size:.78rem}
.chip:hover,.chip[aria-current]{border-color:var(--brand);color:var(--accent-strong)}
.dm-bo-cuc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.loc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 16px 16px}
.loc-dau{display:none}
.loc fieldset{border:0;padding:14px 0;margin:0;border-bottom:1px solid var(--line)}
.loc legend{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted-2);padding:0;float:left;width:100%;margin-bottom:8px}
.loc label{clear:both;display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.88rem;cursor:pointer}
.loc input[type="checkbox"]{appearance:none;width:18px;height:18px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);display:grid;place-items:center;flex:none;margin:0}
.loc input[type="checkbox"]:checked{background:var(--brand);border-color:var(--brand)}
.loc input[type="checkbox"]:checked::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.loc .nut{margin-top:14px}
.ds-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.ds-dau p{font-size:.86rem;color:var(--muted)}
.ds-dau .cb{width:280px}
.nut-loc{display:none}
.dang-loc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dang-loc button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-tron);background:#FDECEC;color:var(--accent-strong);font-size:.8rem;font-weight:600}
.dang-loc .ic{width:12px;height:12px}
.ds-luoi{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.trang{display:flex;justify-content:center;gap:6px;margin:18px 0}
.trang a,.trang span{min-width:38px;height:38px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;font-weight:600;font-size:.88rem}
.trang [aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.gt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px}
.gt h2{font-family:var(--font-hien-thi);font-size:1.25rem;margin-bottom:8px}
.gt p{margin-bottom:10px;color:var(--muted)}

/* ---------- 12. Trang chi tiet ---------- */
.ct{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr) 340px;gap:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:18px;align-items:start}
.ct-anh-lon{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative}
.ct-anh-lon img{width:100%;height:100%;object-fit:contain}
.ct-nho{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.ct-nho button{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding:3px}
.ct-nho button[aria-current="true"]{border:2px solid var(--brand)}
.ct-nho img{width:100%;height:100%;object-fit:contain}
.ct h1{font-size:1.3rem;font-weight:600;line-height:1.35}
.ct-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.82rem;color:var(--muted);margin:10px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ct-meta code{font-family:var(--font-ma);color:var(--text)}
.ct-tom li{position:relative;padding:3px 0 3px 16px;font-size:.9rem}
.ct-tom li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.ct-gia{background:var(--surface-2);border-radius:var(--r-lg);padding:14px 16px;margin:16px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ct-gia b{font-family:var(--font-hien-thi);font-size:2rem;font-weight:700;color:var(--accent-strong);line-height:1;font-variant-numeric:tabular-nums}
.ct-gia s{color:var(--muted-2);font-variant-numeric:tabular-nums}
.ct-gia em{font-style:normal;background:var(--brand);color:#fff;font-weight:700;font-size:.78rem;padding:3px 8px;border-radius:var(--r-sm)}
.ct-gia small{flex-basis:100%;font-size:.8rem;color:var(--muted-2)}
.ct-qua{border:1px dashed var(--brand);border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px}
.ct-qua h2{font-size:.86rem;font-weight:700;background:#FDECEC;color:var(--accent-strong);padding:8px 14px;display:flex;align-items:center;gap:8px}
.ct-qua ul{padding:10px 14px}
.ct-qua li{display:flex;gap:8px;padding:3px 0;font-size:.88rem}
.ct-qua li .ic{width:16px;height:16px;color:var(--ok);margin-top:3px}
.ct-mua{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
.ct-mua .nut{white-space:normal;text-align:center}
.sl{display:flex;flex:none;min-height:42px;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sl button{width:38px;font-size:1.1rem;font-weight:700}
.sl button:hover{background:var(--surface-2)}
.sl input{width:44px;border:0;text-align:center;font-weight:600;background:transparent;-moz-appearance:textfield}
.sl input::-webkit-outer-spin-button,.sl input::-webkit-inner-spin-button{appearance:none}
.ct-mua .nut{flex-direction:column;gap:0;padding:9px 14px;line-height:1.3}
.ct-mua .nut small{font-weight:500;font-size:.74rem;opacity:.9}
.ct-ben{display:grid;gap:12px}
.the{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.the h2{font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.the li{display:flex;gap:10px;padding:5px 0;font-size:.86rem}
.the .ic{width:18px;height:18px;color:var(--brand);margin-top:2px}
.the a b{font-family:var(--font-ma);color:var(--accent-strong)}
.ct-duoi{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start;margin-bottom:18px}
.hop{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.hop-than{padding:18px 22px}
.bai p{margin-bottom:12px}
.bai img{border-radius:var(--r);margin:14px auto}
.bai h2,.bai h3{font-family:var(--font-hien-thi);font-size:1.2rem;margin:18px 0 8px;text-align:left}
.bai ul{list-style:disc;padding-left:20px;margin-bottom:12px}
.thu-gon{max-height:560px;overflow:hidden;position:relative}
.thu-gon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--surface))}
.xem-them{display:flex;justify-content:center;padding:0 0 18px}
.ts{width:100%;border-collapse:collapse;font-size:.86rem}
.ts th,.ts td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ts th{width:42%;font-weight:500;color:var(--muted);background:var(--surface-2)}
.ts .nhom th{background:var(--ink);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.ts .cot th{width:auto;color:var(--ink);font-weight:700;vertical-align:bottom}
.ts-cuon{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ts.nhieu-cot{min-width:440px}
.ts.nhieu-cot th{width:auto}
.ts.nhieu-cot .o-ngan{width:1%;white-space:nowrap;text-align:center}
.thanh-mua{display:none}

/* ---------- 13. Gio hang & dat hang ---------- */
.buoc{display:flex;gap:8px;margin:4px 0 16px;font-size:.86rem;font-weight:600;color:var(--muted-2)}
.buoc li{display:flex;align-items:center;gap:8px}
.buoc li+li::before{content:"";width:34px;height:1px;background:var(--line-strong)}
.buoc b{width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);display:grid;place-items:center;font-size:.76rem}
.buoc [aria-current]{color:var(--text)}
.buoc [aria-current] b{background:var(--brand);border-color:var(--brand);color:#fff}
.dat{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:16px;align-items:start;margin-bottom:18px}
.hop-dau{padding:12px 18px;border-bottom:1px solid var(--line);font-family:var(--font-hien-thi);font-size:1.15rem;font-weight:700;display:flex;justify-content:space-between;align-items:baseline}
.hop-dau small{font-family:var(--font);font-size:.8rem;font-weight:400;color:var(--muted-2)}
.gh-dong{display:grid;grid-template-columns:76px minmax(0,1fr) auto auto 34px;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.gh-dong img{width:76px;height:76px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r)}
.gh-dong h3{font-size:.88rem;font-weight:500;line-height:1.4}
.gh-dong p{font-size:.78rem;color:var(--muted-2);margin-top:3px}
.gh-dong .tt{font-family:var(--font-hien-thi);font-weight:700;font-size:1.1rem;color:var(--accent-strong);min-width:120px;text-align:right;font-variant-numeric:tabular-nums}
.gh-xoa{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted-2)}
.gh-xoa:hover{background:#FDECEC;color:var(--accent-strong)}
.hai-cot{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.chon{display:grid;gap:8px}
.chon label{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;font-size:.9rem}
.chon label:has(input:checked){border-color:var(--brand);background:#FFF7F7;box-shadow:inset 0 0 0 1px var(--brand)}
.chon input{appearance:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);margin:2px 0 0;display:grid;place-items:center;background:var(--surface)}
.chon input:checked{border-color:var(--brand)}
.chon input:checked::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand)}
.chon small{display:block;color:var(--muted-2);font-size:.8rem}
.tong{position:sticky;top:12px}
.tong dl{margin:0;padding:14px 18px}
.tong dl div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:.9rem}
.tong dt{color:var(--muted)}
.tong dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.tong .tc{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;align-items:baseline}
.tong .tc dd{font-family:var(--font-hien-thi);font-size:1.6rem;color:var(--accent-strong)}
.tong .hop-than{padding-top:0}
.luu-y{display:flex;gap:10px;background:var(--surface-2);border-radius:var(--r);padding:10px 12px;font-size:.82rem;color:var(--muted);margin-top:12px}
.luu-y .ic{width:18px;height:18px;color:var(--ok);margin-top:2px}
.bao{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-md);box-shadow:0 12px 32px rgb(var(--shadow)/.3);font-size:.9rem;display:flex;gap:10px;align-items:center}
.bao[hidden]{display:none}
.bao .ic{color:var(--accent)}

/* ---------- 14. Ngan keo (di dong) ---------- */
.man{position:fixed;inset:0;background:rgb(var(--shadow)/.55);z-index:70}
.man[hidden]{display:none}
.ngan{position:fixed;top:0;bottom:0;left:0;width:min(330px,88vw);background:var(--surface);z-index:80;overflow:auto;transform:translateX(-100%);transition:transform .2s ease;visibility:hidden}
.ngan.mo-ra{transform:none;visibility:visible}
.ngan-dau{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--brand);color:#fff;font-weight:700}
.ngan details{border-bottom:1px solid var(--line)}
.ngan summary{display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:500;cursor:pointer;list-style:none}
.ngan summary::-webkit-details-marker{display:none}
.ngan summary .ic:first-child{color:var(--brand);width:18px;height:18px}
.ngan summary .mui{margin-left:auto;width:14px;height:14px;transition:transform .15s ease}
.ngan details[open] summary .mui{transform:rotate(90deg)}
.ngan details ul{padding:0 16px 12px 44px}
.ngan details li a{display:block;padding:6px 0;font-size:.9rem;color:var(--muted)}

/* ---------- 15. Dap ung ---------- */
@media (max-width:1499px){
  .luoi{grid-template-columns:repeat(5,minmax(0,1fr))}
  .luoi-dm{grid-template-columns:repeat(4,minmax(0,1fr))}
  .day-ray>.sp{flex-basis:calc((100% - 32px)/5)}
  .mo .khung{grid-template-columns:248px minmax(0,2fr) minmax(0,1fr)}
  .dh-dm{flex-basis:248px}
  .dm>li>a{padding:7px 12px;font-size:.88rem}
  .dm-con{width:min(840px,calc(100vw - 300px))}
  .dm-con ul{grid-template-columns:repeat(3,1fr)}
  .ct{grid-template-columns:minmax(0,440px) minmax(0,1fr) 290px}
  .dm-bo-cuc{grid-template-columns:260px minmax(0,1fr)}
  .dat{grid-template-columns:minmax(0,1fr) 400px}
}
@media (min-width:1181px) and (max-width:1499px){
  .luoi:not(.luoi-dm):not(.luoi-1h)>.sp:nth-child(n+11),.luoi-1h>.sp:nth-child(n+6){display:none}
}
@media (max-width:1180px){
  .luoi-1h>.sp:nth-child(n+5){display:none}
  .mo .khung{grid-template-columns:230px minmax(0,1fr)}
  .mo-ben{grid-column:2;grid-template-columns:1fr 1fr;margin-top:0}
  .mo-duoi{grid-column:2}
  .mo .dm{grid-row:1/4}
  .dh-dm{flex-basis:230px}
  .luoi{grid-template-columns:repeat(4,minmax(0,1fr))}
  .luoi-dm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .day-ray>.sp{flex-basis:calc((100% - 24px)/4)}
  .hang{grid-template-columns:repeat(8,1fr)}
  .ct{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .ct-ben{grid-column:1/3;grid-template-columns:1fr 1fr}
  .ct-duoi{grid-template-columns:1fr}
  .dh-cam-ket li:nth-child(4){display:none}
}
@media (max-width:900px){
  body{padding-bottom:58px}
  .tren ul:last-child,.dh,.mo .dm,.noi{display:none}
  .dau .khung{grid-template-columns:auto 1fr auto;gap:10px 12px;padding-block:10px}
  .nut-menu{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line-strong)}
  .logo svg{width:36px;height:36px}.logo span{font-size:1.15rem}.logo small{display:none}
  .tim{grid-column:1/4;grid-row:2}
  .tim button span{display:none}
  .tien-ich a:not(.gio){display:none}
  .tien-ich .gio span{display:none}
  .mo .khung{grid-template-columns:1fr}
  .mo-ben,.mo-duoi{grid-column:1}
  .mo-duoi{grid-template-columns:1fr 1fr}
  .mo-duoi a:last-child{display:none}
  .dai-dm{display:block;margin-bottom:14px}
  .dai-dm ul{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-block:2px}
  .dai-dm a{flex:none;width:92px;display:grid;justify-items:center;gap:6px;padding:10px 6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);font-size:.74rem;text-align:center;line-height:1.3;font-weight:500}
  .dai-dm .ic{width:26px;height:26px;color:var(--brand)}
  .luoi,.luoi-dm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .luoi-1h>.sp:nth-child(n+5){display:flex}
  .day-ray>.sp{flex-basis:calc((100% - 16px)/3)}
  .day .truot-nut[data-huong="-1"]{left:2px}.day .truot-nut[data-huong="1"]{right:2px}
  .khoi-dau{flex-wrap:wrap;padding-right:0}
  .khoi-con{flex-basis:100%;margin:0;padding:8px 12px;border-top:1px solid var(--line)}
  .tin-luoi{grid-template-columns:1fr 1fr}
  .tin-lon{grid-column:1/3;grid-row:auto}
  .hang{grid-template-columns:repeat(6,1fr)}
  .dk .khung{grid-template-columns:1fr}
  .chan-luoi{grid-template-columns:1fr 1fr;gap:24px}
  .chan-luoi>div:first-child{grid-column:1/3}
  .thanh-day{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgb(var(--shadow)/.08)}
  .thanh-day a,.thanh-day button{display:grid;justify-items:center;gap:2px;padding:8px 2px 7px;font-size:.68rem;font-weight:600;color:var(--muted);position:relative}
  .thanh-day .ic{width:21px;height:21px}
  .thanh-day [aria-current]{color:var(--accent-strong)}
  .thanh-day em{position:absolute;top:3px;left:calc(50% + 4px);min-width:16px;height:16px;border-radius:var(--r-tron);background:var(--brand);color:#fff;font-style:normal;font-size:.64rem;display:grid;place-items:center;padding:0 4px}
  .dm-bo-cuc{grid-template-columns:1fr}
  .loc{position:fixed;top:0;bottom:0;right:0;width:min(330px,88vw);z-index:80;border-radius:0;overflow:auto;transform:translateX(100%);transition:transform .2s ease;visibility:hidden}
  .loc.mo-ra{transform:none;visibility:visible}
  .loc-dau{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-weight:700;border-bottom:1px solid var(--line)}
  .nut-loc{display:inline-flex;padding:10px 14px}
  .ds-dau p{display:none}
  .ds-dau .cb{flex:1;width:auto}
  .ct{grid-template-columns:1fr;padding:14px}
  .ct-ben{grid-column:1;grid-template-columns:1fr}
  .ct-mua{display:none}
  .has-thanh-mua{padding-bottom:64px}
  .has-thanh-mua .thanh-day{display:none}
  .thanh-mua{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgb(var(--shadow)/.1)}
  .thanh-mua a:first-child{width:46px;border:1px solid var(--line-strong);border-radius:var(--r-md);display:grid;place-items:center;color:var(--ok)}
  .dat{grid-template-columns:1fr}
  .tong{position:static}
  .gh-dong{grid-template-columns:64px minmax(0,1fr) 34px;gap:10px}
  .gh-dong img{width:64px;height:64px;grid-row:1/3}
  .gh-dong .sl{grid-column:2;justify-self:start}
  .gh-dong .tt{grid-column:2;grid-row:2;justify-self:end;min-width:0}
  .gh-xoa{grid-column:3;grid-row:1}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .luoi,.luoi-dm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day-ray>.sp{flex-basis:calc((100% - 8px)/2)}
  .sp{padding:10px}
  .sp-gia b{font-size:1.08rem}
  .khoi-dau h2{font-size:1.05rem}
  .tab-ds button{font-size:.92rem;padding:0 12px;white-space:nowrap}
  .tren li:first-child{display:none}
  .khoi-km .khoi-dau p{display:none}
  .tin-luoi{grid-template-columns:1fr}
  .tin-lon{grid-column:1}
  .hang{grid-template-columns:repeat(4,1fr)}
  .chan-luoi{grid-template-columns:1fr}
  .chan-luoi>div:first-child{grid-column:1}
  .chan-day{flex-direction:column;gap:4px}
  .tieu-de-trang{font-size:1.35rem}
  .hai-cot{grid-template-columns:1fr}
  .ct h1{font-size:1.1rem}
  .ct-gia b{font-size:1.6rem}
  .dk form{flex-direction:column}
  .buoc li+li::before{width:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- 16. Bo sung cho ban WordPress ---------- */
.hang span{border:1px solid var(--line);border-radius:var(--r);padding:6px;display:grid;place-items:center;background:#fff}
.dang-loc a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-tron);background:#FDECEC;color:var(--accent-strong);font-size:.8rem;font-weight:600}
.ds-dau form{width:280px}
.ds-dau form .cb{width:auto}
.ic.quay{transform:rotate(180deg)}
.ct-mo-ta{margin-bottom:18px}
.bai-bo-cuc{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start;margin-bottom:18px}
.bai-bo-cuc>article:only-child{grid-column:1/3}
.bai-mo{font-weight:600;margin:10px 0 14px}
.bai table{width:100%;border-collapse:collapse;margin-bottom:12px;display:block;overflow-x:auto}
.bai td,.bai th{border:1px solid var(--line);padding:6px 10px;text-align:left}
.bai a{color:var(--accent-strong);text-decoration:underline}
.bai iframe{max-width:100%}
.tin-ds{grid-template-columns:repeat(3,minmax(0,1fr))}
.tin-cot{grid-template-columns:1fr}
.ds-lien-ket{padding:8px 18px 14px}
.ds-lien-ket a{display:block;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.ds-lien-ket a[aria-current]{color:var(--accent-strong);font-weight:600}
.gt.trong{margin-top:18px;text-align:center;padding:48px 22px}
.gt.trong p{margin:10px 0 16px}
@media (max-width:1180px){.bai-bo-cuc{grid-template-columns:1fr}.bai-bo-cuc>article:only-child{grid-column:1}.tin-ds{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.ds-dau form{flex:1;width:auto}}
@media (max-width:560px){.tin-ds{grid-template-columns:1fr}}
.loi{color:var(--accent-strong);font-size:.82rem;font-weight:600;margin-top:4px}
.loi-chung{background:#FDECEC;border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:.9rem}
.o-nhap[aria-invalid="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hop-cach{margin-top:16px}
.pc-mo{color:var(--muted);margin:8px 0 14px}
.pc-trong-khe{grid-template-columns:76px minmax(0,1fr) auto}
.pc-o{width:76px;height:76px;display:grid;place-items:center;background:var(--surface-2);border-radius:var(--r);color:var(--muted-2)}
.pc-o .ic{width:28px;height:28px}
.pc-nut{display:grid;gap:8px}
.nut:disabled{opacity:.5;cursor:not-allowed}
.lien-ket{color:var(--accent-strong);font-weight:600;text-decoration:underline}
.pc-ds li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line)}
.pc-ds img{width:72px;height:72px;object-fit:contain}
.pc-ds a{font-size:.9rem;font-weight:500}
.pc-ds p{font-size:.84rem;color:var(--muted);margin-top:4px}
.pc-ds b{color:var(--accent-strong)}
.pc-trang{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px}
.pc-trong{padding:24px 18px;color:var(--muted)}
#hop-pc{height:min(86vh,900px)}
@media print{
  .tren,.dau,.dh,.dk,.chan,.noi,.thanh-day,.vun,.pc-nut,.gh-xoa,.lien-ket,.pc-trong-khe,.sl button{display:none!important}
  body{background:#fff;padding:0}
  .dat{grid-template-columns:1fr}
  .hop{border:0}
  .tong{position:static}
}
.thanh-cong{display:flex;gap:10px;align-items:flex-start;background:#E8F5EC;color:var(--ok);border-radius:var(--r);padding:12px 14px;font-weight:600}
.thanh-cong .ic{margin-top:2px}

/* Sap xep: nhan nam cung hang voi o chon */
.ds-dau form,.ds-dau>.cb{width:auto}
.ds-dau .cb{display:flex;align-items:center;gap:10px;width:auto}
.ds-dau .cb .nhan{margin:0;white-space:nowrap}
.ds-dau .cb-nut{width:240px}
.ds-dau .cb-ds{left:auto;right:0;width:280px}
@media (max-width:900px){.ds-dau .cb .nhan{display:none}.ds-dau .cb,.ds-dau form{flex:1}.ds-dau .cb-nut{width:100%}.ds-dau .cb-ds{left:0;width:auto}}
/* Ban in bao gia: le trang = 0 de trinh duyet khong in dong ngay gio / tieu de / dia chi web / so trang o dau va cuoi trang */
.chi-in{display:none}
@page{margin:0}
@media print{
  html,body{background:#fff}
  body{padding:14mm 12mm!important;font-size:12pt}
  .chi-in{display:block}
  .chi-man-hinh,.pc-mo,.hop-dau small,.bao,.man,.ngan,.thanh-mua,.hop-thoai{display:none!important}
  div.chi-in{margin-bottom:14px;font-size:10.5pt;line-height:1.5}
  .khung{max-width:none;padding:0}
  #cau-hinh .gh-dong{grid-template-columns:64px minmax(0,1fr) 70px 150px!important;gap:12px;padding:10px 0;break-inside:avoid}
  #cau-hinh .gh-dong img{width:64px;height:64px;grid-row:auto}
  #cau-hinh .gh-dong .sl{grid-column:auto;grid-row:auto;border:0;min-height:0;justify-self:center;align-items:center}
  #cau-hinh .gh-dong .sl::before{content:"SL: ";font-size:10.5pt;color:#444}
  #cau-hinh .gh-dong .sl input{width:28px;padding:0;font-size:12pt}
  #cau-hinh .gh-dong .tt{grid-column:auto;grid-row:auto;justify-self:end;min-width:0}
  #cau-hinh .hop-dau,#cau-hinh .tong dl{padding-inline:0}
  .tong{margin-top:10px;break-inside:avoid}
}
/* Man hinh hep: hai banner canh trinh chieu xep 1 hang (khong de trong hang thu hai); nut them gio du lon de cham */
@media (max-width:1180px){.mo-ben{grid-template-rows:none}}
@media (max-width:900px){.sp-them{width:40px;height:40px}.truot-nut{width:40px;height:40px}}

p.tieu-de-trang.chi-in{display:none}
@media print{p.tieu-de-trang.chi-in{display:block}}