/* doko bản 1. Dựng theo file Figma "doko 2" (màn nhập 7:180 và 7:230, Tổng quan 9:180,
   lịch ngày Chi tiết 18:231 và Gọn 18:296, thẻ điểm 4:602). Số đo lấy từ Figma, khung 390px. */

/* Font tự host, xem PROJECT.md mục Nguồn font. */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('fonts/google-sans-flex-vietnamese.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('fonts/google-sans-flex-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Token. Tên biến theo tên biến trong Figma (nen/trang -> --nen-trang). Đổi màu chỉ cần sửa khối này.
   Chỉ có light mode: dark mode chưa thiết kế (tracker việc 14). */
:root {
  /* Trục font: giá trị tạm, chờ chốt (tracker việc 16). Weight lấy theo Figma. */
  --font-display-opsz: 96;
  --font-display-rond: 30;
  --font-display-wght: 800;
  --font-body-opsz: 14;
  --font-body-rond: 0;
  --font-body-wght: 400;
  --font-grad: 25;

  --nen-trang: #f6f4fb;
  --nen-the: #ffffff;
  --chu-chinh: #1d1a2b;
  --chu-phu: #5e5a72;
  --chu-mo: #908ca3;
  --vien: #e6e2f0;
  --nhan-nen: #2b2546;
  --nhan-chu: #ffffff;
  --nhan-manh: #7c1e48;          /* chữ nhấn trong câu chào, Figma dùng loai/an_toi/chu */
  --dau-trang-1: #ffe7b8;        /* dải màu đầu trang */
  --dau-trang-2: #fbd6e4;
  --mo-trang: rgba(255, 255, 255, 0.7);

  --loai-an_sang-nen: #ffedb3;   --loai-an_sang-chu: #6e5200;
  --loai-an_trua-nen: #ffdcc7;   --loai-an_trua-chu: #7a3510;
  --loai-an_toi-nen: #fbd3e3;    --loai-an_toi-chu: #7c1e48;
  --loai-an_vat-nen: #cff2de;    --loai-an_vat-chu: #14593a;
  --loai-cafe-nen: #efe1d1;      --loai-cafe-chu: #5c3f22;
  --loai-tham_quan-nen: #d5e6ff; --loai-tham_quan-chu: #163f7a;
  --loai-nghi-nen: #e6deff;      --loai-nghi-chu: #40308c;
  --loai-di_chuyen-nen: #e5e4ec; --loai-di_chuyen-chu: #3a3850;

  --bong-the: 0 1px 3px rgba(43, 37, 70, 0.04), 0 6px 18px rgba(43, 37, 70, 0.06);   /* doko/bong-the */
  --bong-noi: 0 1px 3px rgba(43, 38, 69, 0.06), 0 10px 28px rgba(43, 38, 69, 0.16);  /* thẻ Tiếp theo */

  --le: 16px;        /* lề thẻ */
  --le-chu: 20px;    /* lề chữ đầu trang */
  color-scheme: light;
}

/* Màu theo loại điểm: phần tử có data-loai nhận hai biến --l-nen, --l-chu. */
[data-loai="an_sang"] { --l-nen: var(--loai-an_sang-nen); --l-chu: var(--loai-an_sang-chu); }
[data-loai="an_trua"] { --l-nen: var(--loai-an_trua-nen); --l-chu: var(--loai-an_trua-chu); }
[data-loai="an_toi"] { --l-nen: var(--loai-an_toi-nen); --l-chu: var(--loai-an_toi-chu); }
[data-loai="an_vat"] { --l-nen: var(--loai-an_vat-nen); --l-chu: var(--loai-an_vat-chu); }
[data-loai="cafe"] { --l-nen: var(--loai-cafe-nen); --l-chu: var(--loai-cafe-chu); }
[data-loai="tham_quan"] { --l-nen: var(--loai-tham_quan-nen); --l-chu: var(--loai-tham_quan-chu); }
[data-loai="nghi"] { --l-nen: var(--loai-nghi-nen); --l-chu: var(--loai-nghi-chu); }
[data-loai="di_chuyen"] { --l-nen: var(--loai-di_chuyen-nen); --l-chu: var(--loai-di_chuyen-chu); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen-trang);
  color: var(--chu-chinh);
  font-family: 'Google Sans Flex', sans-serif;
  font-weight: var(--font-body-wght);
  font-variation-settings: 'opsz' var(--font-body-opsz), 'ROND' var(--font-body-rond), 'GRAD' var(--font-grad);
  font-size: 14px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; font-variation-settings: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--nhan-nen); outline-offset: 2px; }
