/* =========================================================================
   SO XE CUA TOI — giao dien
   -------------------------------------------------------------------------
   NGUOI DUNG LA BAC TAI, CHU XE TAI. Thiet ke theo do:
     · Chu TO — doc duoc khi cam dien thoai xa tam tay
     · Tuong phan MANH — xem ngoai nang van ro
     · Nut TO — bam duoc khi tay dinh dau mo, hoac deo gang
     · Mau bao dong ro rang — do la gap, cam la sap, xanh la con lau
   Khong chay theo mot mat, uu tien DOC DUOC.
   ========================================================================= */

:root {
  --nen: #f4f7fc;
  --nen-the: #ffffff;
  --chu: #101b26;
  --chu-mo: #5b6b7c;
  --vien: #dde3ea;

  --xanh: #1668d8;          /* mau chinh — tin cay, cong nghiep */
  --xanh-nhat: #e7f0fe;
  --cam: #ea6a0a;           /* sap den han */
  --cam-nhat: #fff1e3;
  --do: #c0392b;            /* qua han */
  --do-nhat: #fdeceb;
  --luc: #12a150;           /* con lau, yen tam */
  --luc-nhat: #e6f7ee;
  --zalo: #0068ff;
  --vang: #d98a00;          /* "Thu Mua Xe Tai Cu" — vang dam de doc duoc tren nen trang */
  --goi: #16a34a;           /* nut goi dien — xanh la tuoi, kieu nut nghe may */
  --thanh: #1668d8;      /* nen thanh tren va nut chinh */
  --tren-thanh: #ffffff; /* chu tren nen do */

  --bo: 14px;
  --bong: 0 1px 3px rgba(16,27,38,.08), 0 4px 12px rgba(16,27,38,.06);
}

/* ⚠️ NEN TOI PHAI CHAY O CA BA TRANG THAI:
     ① May de "tu dong theo he thong" (pho bien nhat) -> chi co prefers-color-scheme
     ② Nguoi dung bam nut chon nen toi   -> data-nen="toi"
     ③ Nguoi dung bam nut chon nen sang  -> data-nen="sang" (phai thang ca khi may dang toi)

   Da sua 01/09/2026: truoc do chi lam truong hop ②, nen bac tai de may
   o nen toi mo app ra van choi mat. */

/* ① va ② — mau toi cho may dang o nen toi, TRU khi nguoi dung chon nen sang */
@media (prefers-color-scheme: dark) {
  :root:not([data-nen="sang"]) {
    --nen: #0d1826;
    --nen-the: #16243a;
    --chu: #eaf0f6;
    --chu-mo: #93a4b5;
    --vien: #26343f;
    --xanh: #5aa9f5;
    --xanh-nhat: #16293a;
    --cam: #f0a63a;
    --cam-nhat: #33240f;
    --do: #ef6a5c;
    --do-nhat: #331a17;
    --luc: #4cc98a;
    --luc-nhat: #12291d;
    --thanh: #10233d;      /* nen toi: thanh tren phai TOI, khong lay mau chu */
    --goi: #22c55e;        /* nen toi thi xanh la phai sang hon moi noi */
    --vang: #f5b02e;       /* nen toi thi vang phai sang len */
    --bong: 0 1px 3px rgba(0,0,0,.4);
  }
}

/* ③ — nguoi dung bam chon nen toi, thang ca khi may dang o nen sang */
:root[data-nen="toi"] {
  --vang: #f5b02e;
  --goi: #22c55e;        /* nen toi thi xanh la phai sang hon moi noi */
  --nen: #0d1826;
  --nen-the: #16243a;
  --chu: #eaf0f6;
  --chu-mo: #93a4b5;
  --vien: #26343f;
  --xanh: #5aa9f5;
  --xanh-nhat: #16293a;
  --cam: #f0a63a;
  --cam-nhat: #33240f;
  --do: #ef6a5c;
  --do-nhat: #331a17;
  --luc: #4cc98a;
  --luc-nhat: #12291d;
  --thanh: #10233d;
  --bong: 0 1px 3px rgba(0,0,0,.4);
}


