/* ==========================================================================
   TBS CRM — hệ thống giao diện
   Viết tay, không build, không framework. Thiết kế cho điện thoại trước.

   NGUYÊN TẮC MÀU: đỏ tươi là màu thương hiệu và chỉ dùng cho ĐIỂM NHẤN —
   thanh trên, nút chính, tab đang chọn, cảnh báo. Vùng đọc dữ liệu giữ nền
   trắng sạch, vì màn hình này để đọc số liệu ngoài nắng, không phải để ngắm.
   ========================================================================== */

:root {
  /* --- Đỏ thương hiệu: tươi, ấm, không chói --- */
  /* #E5202E là điểm sáng NHẤT mà chữ trắng vẫn đạt 4.5:1 — đo bằng trình duyệt,
     không ước lượng. Sáng hơn nữa thì chữ trên nút bắt đầu khó đọc ngoài nắng. */
  --do:        #E5202E;   /* nền nút, tab đang chọn, điểm nhấn */
  --do-dam:    #C1121F;   /* chữ đỏ trên nền sáng */
  --do-sang:   #FF4A55;   /* CHỈ dùng cho mảng trang trí không có chữ (cột biểu đồ) */
  --do-nhat:   #FFECED;   /* nền nhãn, nền cảnh báo */
  --do-vien:   #FFC9CC;

  /* --- Xanh kho: cho thuê, sẵn sàng, tích cực --- */
  --xanh:      #0E7C6B;
  --xanh-nhat: #E1F5F1;
  --xanh-vien: #A8DDD3;

  /* --- Hổ phách: cọc, đang chờ, cần chú ý --- */
  --vang:      #9C5A00;
  --vang-nhat: #FFF3DF;
  --vang-vien: #F5D9A8;

  /* --- Trung tính ngả ấm theo đỏ, không phải xám chết --- */
  --nen:       #FAF6F5;
  --the:       #FFFFFF;
  --the-2:     #F5EEED;
  --muc:       #17100F;
  --muc-2:     #5A4E4C;
  --muc-3:     #786866;
  --vien:      #EDE0DE;
  --vien-dam:  #DAC7C4;

  /* Dải màu bắt đầu từ chính --do chứ không sáng hơn: mọi điểm trên nút đều
     giữ được tương phản cho chữ trắng. */
  --grad-do:   linear-gradient(135deg, #E5202E 0%, #D0121F 58%, #B80F1B 100%);

  --bong-1:    0 1px 2px rgba(23,16,15,.04), 0 1px 3px rgba(23,16,15,.06);
  --bong-2:    0 2px 4px rgba(23,16,15,.04), 0 8px 22px -12px rgba(23,16,15,.20);
  --bong-do:   0 4px 14px -4px rgba(229,32,46,.38);

  --r:         14px;
  --r-nho:     10px;
  --tab-h:     62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --do: #FF5A64; --do-dam: #FF8189; --do-sang: #FF7B84;
    --do-nhat: #3A1B1E; --do-vien: #5E2A2E;
    --xanh: #4FCFB8; --xanh-nhat: #10312C; --xanh-vien: #1D5349;
    --vang: #E5A63C; --vang-nhat: #362713; --vang-vien: #5A431C;
    --nen: #121010; --the: #1C1817; --the-2: #272120;
    --muc: #F5EEEC; --muc-2: #C6B9B6; --muc-3: #94847F;
    --vien: #302826; --vien-dam: #453A38;
    --grad-do: linear-gradient(135deg, #DE2733 0%, #BC1C27 60%, #9E141E 100%);
    --bong-1: 0 1px 2px rgba(0,0,0,.5);
    --bong-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.8);
    --bong-do: 0 4px 16px -5px rgba(232,50,62,.45);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--muc);
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.has-tabbar {
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 10px);
}

a { color: var(--do-dam); text-underline-offset: 2px; }

:focus-visible {
  outline: 2.5px solid var(--do);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Bố cục ---------- */
.wrap { max-width: 780px; margin: 0 auto; padding: 0 15px; }

/* Thanh trên: dải đỏ chuyển màu — đây là chỗ thương hiệu lên tiếng */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--grad-do);
  color: #fff;
  padding: 12px 0 13px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  box-shadow: 0 2px 14px -4px rgba(229,32,46,.48);
}
.topbar .wrap { display: flex; align-items: center; gap: 12px; }
.topbar h1 {
  font-size: 1.16rem; font-weight: 700; margin: 0;
  letter-spacing: -.022em; flex: 1; line-height: 1.2;
}
.topbar .sub {
  font-size: .74rem; font-weight: 500; margin-top: 1px;
  color: rgba(255,255,255,.82);
}
.topbar .nut.phu {
  background: rgba(255,255,255,.16); color: #fff;
  border-color: rgba(255,255,255,.28);
}
.topbar .nut.phu:hover { background: rgba(255,255,255,.26); }