.ph { flex: none; display: block; }

.display {
  font-weight: var(--font-display-wght);
  font-variation-settings: 'opsz' var(--font-display-opsz), 'ROND' var(--font-display-rond), 'GRAD' var(--font-grad);
}

/* Khung màn: một cột rộng tối đa bằng điện thoại lớn, canh giữa trên màn rộng. */
.man { max-width: 430px; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; }

.the { background: var(--nen-the); border-radius: 24px; box-shadow: var(--bong-the); }

/* Đầu trang có dải màu */
.dau-trang {
  display: flex; flex-direction: column; gap: 18px;
  padding: calc(24px + env(safe-area-inset-top)) var(--le-chu) 20px;
  background: linear-gradient(to bottom, var(--dau-trang-1), var(--dau-trang-2) 55%, var(--nen-trang));
}
.dau-phang { padding: calc(24px + env(safe-area-inset-top)) var(--le-chu) 0; }

/* Thanh trên: thương hiệu, chế độ xem, nút sửa */
.thanh-tren { display: flex; align-items: center; gap: 8px; }
.thuong-hieu { flex: 1; min-width: 0; display: flex; flex-direction: column; white-space: nowrap; border-radius: 8px; }
.thuong-hieu b { font-size: 22px; line-height: 1.1; letter-spacing: -0.03em; }
.thuong-hieu span { font-size: 13px; font-weight: 500; color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.nut-tron {
  flex: none; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  background: var(--nen-the); box-shadow: var(--bong-the);
}
.che-do { flex: none; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--nen-the); }
.che-do button { padding: 9px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--chu-phu); white-space: nowrap; }
.che-do button[aria-pressed="true"] { background: var(--nhan-nen); color: var(--nhan-chu); font-weight: 700; }

/* Nút chính */
.btn-chinh {
  width: 100%; padding: 17px 16px; border-radius: 999px; text-align: center;
  background: var(--nhan-nen); color: var(--nhan-chu); font-size: 16px; font-weight: 700; line-height: 1.2;
}
.btn-chinh[aria-disabled="true"] { opacity: 0.35; }

/* Viên thuốc: nút nhỏ trên thẻ */
.vien-thuoc {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--nen-trang); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.vien-thuoc.trang { background: var(--nen-the); padding: 7px 12px; white-space: normal; }
.vien-thuoc small { font-size: 12px; font-weight: 500; color: var(--chu-mo); }
.da-di[aria-pressed="true"] { background: var(--nhan-nen); color: var(--nhan-chu); }

/* Nhãn chữ hoa nhỏ */
.nhan {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.nhan.loai { background: var(--l-nen); color: var(--l-chu); }
.nhan.dam { background: var(--nhan-nen); color: var(--nhan-chu); }
.nhan.dut { border: 1px dashed var(--vien); color: var(--chu-phu); }
.nhan-nho { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--chu-mo); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.chip.dam { background: var(--nhan-nen); color: var(--nhan-chu); }
.chip.vien { border: 1.5px solid var(--vien); color: var(--chu-phu); padding: 2.5px 8.5px; }
.chip.loai { background: var(--l-nen); color: var(--l-chu); }

.link { font-weight: 700; text-decoration: underline; text-underline-position: from-font; }
.link.nhat { text-decoration: none; color: var(--chu-phu); }

/* ---------- Màn nhập ---------- */
.hero { gap: 8px; padding: calc(40px + env(safe-area-inset-top)) 24px 28px; background: linear-gradient(to bottom, var(--dau-trang-1), var(--dau-trang-2) 60%, var(--nen-trang)); }
.hero h1 { font-size: 64px; line-height: 0.95; letter-spacing: -0.05em; }
.hero p { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--chu-phu); }

