/* ==========================================================================
   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; }
}

/* ==========================================================================
   Đường ống cơ hội
   ========================================================================== */

.canh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 9px; }
.canh-o {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 8px; border-radius: 12px; text-decoration: none;
  border: 1.5px solid; text-align: center; transition: transform .12s;
}
.canh-o:active { transform: scale(.97); }
.canh-o b { font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.canh-o span { font-size: .72rem; font-weight: 600; line-height: 1.25; }
.canh-o.do   { background: var(--do-nhat);   border-color: var(--do-vien);   color: var(--do-dam); }
.canh-o.vang { background: var(--vang-nhat); border-color: var(--vang-vien); color: var(--vang); }

.nhac-sla {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 10px;
  background: var(--do-nhat); border: 1px solid var(--do-vien);
  color: var(--do-dam); font-size: .82rem; line-height: 1.5;
}

/* ---------- Phễu ---------- */
.pheu { display: flex; flex-direction: column; gap: 5px; }
.pheu-hang {
  display: grid; grid-template-columns: 1fr 78px 30px; gap: 9px; align-items: center;
  padding: 7px 9px; border-radius: 9px; text-decoration: none; color: var(--muc-2);
  font-size: .84rem; transition: background .14s;
}
.pheu-hang:hover { background: var(--the-2); }
.pheu-hang.on { background: var(--do-nhat); color: var(--do-dam); font-weight: 700; }
.pheu-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pheu-thanh { height: 8px; background: var(--the-2); border-radius: 999px; overflow: hidden; }
.pheu-thanh i { display: block; height: 100%; background: var(--grad-do); border-radius: 999px; }
.pheu-so { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.pheu-cuoi { display: flex; gap: 9px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--vien); }
.ket {
  flex: 1; text-align: center; padding: 9px; border-radius: 10px;
  text-decoration: none; font-size: .82rem; font-weight: 600; border: 1.5px solid;
}
.ket b { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ket.xanh { background: var(--xanh-nhat); border-color: var(--xanh-vien); color: var(--xanh); }
.ket.do   { background: var(--do-nhat);   border-color: var(--do-vien);   color: var(--do-dam); }
.ket.on   { box-shadow: 0 0 0 3px var(--vien-dam); }

/* ---------- Dòng cơ hội ---------- */
.ds li.canh-nhe {
  border-left: 4px solid var(--vang);
  background: linear-gradient(90deg, var(--vang-nhat) 0%, var(--the) 30%);
}
.ly-do.nhe { background: var(--vang-nhat); color: var(--vang); border-color: var(--vang-vien); }
.buoc-ke {
  margin-top: 8px; padding: 7px 11px; border-radius: 9px;
  background: var(--the-2); color: var(--muc-2); font-size: .79rem;
}

.khach-cu {
  display: block; margin-top: 12px; padding: 10px 13px; border-radius: 11px;
  background: var(--xanh-nhat); border: 1px solid var(--xanh-vien);
  color: var(--xanh); font-size: .84rem; font-weight: 600; text-decoration: none;
}

/* ---------- Dãy bước ---------- */
.buoc-day { display: flex; flex-direction: column; gap: 0; }
.buoc { display: flex; align-items: center; gap: 11px; padding: 5px 0; position: relative; }
.buoc i {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 13px;
  background: var(--the); border: 2px solid var(--vien-dam); position: relative; z-index: 1;
}
.buoc:not(:last-child)::before {
  content: ""; position: absolute; left: 5.5px; top: 20px; bottom: -6px;
  width: 2px; background: var(--vien-dam);
}
.buoc span { font-size: .86rem; color: var(--muc-3); }
.buoc.qua i { background: var(--xanh); border-color: var(--xanh); }
.buoc.qua:not(:last-child)::before { background: var(--xanh); }
.buoc.qua span { color: var(--muc-2); }
.buoc.nay i { background: var(--do); border-color: var(--do); box-shadow: 0 0 0 4px var(--do-nhat); }
.buoc.nay span { color: var(--do-dam); font-weight: 700; }

.ket-qua {
  margin-top: 12px; padding: 11px 13px; border-radius: 11px;
  font-weight: 600; font-size: .9rem; border: 1px solid;
}
.ket-qua.xanh { background: var(--xanh-nhat); border-color: var(--xanh-vien); color: var(--xanh); }
.ket-qua.do   { background: var(--do-nhat);   border-color: var(--do-vien);   color: var(--do-dam); }

/* ---------- Khối kết thúc cơ hội ---------- */
.ket-thuc { border-radius: 12px; border: 1.5px solid; margin-bottom: 10px; overflow: hidden; }
.ket-thuc > summary {
  cursor: pointer; list-style: none; padding: 13px 15px;
  font-weight: 700; font-size: .92rem; min-height: 48px; display: flex; align-items: center;
}
.ket-thuc > summary::-webkit-details-marker { display: none; }
.ket-thuc[open] > summary { border-bottom: 1px solid; border-color: inherit; }
.ket-thuc > form { padding: 14px 15px; }
.ket-thuc.xanh { border-color: var(--xanh-vien); }
.ket-thuc.xanh > summary { background: var(--xanh-nhat); color: var(--xanh); }
.ket-thuc.do { border-color: var(--do-vien); }
.ket-thuc.do > summary { background: var(--do-nhat); color: var(--do-dam); }

/* ---------- Nhật ký ---------- */
.dong-tg { display: flex; flex-direction: column; gap: 11px; }
.tg-dong { display: flex; gap: 11px; align-items: flex-start; }
.tg-ico {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--the-2); display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
.tg-noi { font-size: .87rem; line-height: 1.45; }

/* ---------- Soạn báo giá ---------- */
.bg-dong {
  position: relative; padding: 13px; margin-bottom: 10px;
  border: 1.5px solid var(--vien-dam); border-radius: 12px; background: var(--the);
}
.bg-xoa {
  position: absolute; top: 7px; right: 7px; width: 30px; height: 30px;
  border: none; background: var(--the-2); color: var(--muc-3);
  border-radius: 8px; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.bg-xoa:hover { background: var(--do-nhat); color: var(--do-dam); }
.bg-dong .bg-ten { padding-right: 40px; }
.bg-luoi { display: grid; grid-template-columns: 58px 58px 1fr 1fr; gap: 7px; }
.bg-luoi label { display: flex; flex-direction: column; gap: 3px; font-size: .7rem; color: var(--muc-3); font-weight: 600; }
.bg-luoi input {
  width: 100%; min-height: 42px; padding: 7px 9px; font-size: 15px;
  background: var(--the); color: var(--muc);
  border: 1.5px solid var(--vien-dam); border-radius: 9px; font-family: inherit;
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
}
.bg-luoi input:focus { border-color: var(--do); outline: none; box-shadow: 0 0 0 3px var(--do-nhat); }
.bg-thanh { margin-top: 9px; text-align: right; font-size: .82rem; color: var(--muc-3); }
.bg-thanh b { color: var(--muc); font-weight: 800; font-variant-numeric: tabular-nums; }

.tong-bg { display: flex; flex-direction: column; gap: 2px; }
.tb-dong {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--vien); font-size: .89rem;
}
.tb-dong:last-child { border-bottom: none; }
.tb-dong b { font-variant-numeric: tabular-nums; font-weight: 700; }
.tb-dong.tong {
  border-top: 2px solid var(--muc); border-bottom: none;
  margin-top: 5px; padding-top: 11px; font-weight: 800;
}
.tb-dong.tong b { font-size: 1.28rem; color: var(--do-dam); letter-spacing: -.02em; }
.tb-dong.lai { color: var(--vang); font-weight: 600; }
.tb-dong.lai.am { color: var(--do-dam); }

.nut-hang { display: flex; gap: 9px; flex-wrap: wrap; }
.nut-hang form { flex: 1; min-width: 140px; }
.nut-hang .nut { width: 100%; }

/* ==========================================================================
   Màn hình Hôm nay
   ========================================================================== */

.chao { margin-bottom: 15px; }
.chao-ten { font-size: 1.36rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.chao-ngay { font-size: .84rem; color: var(--muc-3); margin-top: 1px; }

/* Mũi tên tăng/giảm — có CẢ ký hiệu lẫn màu, để đọc được khi mù màu */
.mui {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mui.len   { background: var(--xanh-nhat); color: var(--xanh); }
.mui.xuong { background: var(--do-nhat);   color: var(--do-dam); }
.mui.bang  { background: var(--the-2);     color: var(--muc-3); }

/* ---------- Cơ cấu theo loại ---------- */
.cc-dong { margin-bottom: 13px; }
.cc-dong:last-child { margin-bottom: 0; }
.cc-dau { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: .84rem; }
.cc-dau b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; }
.cc-thanh { height: 10px; background: var(--the-2); border-radius: 999px; overflow: hidden; }
.cc-thanh i { display: block; height: 100%; border-radius: 999px; }
.cc-thanh i.thue { background: var(--xanh); }
.cc-thanh i.ban  { background: var(--grad-do); }
.cc-thanh i.sua  { background: var(--vang); }
.cc-thanh i.khac { background: var(--vien-dam); }

/* ---------- Lối tắt ---------- */
.loi-tat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 9px; margin: 4px 0 8px;
}
.lt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 15px 8px; border-radius: 13px;
  background: var(--the); border: 1px solid var(--vien);
  box-shadow: var(--bong-1); text-decoration: none;
  color: var(--muc-2); font-size: .76rem; font-weight: 700; text-align: center;
  transition: transform .12s, border-color .14s, box-shadow .14s;
}
.lt span { font-size: 1.32rem; line-height: 1; color: var(--do); }
.lt:hover { border-color: var(--do-vien); box-shadow: var(--bong-2); }
.lt:active { transform: scale(.97); }

/* Bảng so sánh trên màn hình Hôm nay: cột phụ nhạt hơn để mắt bám cột chính */
.the table td.phu { color: var(--muc-3); font-weight: 500; }