/* ⚠️ PHAI CO DONG NAY.
   .nut.rong dat display:flex — no GHI DE thuoc tinh hidden cua HTML,
   lam nut van hien du da an. Da dinh that 01/09/2026. */
[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  padding-bottom: 84px;   /* chua cho thanh duoi */
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- thanh tren */
.thanh-tren {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0)) 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0));
  background: var(--thanh);
  color: var(--tren-thanh);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.thanh-tren h1 { flex: 1; margin: 0; font-size: 1.24em; font-weight: 700; letter-spacing: .2px; }

.nut-tron, .nut-quay-lai {
  background: rgba(255,255,255,.16); color: #fff;
  border: 0; border-radius: 50%;
  width: 40px; height: 40px; font-size: 1.2em;
  cursor: pointer; flex: none;
}
.nut-quay-lai { font-size: 1.9em; line-height: 1; padding-bottom: 4px; }
.nut-tron:active, .nut-quay-lai:active { background: rgba(255,255,255,.3); }

/* ---------------------------------------------------- khung chung */
main { max-width: 640px; margin: 0 auto; padding: 16px; }
.man { animation: hien .22s ease; }
@keyframes hien { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.the {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--bong);
}
.the h3 { margin: 0 0 10px; font-size: 1.05em; }

/* ---------------------------------------------------- man hinh trong */
.trong { text-align: center; padding: 48px 20px; }
.trong-hinh { font-size: 4.4em; line-height: 1; margin-bottom: 8px; }
.trong h2 { margin: 0 0 8px; font-size: 1.35em; }
.trong p { color: var(--chu-mo); margin: 0 0 26px; }

/* ---------------------------------------------------- the xe */
.the-xe {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  margin-bottom: 14px;
  box-shadow: var(--bong);
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s ease;
}
.the-xe:active { transform: scale(.985); }

/* Vach mau doc ben trai: bac tai luot mat qua danh sach la biet xe nao
   dang co van de, khong phai doc tung dong. */
.the-xe { border-left: 5px solid var(--chu-mo); }
.the-xe.v-qua-han, .the-xe.v-gap { border-left-color: var(--do); }
.the-xe.v-sap     { border-left-color: var(--cam); }
.the-xe.v-con-lau { border-left-color: var(--luc); }

.xe-dau {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
}
/* Bien so dung chu vuong deu net nhu bien that gan tren xe —
   nhin luot qua la nhan ra ngay xe nao, khong phai doc tung chu. */
.xe-bien {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: 1.34em; font-weight: 700; letter-spacing: .6px;
  font-variant-numeric: tabular-nums;
}
.xe-ten { color: var(--chu-mo); font-size: .9em; margin-top: 1px; }
.xe-den { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; flex: none; }

.xe-than { padding: 0 18px 16px; }