main { padding: 18px 0 26px; }

/* ---------- Thẻ ---------- */
.the {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: var(--r);
  padding: 17px 18px;
  box-shadow: var(--bong-2);
  margin-bottom: 13px;
}
.the h2 {
  font-size: .82rem; font-weight: 700; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muc-3);
}
.the p:last-child { margin-bottom: 0; }

/* Vạch trạng thái bên trái — mã hoá bằng CẢ màu lẫn vị trí, để đọc được
   ngoài nắng và với người mù màu. */
.the.gap { border-left: 4px solid var(--do);   background: linear-gradient(90deg, var(--do-nhat) 0%, var(--the) 34%); }
.the.ok  { border-left: 4px solid var(--xanh); background: linear-gradient(90deg, var(--xanh-nhat) 0%, var(--the) 34%); }
.the.cho { border-left: 4px solid var(--vang); background: linear-gradient(90deg, var(--vang-nhat) 0%, var(--the) 34%); }

/* ---------- Ô số liệu ---------- */
.so-lieu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-bottom: 15px; }
@media (min-width: 560px) { .so-lieu { grid-template-columns: repeat(4, 1fr); } }
.o {
  background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--r); padding: 14px 15px; box-shadow: var(--bong-1);
  position: relative; overflow: hidden;
}
.o::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--vien-dam);
}
.o .n {
  display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.12;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.o .l { display: block; font-size: .73rem; color: var(--muc-3); margin-top: 4px; line-height: 1.32; }
.o.xanh .n { color: var(--xanh); } .o.xanh::after { background: var(--xanh); }
.o.do .n   { color: var(--do-dam); } .o.do::after { background: var(--do); }
.o.vang .n { color: var(--vang); } .o.vang::after { background: var(--vang); }

/* ---------- Nút ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .1s ease, box-shadow .16s ease, background .16s ease;
}
.nut:active { transform: translateY(1px); }
.nut.chinh {
  background: var(--grad-do); color: #fff; box-shadow: var(--bong-do);
  font-weight: 700; letter-spacing: .005em;
}
.nut.chinh:hover { box-shadow: 0 6px 20px -4px rgba(229,32,46,.50); }
.nut.phu {
  background: var(--the); color: var(--muc); border-color: var(--vien-dam);
  box-shadow: var(--bong-1);
}
.nut.phu:hover { background: var(--the-2); border-color: var(--muc-3); }
.nut.rong { width: 100%; }
.nut:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------- Biểu mẫu ---------- */
.truong { margin-bottom: 15px; }
.truong label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--muc-2); margin-bottom: 6px; letter-spacing: .005em;
}
.truong input, .truong select, .truong textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  background: var(--the); color: var(--muc);
  border: 1.5px solid var(--vien-dam); border-radius: 11px;
  font: inherit; font-size: 16px;   /* 16px để iOS không tự phóng to khi focus */
  transition: border-color .14s, box-shadow .14s;
}
.truong textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.truong input:focus, .truong select:focus, .truong textarea:focus {
  border-color: var(--do); outline: none;
  box-shadow: 0 0 0 4px var(--do-nhat);
}
.truong input::placeholder, .truong textarea::placeholder { color: var(--muc-3); opacity: .75; }
.truong .goi-y { font-size: .76rem; color: var(--muc-3); margin-top: 5px; line-height: 1.4; }

/* ---------- Thông báo ---------- */
.bao {
  border-radius: 12px; padding: 12px 15px; margin-bottom: 13px;
  font-size: .9rem; font-weight: 500; border: 1px solid;
  display: flex; gap: 9px; align-items: flex-start; box-shadow: var(--bong-1);
}
.bao.loi   { background: var(--do-nhat);   border-color: var(--do-vien);   color: var(--do-dam); }
.bao.thanh { background: var(--xanh-nhat); border-color: var(--xanh-vien); color: var(--xanh); }
.bao.canh  { background: var(--vang-nhat); border-color: var(--vang-vien); color: var(--vang); }