.cac-buoc { display: flex; flex-direction: column; gap: 14px; padding: 16px var(--le) 0; flex: 1; }
.buoc { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.buoc h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; line-height: 1.2; }
.so-buoc { padding: 2px 9px; border-radius: 999px; background: var(--nhan-nen); color: var(--nhan-chu); font-size: 13px; line-height: 1.35; }

.chon-ngay { display: flex; gap: 10px; }
.o-ngay {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 16px; background: var(--nen-trang); line-height: 1.2; cursor: pointer;
}
.o-ngay span { font-size: 12px; font-weight: 500; color: var(--chu-mo); }
.o-ngay b { font-size: 16px; font-weight: 700; }
.o-ngay b.trong { color: var(--chu-mo); }
/* Ô chọn ngày thật nằm phủ lên, trong suốt: giữ lịch gốc của máy mà chữ vẫn theo thiết kế. */
.o-ngay input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.o-ngay:focus-within { outline: 3px solid var(--nhan-nen); outline-offset: 2px; }

.tuy-chinh summary { font-size: 13px; line-height: 1.35; color: var(--chu-phu); cursor: pointer; border-radius: 6px; }
.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.o-nho { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 14px; background: var(--nen-trang); min-width: 0; }
.o-nho span { font-size: 11px; font-weight: 500; color: var(--chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-nho input { width: 100%; border: 0; background: none; padding: 0; font-size: 15px; font-weight: 700; }

.cach-nhap { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--nen-trang); }
.cach-nhap button {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 0; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--chu-phu); white-space: nowrap;
}
.cach-nhap button[aria-pressed="true"] { background: var(--nen-the); color: var(--chu-chinh); font-weight: 700; box-shadow: 0 1px 4px rgba(43, 38, 69, 0.08); }
.cach-nhap button:disabled { cursor: default; }
.cach-nhap small { font-size: 10px; font-weight: 500; color: var(--chu-mo); }

.vung-dan { display: flex; flex-direction: column; gap: 12px; }
.o-dan {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 26px 18px; border-radius: 18px; background: var(--nen-trang); border: 2px dashed var(--vien); cursor: text;
}
.o-dan b { font-size: 16px; font-weight: 700; line-height: 1.35; }
.o-dan span { font-size: 13px; line-height: 1.35; color: var(--chu-phu); }
.o-dan textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; border-radius: 16px;
  background: transparent; padding: 14px; font-size: 12px; line-height: 1.4; outline: none;
}
.o-dan:focus-within { border-color: var(--nhan-nen); }
/* Đang gõ tay thì ẩn lời nhắc để chữ không đè lên nhau. */
.o-dan:has(textarea:not(:placeholder-shown)) > :not(textarea) { visibility: hidden; }
.cot-can-co { display: flex; flex-direction: column; gap: 8px; }
.link-mau { font-size: 13px; line-height: 1.35; color: var(--chu-phu); }
.link-mau .link { color: var(--chu-chinh); margin-left: 2px; }

.ket-qua { display: flex; align-items: center; gap: 12px; }
.ket-qua .so { font-size: 44px; line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ket-qua div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ket-qua b { font-size: 15px; font-weight: 700; line-height: 1.2; }
.ket-qua div span { font-size: 13px; line-height: 1.25; color: var(--chu-phu); }
.can-sua { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--nen-trang); line-height: 1.35; }
.can-sua b { font-size: 14px; font-weight: 700; }
.can-sua p { font-size: 13px; color: var(--chu-phu); overflow-wrap: anywhere; }
.hanh-dong-chu { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }

.nut-chinh { padding: 6px 0 calc(40px + env(safe-area-inset-bottom)); }