.dong-viec {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--vien);
}
.dong-viec:first-child { border-top: 0; }
.viec-ten { flex: 1; }
.viec-gia-tri { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viec-uoc { font-size: .78em; color: var(--chu-mo); font-weight: 400; }

/* --- mau theo muc do --- */
.m-qua-han  { color: var(--do); }
.m-gap      { color: var(--do); }
.m-sap      { color: var(--cam); }
.m-con-lau  { color: var(--luc); }
.m-chua-co  { color: var(--chu-mo); }

.den-qua-han, .den-gap { background: var(--do); }
.den-sap     { background: var(--cam); }
.den-con-lau { background: var(--luc); }
.den-chua-co { background: var(--chu-mo); }

.nhan-canh {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .74em; font-weight: 700; letter-spacing: .3px;
}
.nhan-qua-han { background: var(--do-nhat); color: var(--do); }
.nhan-gap { background: var(--do-nhat); color: var(--do); }
.nhan-sap { background: var(--cam-nhat); color: var(--cam); }

/* --- bang bao doi xe --- */
.bang-doi-xe {
  background: var(--cam-nhat);
  border: 1px solid rgba(217,119,6,.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.bang-doi-xe p { margin: 0 0 12px; }

/* ---------------------------------------------------- nut */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 20px;
  border: 0; border-radius: 12px;
  font-size: 1.03em; font-weight: 700;
  font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: transform .1s ease, filter .1s ease;
}
.nut:active { transform: scale(.97); filter: brightness(.94); }
.nut.to { padding: 18px 30px; font-size: 1.1em; }
.nut.rong { display: flex; width: 100%; }

.nut-chinh { background: var(--thanh); color: var(--tren-thanh); }
.nut-zalo  { background: var(--zalo); color: #fff; }
.nut-vien  { background: transparent; color: var(--xanh); border: 2px solid var(--xanh); }
.nut-nguy-hiem { background: transparent; color: var(--do); border: 2px solid var(--do); margin-top: 20px; }

.hang-nut { display: flex; gap: 10px; margin-top: 20px; }
.hang-nut .nut { flex: 1; }
.hang-nut-lien-he { display: flex; gap: 10px; margin-bottom: 10px; }
.hang-nut-lien-he .nut { flex: 1; }

/* ---------------------------------------------------- phieu nhap */
.phieu { background: var(--nen-the); border: 1px solid var(--vien);
         border-radius: var(--bo); padding: 18px; box-shadow: var(--bong); }
.o { display: block; margin-bottom: 15px; }
.nhan { display: block; font-size: .9em; font-weight: 600; color: var(--chu-mo); margin-bottom: 6px; }
.bat-buoc { color: var(--do); }

input, select, textarea {
  width: 100%; padding: 14px;
  border: 2px solid var(--vien); border-radius: 11px;
  background: var(--nen); color: var(--chu);
  font-size: 1.05em; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--xanh); background: var(--nen-the);
}
#bienSo { font-size: 1.3em; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }

.hang-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tieu-de-nho {
  margin: 24px 0 12px; padding-top: 16px;
  border-top: 1px solid var(--vien);
  font-size: .95em; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .6px;
}
.ghi-chu { font-size: .87em; color: var(--chu-mo); margin: -6px 0 4px; }

/* ---------------------------------------------------- lien he */
.the-lien-he { background: linear-gradient(160deg, var(--thanh), #0d2a45); color: #fff; border: 0; }
:root[data-nen="toi"] .the-lien-he { background: linear-gradient(160deg, #1b4a70, #10293d); }
.lien-he-dau { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lien-he-icon { font-size: 2.6em; }
.the-lien-he h2 { margin: 0; font-size: 1.28em; }
.the-lien-he p { margin: 2px 0 0; opacity: .85; font-size: .92em; }
.the-lien-he .nut-vien { color: #fff; border-color: rgba(255,255,255,.55); }
.lien-he-loi { margin: 16px 0 0 !important; opacity: .95 !important; font-size: .95em !important; }

.the-rieng-tu { border-left: 4px solid var(--luc); }
.danh-sach-cham { margin: 0; padding-left: 22px; }
.danh-sach-cham li { margin: 7px 0; }
.nho { font-size: .87em; color: var(--chu-mo); }

/* ---------------------------------------------------- thanh duoi */
.thanh-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0)) 16px;
  background: var(--nen-the);
  border-top: 1px solid var(--vien);
  box-shadow: 0 -2px 14px rgba(16,27,38,.07);
}
.chan-ten {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 6px 0;
  color: var(--chu); font-family: inherit; font-size: .98em; font-weight: 700;
  cursor: pointer; text-align: left;
}
.chan-icon { font-size: 1.35em; }

/* Hai dong o thanh duoi: ten hieu va cau chao hang.
   "Thu Mua Xe Tai Cu" quan trong hon ve mat lam an — ba con sap doi xe
   nhin thay dong nay la nho toi Anh Giang khi ban con xe cu.
   Mau vang dam #c77c02 chu khong phai vang tuoi: vang tuoi tren nen trang
   thi chu nho doc khong ra, nhat la bac tai lon tuoi xem ngoai nang. */
.chan-chu { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chan-hieu { line-height: 1.2; }
.chan-thu-mua {
  font-size: .78em; font-weight: 800; letter-spacing: .3px;
  color: var(--vang); line-height: 1.2;
  text-transform: uppercase;
}

/* Mui ten chi sang hai nut goi va Zalo ben phai.
   Nhich qua nhich lai cho mat bat duoc — nhung nhe thoi, nhap nhay manh
   thi thanh quang cao re tien, ma app nay phai giu ve dang tin. */
.chan-mui-ten {
  display: inline-block;
  font-size: 1.1em; font-weight: 900;
  animation: nhichPhai 1.6s ease-in-out infinite;
}
@keyframes nhichPhai {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* May cai dat tat hieu ung thi dung mui ten yen mot cho */
@media (prefers-reduced-motion: reduce) {
  .chan-mui-ten { animation: none; }
}
.chan-nut { display: flex; gap: 9px; }
.chan-tron {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--goi); color: #fff;
  font-size: 1.28em; text-decoration: none;
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
.chan-zalo { background: var(--zalo); box-shadow: 0 2px 8px rgba(0,104,255,.32); }
.chan-tron:active { filter: brightness(.9); }

/* ---------- O nhap ngay: go so, khong dung lich ----------
   Chu to va thua chan de bac tai ngoi trong cabin doc duoc,
   do sai lech giua so 3 va so 8 khi tay dinh dau mo. */
.o-ngay {
  font-size: 1.15em; font-weight: 700;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}
.o-ngay::placeholder { font-weight: 400; letter-spacing: 0; font-size: .86em; }
.o-ngay-sai {
  border-color: var(--do) !important;
  background: var(--do-nhat) !important;
  color: var(--do);
}

/* ---------------------------------------------------- chi tiet xe */
.muc { margin-bottom: 22px; }
.muc-dau {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 10px; font-size: .9em; font-weight: 700;
  color: var(--chu-mo); text-transform: uppercase; letter-spacing: .6px;
}
.dong-bd {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: 11px; margin-bottom: 9px;
}
.bd-ten { flex: 1; }
.bd-phu { font-size: .82em; color: var(--chu-mo); }
.nut-ghi {
  background: var(--xanh-nhat); color: var(--xanh);
  border: 0; border-radius: 9px; padding: 9px 14px;
  font-size: .88em; font-weight: 700; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
:root[data-nen="toi"] .nut-ghi { background: var(--xanh-nhat); color: #8cc6ec; }

.km-lon {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 2em; font-weight: 800; font-variant-numeric: tabular-nums;
}
.km-lon small { font-size: .44em; font-weight: 600; color: var(--chu-mo); }

@media (min-width: 700px) {
  body { font-size: 18px; }
}

/* ---------------------------------------------------- khoi bao duong */
.khoi-bd { margin-bottom: 9px; }
.khoi-bd .dong-bd { margin-bottom: 0; }
.khoi-bd .bd-luu-y + .bd-luu-y { border-top: 0; padding-top: 0; }

.bd-luu-y {
  padding: 9px 16px;
  background: var(--xanh-nhat);
  border: 1px solid var(--vien);
  border-top: 0;
  font-size: .85em;
  color: var(--chu-mo);
  line-height: 1.45;
}
.khoi-bd .dong-bd { border-radius: 11px 11px 0 0; }
.khoi-bd:has(.bd-luu-y) .dong-bd { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.khoi-bd .bd-luu-y:last-child { border-radius: 0 0 11px 11px; }
.khoi-bd:not(:has(.bd-luu-y)) .dong-bd { border-radius: 11px; }
.bd-luu-y b { color: var(--chu); }

/* ---------------------------------------------------- lop phu (bang chon) */
.lop-phu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8,14,20,.55);
  animation: hienMo .18s ease;
}
@keyframes hienMo { from { opacity: 0 } to { opacity: 1 } }

.lop-phu .hop {
  width: 100%; max-width: 640px;
  max-height: 88vh; overflow-y: auto;
  background: var(--nen-the);
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0));
  animation: truotLen .22s ease;
}
@keyframes truotLen { from { transform: translateY(24px) } to { transform: none } }
.lop-phu h3 { margin: 0 0 8px; font-size: 1.15em; }

@media (prefers-reduced-motion: reduce) {
  .lop-phu, .lop-phu .hop, .man { animation: none; }
}

/* =========================================================================
   NHOM NUT CHON — thay cho o xo xuong
   Anh Giang yeu cau 02/09/2026: bam vao dong minh chon la xong.
   Nut cao 54px vi bac tai bam bang ngon tay cai, tay con dinh dau mo.
   ========================================================================= */
.an-o-xo { display: none !important; }

.nhom-chon {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-top: 6px;
}
.nhom-chon[data-cot="2"] { grid-template-columns: 1fr 1fr; }

.chon-nut {
  display: flex; align-items: center; gap: 8px;
  min-height: 54px; padding: 12px 14px;
  text-align: left; line-height: 1.35;
  font-family: inherit; font-size: .97em; font-weight: 600;
  color: var(--chu); background: var(--nen-the);
  border: 2px solid var(--vien); border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chon-nut:active { transform: scale(.98); }

/* Cai dang chon: vien xanh dam, nen xanh nhat, them dau tich cho chac */
.chon-nut.dang-chon {
  border-color: var(--xanh); background: var(--xanh-nhat); color: var(--xanh);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--xanh);
}
.chon-nut.dang-chon::before { content: "✓"; font-weight: 900; }
.chon-nut:not(.dang-chon)::before { content: ""; width: 0; }

/* =========================================================================
   O NHAP SO KI-LO-MET
   Cham theo nhom nghin (231.400) cho de doc. Chu so deu bang nhau
   (tabular-nums) de cot so khong nhay khi go.
   ========================================================================= */
.o-km {
  font-size: 1.15em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.o-km::placeholder { font-weight: 400; letter-spacing: 0; }

/* O trong hop hoi km: to han vi day la viec ba con lam thuong xuyen nhat */
.o-km-to {
  width: 100%; margin-top: 10px;
  padding: 16px 18px;
  font-size: 1.6em; font-weight: 800; text-align: center;
  color: var(--chu); background: var(--nen);
  border: 2px solid var(--vien); border-radius: 12px;
}
.o-km-to:focus { outline: 0; border-color: var(--xanh); background: var(--nen-the); }

/* ---------- Nut tra phat nguoi o dong dau app ----------
   Mau cam: viec nay lien quan den phat, phai noi bat hon nut thuong
   nhung khong do chot nhu bao qua han. */
.nut-phat {
  justify-content: center;
  margin-bottom: 14px;
  background: var(--cam-nhat); color: var(--cam);
  border: 2px solid var(--cam);
  font-weight: 800;
}
.nut-phat:active { filter: brightness(.96); }

/* =========================================================================
   DAI MOI CAI APP VAO MAN HINH DIEN THOAI
   De o dong dau nhung KHONG dung mau canh bao — day la loi moi, khong phai
   viec gap. Mau xanh nhat cua thuong hieu, du de mat dung lai mot nhip.
   ========================================================================= */
.dai-cai {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--xanh-nhat);
  border: 1px solid var(--xanh);
  border-radius: var(--bo);
}
.dai-cai-chu { display: flex; flex-direction: column; gap: 3px; }
.dai-cai-chu b { font-size: 1.02em; color: var(--xanh); }
.dai-cai-chu span { font-size: .88em; color: var(--chu-mo); line-height: 1.4; }

.dai-cai-nut { display: flex; gap: 9px; }
.dai-cai-nut .nut { flex: 1; justify-content: center; padding: 12px 14px; }

/* =========================================================================
   HUONG DAN CAI APP — mot cau, mot viec
   Anh Giang 02/09/2026: ba con khong doc danh sach 1-2-3. Cho nen viec
   phai lam thi de CHU TO, cai gi phu thi nho lai va nhat mau di.
   ========================================================================= */
.viec-chinh {
  margin: 14px 0 0;
  font-size: 1.12em; font-weight: 700; line-height: 1.5;
  color: var(--chu);
}
.viec-chinh b { color: var(--xanh); }

.viec-phu {
  margin: 10px 0 0;
  font-size: .9em; line-height: 1.5; color: var(--chu-mo);
}
.viec-phu b { color: var(--chu); }

/* =========================================================================
   MAU RIENG CUA APP XE CON
   Anh Giang 02/09/2026: "cho mau sac tuoi tan noi bat hon".
   Thanh tren dung dai chuyen mau xanh duong — sang hon han khoi mau
   navy dac ben app xe tai, ma van du dam de chu trang doc ro.
   ========================================================================= */
.thanh-tren {
  background: linear-gradient(100deg, #1668d8 0%, #0ea5e9 100%);
}
:root[data-nen="toi"] .thanh-tren,
:root:not([data-nen="sang"]) .thanh-tren {
  background: linear-gradient(100deg, #10233d 0%, #12395e 100%);
}

/* Nut chinh cung theo dai mau do cho dong bo */
.nut-chinh {
  background: linear-gradient(100deg, #1668d8 0%, #1a7fe8 100%);
}

/* =========================================================================
   NHOM HANG MUC BAO DUONG
   Anh Giang 02/09/2026: hon 30 hang muc, gom thanh nhom cho de xem.
   Nhom co viec gap thi tu mo san — viec gap phai dap vao mat.
   ========================================================================= */
.nhom-bd {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: 12px;
  margin-bottom: 9px;
  overflow: hidden;
}
.nhom-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  cursor: pointer; list-style: none;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.nhom-dau::-webkit-details-marker { display: none; }
.nhom-hinh { font-size: 1.2em; }
.nhom-ten { flex: 1; }

/* Dau mui ten tu xoay khi mo — bao cho biet bam vao la mo ra */
.nhom-dau::after {
  content: "⌄"; font-size: 1.1em; color: var(--chu-mo);
  transition: transform .18s ease;
}
.nhom-bd[open] > .nhom-dau::after { transform: rotate(180deg); }

.nhom-dem {
  font-size: .8em; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  background: var(--nen); color: var(--chu-mo);
}
.nhom-dem.m-gap { background: var(--do-nhat); color: var(--do); }
.nhom-dem.m-sap { background: var(--cam-nhat); color: var(--cam); }

.nhom-than { padding: 0 10px 10px; }
.nhom-than .dong-bd { margin-bottom: 7px; }
.nhom-than .dong-bd:last-child { margin-bottom: 0; }

/* =========================================================================
   BA VIEC PHAI DE MAT — dau may, nuoc mat, ac quy
   Anh Giang 02/09/2026: ba thu nay phai noi bat hon han cac hang muc khac.
   Vien cam va nen nhat de mat rot vao truoc tien, nhung khong do chot
   nhu bao qua han — day la nhac nho thuong truc, khong phai bao dong.
   ========================================================================= */
.viec-nong {
  background: var(--nen-the);
  border: 2px solid var(--cam);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
.viec-nong-dau {
  display: flex; align-items: center; gap: 12px;
}
.viec-nong-ten { flex: 1; font-weight: 800; font-size: 1.02em; }
.viec-nong-xem {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--vien);
  font-size: .88em; line-height: 1.55; color: var(--chu-mo);
}
.viec-nong-xem b { color: var(--chu); }