/* ---------- Nhãn nhỏ ---------- */
.nhan {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 7px;
  white-space: nowrap; border: 1px solid transparent;
}
.nhan.thue { background: var(--xanh-nhat); color: var(--xanh); border-color: var(--xanh-vien); }
.nhan.ban  { background: var(--do-nhat);   color: var(--do-dam); border-color: var(--do-vien); }
.nhan.sua  { background: var(--vang-nhat); color: var(--vang); border-color: var(--vang-vien); }
.nhan.xam  { background: var(--the-2);     color: var(--muc-2); border-color: var(--vien); }

/* ---------- Thanh tab dưới ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: var(--the);
  border-top: 1px solid var(--vien);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 18px -8px rgba(23,16,15,.18);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tab-h); position: relative;
  color: var(--muc-3); text-decoration: none;
  font-size: .67rem; font-weight: 600; transition: color .15s;
}
.tabbar a .hop-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 27px; border-radius: 999px; transition: background .18s;
}
.tabbar a.on { color: var(--do-dam); }
.tabbar a.on .hop-icon { background: var(--do-nhat); }
.tabbar a.on svg { stroke-width: 2.3; }
.tabbar svg { width: 21px; height: 21px; stroke-width: 1.85; }

/* ---------- Danh sách ---------- */
.ds { list-style: none; margin: 0; padding: 0; }
.ds li {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 10px; box-shadow: var(--bong-1);
  transition: box-shadow .16s, border-color .16s;
}
.ds li:hover { box-shadow: var(--bong-2); border-color: var(--vien-dam); }
.ds .ten { font-weight: 600; font-size: .96rem; }
.ds .phu { font-size: .8rem; color: var(--muc-3); }

/* Số điện thoại LUÔN là nút bấm được — không bao giờ bắt người dùng copy tay */
.sdt {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .86rem;
  color: var(--do-dam); text-decoration: none; min-height: 34px;
}
.sdt:hover { text-decoration: underline; }

.trong { text-align: center; padding: 44px 20px; color: var(--muc-3); }
.trong .to { font-size: 2.6rem; margin-bottom: 10px; opacity: .8; }

/* ---------- Trang đăng nhập ---------- */
.dn-nen {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 460px at 50% -10%, var(--do-nhat) 0%, transparent 68%),
    var(--nen);
}
.dn-hop { width: 100%; max-width: 384px; position: relative; }
.dn-logo { text-align: center; margin-bottom: 26px; }
.dn-logo .dau {
  width: 62px; height: 62px; margin: 0 auto 15px;
  border-radius: 19px; background: var(--grad-do);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: -.04em;
  box-shadow: var(--bong-do);
}
.dn-logo .ten { font-size: 1.62rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.dn-logo .ten span { color: var(--do); }
.dn-logo .mo-ta { font-size: .86rem; color: var(--muc-3); margin-top: 4px; }

/* ---------- Bảng ---------- */
.bang-cuon {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-nho); border: 1px solid var(--vien);
}
table { border-collapse: collapse; width: 100%; font-size: .87rem; }
th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--muc-3); padding: 11px 13px;
  background: var(--the-2); border-bottom: 1px solid var(--vien-dam); white-space: nowrap;
}
td { padding: 12px 13px; border-bottom: 1px solid var(--vien); }
tr:last-child td { border-bottom: none; }
td.so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* ==========================================================================
   Màn hình khách hàng, gọi lại, thống kê
   ========================================================================== */

.tim { display: flex; gap: 9px; margin-bottom: 13px; }
.tim input {
  flex: 1; min-height: 50px; padding: 11px 17px; font-size: 16px;
  background: var(--the); color: var(--muc);
  border: 1.5px solid var(--vien-dam); border-radius: 999px; font-family: inherit;
  box-shadow: var(--bong-1); transition: border-color .14s, box-shadow .14s;
}
.tim input:focus { border-color: var(--do); outline: none; box-shadow: 0 0 0 4px var(--do-nhat); }
.tim .nut { border-radius: 999px; padding: 0 22px; }