/* ---------- Tổng quan chuyến ---------- */
.man-tong-quan { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.cau-chao { padding: 22px 24px 0; font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; }
.cau-chao em { font-style: normal; color: var(--nhan-manh); }

.trang-thai { display: flex; gap: 10px; padding: 22px var(--le-chu) 0; }
.o-so { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 4px 14px; }
.o-so .vong { padding: 10px; border-radius: 999px; background: var(--l-nen); color: var(--l-chu); }
.o-so b { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.o-so > span:last-child { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--chu-phu); text-align: center; }

.tieu-de-muc { padding: 28px 24px 12px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.day-the-ngay { display: flex; gap: 12px; padding: 0 var(--le-chu) 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: var(--le-chu); }
.day-the-ngay::-webkit-scrollbar { display: none; }
.the-ngay {
  flex: none; width: 176px; height: 190px; display: flex; flex-direction: column; gap: 6px; padding: 18px;
  border-radius: 28px; background: var(--l-nen); color: var(--l-chu); scroll-snap-align: start;
}
.the-ngay .ngay { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.the-ngay .ngay b { font-size: 40px; line-height: 0.95; letter-spacing: -0.04em; }
.the-ngay .ngay span { font-size: 15px; font-weight: 700; line-height: 1.1; }
.the-ngay .gian { flex: 1; }
.tien-do-chu { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.the-ngay .thanh { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.65); overflow: hidden; }
.the-ngay .thanh i { display: block; height: 100%; border-radius: 3px; background: var(--l-chu); }

.ds-dong { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--le-chu); }
.ds-dong.le { padding: 8px var(--le) 0; }
.dong-hoi { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; border-radius: 20px; background: var(--nen-the); }
.mau-loai { flex: none; width: 10px; height: 36px; border-radius: 5px; background: var(--l-nen); }
.dong-hoi .chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.dong-hoi .chu b { font-size: 15px; font-weight: 600; }
.dong-hoi .chu span { font-size: 13px; color: var(--chu-phu); }
.dong-hoi .ph { color: var(--chu-phu); }

/* ---------- Lịch ngày ---------- */
.man-lich .ngay { display: flex; align-items: flex-end; gap: 14px; white-space: nowrap; }
.so-ngay { font-size: 96px; line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.thong-tin { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.thong-tin span { font-size: 15px; font-weight: 500; color: var(--chu-phu); }
.thong-tin b { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

.tien-do { display: flex; flex-direction: column; gap: 6px; }
.tien-do > span:first-child { font-size: 13px; font-weight: 600; }
.tien-do .thanh { height: 6px; border-radius: 3px; background: var(--mo-trang); overflow: hidden; }
.tien-do .thanh i { display: block; height: 100%; border-radius: 3px; background: var(--nhan-nen); transition: width 0.2s; }

/* Hàng tab cuộn ngang, tràn ra sát mép màn khi không đủ chỗ. */
.tab-ngay { display: flex; gap: 8px; margin: 0 calc(-1 * var(--le-chu)); padding: 0 var(--le-chu); overflow-x: auto; scrollbar-width: none; }
.tab-ngay::-webkit-scrollbar { display: none; }
.tab-ngay button {
  flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 18px; border-radius: 16px;
  background: var(--mo-trang); line-height: 1.2; white-space: nowrap;
}
.tab-ngay b { font-size: 15px; font-weight: 700; }
.tab-ngay span { font-size: 11px; font-weight: 500; color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.tab-ngay button[aria-selected="true"] { background: var(--nhan-nen); color: var(--nhan-chu); }
.tab-ngay button[aria-selected="true"] span { color: inherit; }

.man-lich main { flex: 1; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.trong-tron { padding: 24px var(--le-chu); color: var(--chu-phu); }

/* Chế độ Chi tiết */
.danh-sach { display: flex; flex-direction: column; gap: 12px; padding: 8px var(--le) 0; }
.the-diem { display: flex; align-items: flex-start; gap: 14px; padding: 14px; scroll-margin: 120px; }
.the-diem.tiep-theo { box-shadow: var(--bong-noi); }
.the-diem.da-xong { opacity: 0.55; }
.the-diem.da-xong h3 { text-decoration: line-through; }
.the-diem .gio {
  flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0;
  border-radius: 16px; background: var(--l-nen); color: var(--l-chu); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.the-diem .gio b { font-size: 19px; font-weight: 700; }
.the-diem .gio span { font-size: 12px; font-weight: 500; }
.noi-dung { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hang-nhan { display: flex; flex-wrap: wrap; gap: 6px; }
.the-diem h3 { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.the-diem .phu { font-size: 13px; color: var(--chu-phu); overflow-wrap: anywhere; }
.the-diem .ghi-chu { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.hanh-dong { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.du-phong {
  align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px;
  padding: 10px 12px; border-radius: 16px; border: 1.25px dashed var(--vien); font-size: 13px;
}
.du-phong b { font-size: 14px; font-weight: 600; }
.du-phong > span:not(.nhan-nho) { color: var(--chu-phu); }
.du-phong .vien-thuoc { margin-top: 6px; }

.khoang-trong { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 24px; border: 1.25px dashed var(--vien); }
.khoang-trong .tieu-de { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.khoang-trong .tieu-de b { font-size: 15px; font-weight: 700; }
.khoang-trong .tieu-de span { font-size: 13px; font-weight: 500; color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.khoang-trong p { font-size: 13px; color: var(--chu-phu); }
.goi-y { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chế độ Gọn */
.dong-thoi-gian { display: flex; flex-direction: column; gap: 12px; padding: 12px var(--le-chu) 0; }
.dong { position: relative; display: flex; align-items: center; gap: 14px; }
.dong.trong { align-items: flex-start; }
/* Đường nối chạy suốt cột chấm, từ giữa dòng đầu tới giữa dòng cuối. */
.dong::before { content: ''; position: absolute; left: 9px; top: 0; bottom: -12px; width: 2px; background: var(--vien); }
.dong:first-child::before { top: 50%; }
.dong:last-child::before { bottom: 50%; }
.dong:only-child::before { display: none; }
.cham, .cham-trong { position: relative; flex: none; width: 20px; height: 20px; }
.cham { display: grid; place-items: center; border-radius: 50%; z-index: 1; }
.cham::after { content: ''; position: absolute; inset: -12px; }   /* vùng bấm 44px */
.cham i { width: 11px; height: 11px; border-radius: 50%; background: var(--nen-trang); border: 2px solid var(--chu-mo); }
.dong.da-xong .cham i { background: var(--nhan-nen); border-color: var(--nhan-nen); }
.dong.tiep-theo .cham i { width: 18px; height: 18px; border: 5px solid var(--nhan-nen); background: var(--nen-the); }
.the-gon {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; border-radius: 22px;
  background: var(--l-nen);
}
.dong-dau { display: flex; align-items: baseline; gap: 8px; font-weight: 700; line-height: 1.25; }
.dong-dau b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dong-dau time { flex: none; font-size: 14px; color: var(--l-chu); font-variant-numeric: tabular-nums; }
.the-gon .phu { font-size: 13px; line-height: 1.35; color: var(--chu-phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong.da-xong .the-gon { opacity: 0.5; }
.dong.da-xong .dong-dau b { text-decoration: line-through; }
.dong.tiep-theo .the-gon { background: var(--nhan-nen); color: var(--nhan-chu); box-shadow: 0 10px 24px -6px rgba(43, 38, 69, 0.25); }
.dong.tiep-theo .dong-dau time { color: inherit; }
.dong.tiep-theo .the-gon .phu { color: inherit; opacity: 0.8; }
.the-trong { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; border-radius: 22px; border: 1.25px dashed var(--vien); line-height: 1.25; }
.the-trong b { font-size: 14px; font-weight: 600; }
.the-trong span { font-size: 13px; color: var(--chu-phu); }

/* Thanh chia sẻ dính đáy */
.thanh-chia-se {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 430px; z-index: 5;
  padding: 12px var(--le) calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(246, 244, 251, 0), var(--nen-trang) 35%);
}

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
  max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; text-align: center;
  background: var(--nhan-nen); color: var(--nhan-chu); font-size: 14px; font-weight: 600; box-shadow: var(--bong-noi);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .thanh-chia-se, .hanh-dong, .che-do, .nut-tron, .tab-ngay { display: none !important; }
  .the, .the-ngay { box-shadow: none; }
}