.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
  margin-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 999px;
  background: var(--the); border: 1.5px solid var(--vien-dam);
  color: var(--muc-2); text-decoration: none; font-size: .84rem; font-weight: 600;
  white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; box-shadow: var(--bong-1);
}
.chip:hover { border-color: var(--do-vien); color: var(--do-dam); }
.chip.on {
  background: var(--grad-do); border-color: transparent; color: #fff;
  box-shadow: var(--bong-do);
}
.chip b { background: var(--do-nhat); color: var(--do-dam); border-radius: 999px; padding: 1px 8px; font-size: .73rem; }
.chip.on b { background: rgba(255,255,255,.26); color: #fff; }

.thanh-ket-qua {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 11px; font-size: .86rem; color: var(--muc-2);
}
.thanh-ket-qua strong { color: var(--muc); font-weight: 800; }
.thanh-ket-qua select {
  min-height: 40px; padding: 7px 12px; font-size: .85rem; font-family: inherit;
  background: var(--the); color: var(--muc);
  border: 1.5px solid var(--vien-dam); border-radius: 10px; max-width: 58%;
}

/* ---------- Dòng khách hàng ---------- */
.ds li.canh-bao {
  border-left: 4px solid var(--do);
  background: linear-gradient(90deg, var(--do-nhat) 0%, var(--the) 30%);
}
.kh-dong { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kh-ten {
  font-weight: 700; font-size: 1rem; color: var(--muc); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0;
  letter-spacing: -.012em;
}
.kh-ten:hover { color: var(--do-dam); }
.kh-tien {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: .92rem;
  color: var(--xanh); white-space: nowrap; letter-spacing: -.015em;
}
.kh-phu { display: flex; gap: 15px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.kh-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 8px; font-size: .78rem; color: var(--muc-2);
}
.phu { color: var(--muc-3); font-size: .8rem; }
.stt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 8px;
  background: var(--the-2); color: var(--muc-3);
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ly-do {
  margin-top: 9px; padding: 9px 12px; border-radius: 10px;
  background: var(--do-nhat); color: var(--do-dam);
  border: 1px solid var(--do-vien);
  font-size: .8rem; line-height: 1.5;
}

/* ---------- Hồ sơ khách ---------- */
.kh-dau { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.kh-ten-to { font-size: 1.3rem; font-weight: 800; letter-spacing: -.028em; line-height: 1.22; }
.hanh-dong { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.hanh-dong .nut { flex: 1; min-width: 132px; }

.phan-trang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 18px 0 8px; font-size: .85rem; color: var(--muc-3);
}

/* ---------- Bộ lọc kỳ thống kê ---------- */
.loc-ky { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end; }
.ky-dang-xem {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--vien);
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.015em;
}

.thanh-doi {
  display: flex; height: 30px; border-radius: 10px; overflow: hidden;
  background: var(--the-2); box-shadow: inset 0 1px 3px rgba(23,16,15,.07);
}
.thanh-doi .phan.moi { background: var(--grad-do); }
.thanh-doi .phan.cu  { background: var(--xanh); }
.chu-thich { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: .82rem; color: var(--muc-2); }
.chu-thich i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; }
.chu-thich i.moi { background: var(--do); }
.chu-thich i.cu  { background: var(--xanh); }

/* ---------- Biểu đồ cột ---------- */
.cot-doc {
  display: flex; gap: 4px; align-items: flex-end;
  overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.cot { flex: 1 0 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cot-than { width: 100%; height: 128px; display: flex; align-items: flex-end; }
.cot-day {
  width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--do-sang), var(--do));
}
.cot-nhan {
  font-size: .62rem; color: var(--muc-3); white-space: nowrap;
  transform: rotate(-45deg); transform-origin: center; height: 22px;
}

.dong-tk {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--vien); font-size: .87rem;
}
.dong-tk:last-child { border-bottom: none; }
.dong-tk b { font-variant-numeric: tabular-nums; font-weight: 700; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 13px; } }

/* ==========================================================================
   Màn hình nhập đơn
   ========================================================================== */

.chon-loai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.o-loai {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 66px; padding: 8px; border-radius: 13px; cursor: pointer;
  background: var(--the); border: 2px solid var(--vien-dam);
  font-weight: 700; font-size: .93rem; text-align: center; color: var(--muc-2);
  transition: all .15s;
}
.o-loai input { position: absolute; opacity: 0; pointer-events: none; }
.o-loai:hover { border-color: var(--muc-3); }
.o-loai.thue.chon { border-color: var(--xanh); background: var(--xanh-nhat); color: var(--xanh); box-shadow: 0 3px 12px -4px rgba(14,124,107,.4); }
.o-loai.ban.chon  { border-color: var(--do);   background: var(--do-nhat);   color: var(--do-dam); box-shadow: var(--bong-do); }
.o-loai.sua.chon  { border-color: var(--vang); background: var(--vang-nhat); color: var(--vang); box-shadow: 0 3px 12px -4px rgba(156,90,0,.4); }

.kq {
  border-radius: 12px; padding: 12px 14px; margin: -6px 0 15px;
  font-size: .9rem; border: 1.5px solid; box-shadow: var(--bong-1);
}
.kq.cu  { background: var(--xanh-nhat); border-color: var(--xanh-vien); color: var(--xanh); }
.kq.moi { background: var(--vang-nhat); border-color: var(--vang-vien); color: var(--vang); }
.kq b { font-size: 1rem; }
.kq-phu { font-size: .8rem; opacity: .88; margin-top: 3px; }
.kq-canh {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid currentColor;
  font-size: .82rem; font-weight: 700;
}

.o-tien {
  font-variant-numeric: tabular-nums; font-size: 1.24rem !important;
  font-weight: 800; letter-spacing: -.02em; text-align: right;
}
.o-tien.nho { font-size: .95rem !important; font-weight: 700; min-height: 42px; padding: 7px 10px; }

.hien-lai {
  display: flex; align-items: baseline; gap: 9px;
  background: var(--vang-nhat); color: var(--vang);
  border: 1px solid var(--vang-vien);
  border-radius: 12px; padding: 12px 15px; font-size: .87rem; font-weight: 600;
}
.hien-lai b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; letter-spacing: -.02em; }
.hien-lai i { font-style: normal; font-size: .79rem; opacity: .85; }
.hien-lai.am { background: var(--do-nhat); color: var(--do-dam); border-color: var(--do-vien); }

.nut-nhom { display: flex; gap: 8px; }
.nut-chon { flex: 1; position: relative; }
.nut-chon input { position: absolute; opacity: 0; pointer-events: none; }
.nut-chon span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 6px 8px; border-radius: 11px;
  background: var(--the); border: 1.5px solid var(--vien-dam);
  font-size: .85rem; font-weight: 600; color: var(--muc-2);
  cursor: pointer; text-align: center; transition: all .15s;
}
.nut-chon input:checked + span {
  background: var(--grad-do); border-color: transparent; color: #fff;
  font-weight: 700; box-shadow: var(--bong-do);
}

.o-chon {
  display: flex; align-items: center; gap: 11px;
  margin-top: 13px; font-size: .89rem; cursor: pointer; min-height: 42px;
}
.o-chon input { width: 21px; height: 21px; accent-color: var(--do); }

.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.chi-tiet-tien { margin-top: 15px; border-top: 1px solid var(--vien); padding-top: 13px; }
.chi-tiet-tien summary {
  cursor: pointer; font-size: .87rem; font-weight: 700; color: var(--muc-2);
  list-style: none; min-height: 38px; display: flex; align-items: center;
}
.chi-tiet-tien summary::-webkit-details-marker { display: none; }
.chi-tiet-tien summary::before { content: "\25B8"; margin-right: 7px; color: var(--do); }
.chi-tiet-tien[open] summary::before { content: "\25BE"; }
.bang-tien { width: 100%; border-collapse: collapse; margin-top: 9px; }
.bang-tien th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muc-3); padding: 5px 4px; background: none; border: none; text-align: right;
}
.bang-tien th:first-child { text-align: left; }
.bang-tien td { padding: 4px; border: none; font-size: .85rem; }
.bang-tien td:first-child { color: var(--muc-2); white-space: nowrap; font-weight: 600; }

.goi-y-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; align-items: center; }
.g-nhan { font-size: .76rem; color: var(--muc-3); font-weight: 600; }
.g-y {
  background: var(--the-2); border: 1px solid var(--vien);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .76rem;
  color: var(--muc-2); cursor: pointer; max-width: 100%; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .15s;
}
.g-y:hover { border-color: var(--do); color: var(--do-dam); background: var(--do-nhat); }

.bat-buoc {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: var(--grad-do); color: #fff;
  padding: 3px 8px; border-radius: 6px; margin-left: 6px;
}

.thanh-luu {
  position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 9px; padding: 12px 0 16px;
  background: linear-gradient(to top, var(--nen) 60%, transparent);
  z-index: 20;
}
.thanh-luu .nut { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}