/* Lịch phát sóng MyTV Thể thao.
   Thiết kế: tối giản, nền tối mặc định (đỡ chói), ưu tiên dùng một tay trên điện thoại.
   - Điện thoại (< 720px): một cột; điều hướng, tìm kiếm, nút thao tác đều nằm ở nửa dưới màn hình, vừa tầm ngón cái.
   - Máy tính bảng (720 - 1199px) và PC (>= 1200px): cột điều hướng bên trái, danh sách ở giữa, chi tiết bên phải.
   Màu chỉ khai báo ở hai khối biến dưới đây; không viết mã màu ở chỗ khác. */

:root {                      /* chế độ TỐI: mặc định */
  color-scheme: dark;
  --nen: #0e1116;            /* nền ứng dụng */
  --mat: #171b23;            /* mặt thẻ, thanh, hộp thoại */
  --mat-2: #202632;          /* ô nhập, mục đang chọn */
  --mat-3: #2b3342;          /* nổi hơn: thẻ con đang chọn, rê chuột */
  --vien: #2a313e;
  --chu: #e9ecf2;
  --chu-mo: #9ba5b7;
  --chu-nhat: #6c7688;
  --nhan: #6ea8ff;           /* màu nhấn: kênh phát, liên kết, mục đang chọn */
  --nhan-nen: rgba(110, 168, 255, .15);
  --nhan-dam: #3274e6;       /* nền nút chính */
  --chu-tren-nhan: #fff;
  --do: #ff6f6f;  --do-nen: rgba(255, 111, 111, .16);  --do-dam: #d83a3a;
  --cam: #ffb650; --cam-nen: rgba(255, 182, 80, .16);
  --luc: #4fd18c; --luc-nen: rgba(79, 209, 140, .15);  --luc-dam: #1f9d5c;
  --phu-mo: rgba(0, 0, 0, .6);
  --bong: 0 10px 40px rgba(0, 0, 0, .5);
  --bong-thanh: rgba(0, 0, 0, .45);      /* bóng mép trên thanh điều hướng dưới */
  --thuong-hieu: #e8711a;                /* cam MyTV (logo #f08021, sẫm hơn chút để dấu "+" trắng đủ tương phản 3:1) */
  --bong-nut: rgba(232, 113, 26, .45);   /* quầng sáng quanh nút "+" */
  --ban-kinh: 14px;
}
:root[data-giao-dien="sang"] {
  color-scheme: light;
  --nen: #f1f3f6;
  --mat: #ffffff;
  --mat-2: #eef1f6;
  --mat-3: #e2e8f2;
  --vien: #dde2ea;
  --chu: #151a22;
  --chu-mo: #5a6577;
  --chu-nhat: #8892a4;
  --nhan: #2457b8;
  --nhan-nen: #e5edfb;
  --nhan-dam: #2955a0;
  --do: #c12f2f;  --do-nen: #fde7e5;  --do-dam: #c12f2f;
  --cam: #8f5b00; --cam-nen: #fdf0d3;
  --luc: #1c7537; --luc-nen: #e0f3e4;  --luc-dam: #1c7537;
  --phu-mo: rgba(20, 26, 36, .45);
  --bong: 0 10px 40px rgba(20, 26, 36, .22);
  --bong-thanh: rgba(20, 26, 36, .12);
  --thuong-hieu: #e46a16;
  --bong-nut: rgba(228, 106, 22, .36);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
/* Nền gốc (html) mang màu thanh điều hướng: khi Chrome trên iPhone thu gọn thanh công cụ, phần đáy màn hình dưới vùng
   gắn cố định (cao khoảng 47 điểm) chỉ hiện nền gốc, nên thanh điều hướng trông liền tới mép màn hình. body giữ màu nền
   trang. Menu toàn màn hình đang mở thì nền gốc về màu nền trang cho khỏi lộ một vệt khác màu. */
html { background: var(--mat); }
html:has(#hop-menu[open]) { background: var(--nen); }
/* Mở từ màn hình chính: trang trải sát đáy, nền gốc chỉ lộ ở dải sau thanh trạng thái, nên dùng màu nền trang cho liền. */
@media (display-mode: standalone) { html { background: var(--nen); } }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.35; color: var(--chu); background: var(--nen);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
kbd { padding: 1px 6px; border: 1px solid var(--vien); border-radius: 5px; background: var(--mat-2); font: inherit; font-size: 12px; }
.chi-may-tinh, .chi-cam-ung { display: none; }
@media (hover: hover) and (pointer: fine) { .chi-may-tinh { display: block; } }
@media (pointer: coarse) { .chi-cam-ung { display: block; } }

/* ------------------------------------------------------------ khung: điện thoại là gốc */
/* Khung gắn cố định vào bốn mép vùng nhìn thấy, không dùng height: 100dvh: Chrome trên iPhone không cập nhật dvh khi
   thanh trình duyệt thu gọn, để hở một dải dưới thanh điều hướng. */
.khung { position: fixed; inset: 0; display: flex; flex-direction: column; }
.cot-danh-sach, .cot-chi-tiet { flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
.cot-danh-sach { display: flex; order: 1; }
.cot-chi-tiet { display: none; order: 1; }
.khung.xem-chi-tiet .cot-danh-sach, .khung.xem-chi-tiet .thanh-nav { display: none; }
.khung.xem-chi-tiet .cot-chi-tiet { display: flex; }
.vung-cuon { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--mat-3) transparent; }

/* Khoảng chừa dưới đáy để nút không đè vạch Home. Trang không dùng viewport-fit=cover (xem index.html) nên iPhone báo
   safe-area-inset-bottom bằng 0, kể cả khi mở từ màn hình chính, lúc trang trải sát đáy: không đọc được vạch Home nằm đâu.
   Vì vậy khi chạy từ màn hình chính (standalone) chừa một khoảng cố định, như ứng dụng 000_English/005_Youglish trên cùng
   điện thoại ("bar-safe", tối thiểu 1,25rem). Trong trình duyệt thì đáy là thanh công cụ của trình duyệt: không chừa.
   Không thêm (display-mode: fullscreen): Chrome trên iPhone thu gọn thanh công cụ có vẻ cũng khớp điều kiện đó.
   --an-toan-duoi: chừa dưới nội dung cuộn và thông báo nổi. --dem-day: đệm dưới các thanh đáy (điều hướng, nút ở chi tiết,
   chân hộp thoại); cộng 6px đệm sẵn của nút điều hướng thì chữ cách mép đáy khoảng 20 điểm. */
:root { --an-toan-duoi: 0px; --dem-day: 0px; }
@media (display-mode: standalone) {
  :root { --an-toan-duoi: max(20px, env(safe-area-inset-bottom, 0px)); --dem-day: max(14px, calc(env(safe-area-inset-bottom, 0px) - 20px)); }
}

/* Điều hướng chính: thanh dưới, chạm đáy, nút "+" nổi trong chỗ lõm ở giữa. Nền vẽ bằng .nen-nav (hai khối phẳng + khúc
   giữa SVG có chỗ lõm); viền và bóng theo đúng đường cong nhờ drop-shadow đặt trên cả thanh. */
.thanh-nav { position: relative; isolation: isolate; order: 2; flex: none; display: flex; background: none; padding-bottom: var(--dem-day);
  filter: drop-shadow(0 -1px 0 var(--vien)) drop-shadow(0 -6px 14px var(--bong-thanh)); }
.nen-nav { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; }
.nen-nav i { flex: 1; background: var(--mat); }
.nen-nav i:first-child { margin-right: -1px; border-top-left-radius: 22px; }   /* chồng 1px cho khỏi hở đường chỉ */
.nen-nav i:last-child { margin-left: -1px; border-top-right-radius: 22px; }
.thanh-lom .nen-nav svg { flex: none; width: 120px; height: 100%; fill: var(--mat); stroke: none; }   /* đè ".thanh-nav svg" (biểu tượng 24px) */
.o-them-giua { flex: 0 0 120px; display: flex; justify-content: center; }
.thanh-lom .nut-them-giua { flex: none; display: grid; place-items: center; width: 58px; height: 58px; min-height: 0; margin-top: -29px; padding: 0;
  border-radius: 50%; background: var(--thuong-hieu); color: var(--chu-tren-nhan); box-shadow: 0 6px 18px var(--bong-nut); }
.thanh-lom .nut-them-giua svg { width: 28px; height: 28px; stroke-width: 2.6; }
.thanh-lom .nut-them-giua:active { transform: scale(.94); }
.thanh-cong-cu .nut-them { display: none; }   /* điện thoại: thêm bằng nút "+" giữa thanh dưới */
.thanh-nav button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 56px; padding: 8px 0 6px; border: 0; background: none; color: var(--chu-nhat); font-size: 12px; font-weight: 600; }
.thanh-nav svg { width: 24px; height: 24px; }
.thanh-nav button.chon { color: var(--nhan); }
.thanh-nav button.chon svg { stroke-width: 2.4; }
.dem-can { position: absolute; top: 4px; left: calc(50% + 7px); min-width: 19px; padding: 0 5px; border-radius: 10px; background: var(--do-dam); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; }

/* Đầu cột danh sách: chỉ để đọc. Đồng hồ ẩn trên điện thoại cho gọn, chỉ hiện khi báo mất kết nối. */
.thanh-tren { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 6px; }
.logo-dau { flex: none; align-self: center; width: auto; height: 30px; margin-right: -3px; }
.thanh-tren h1 { flex: 1; min-width: 0; margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-ho { flex: none; color: var(--chu-mo); font-size: 13px; font-variant-numeric: tabular-nums; }
.dong-ho:not(.canh-bao) { display: none; }
.dong-ho.canh-bao { color: var(--do); }

/* Ba thẻ con: bấm hoặc vuốt ngang trên danh sách */
.the-trang-thai { flex: none; display: flex; gap: 4px; margin: 4px 12px 8px; padding: 4px; background: var(--mat); border-radius: 13px; }
.the-trang-thai button { flex: 1; min-height: 40px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; color: var(--chu-mo); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.the-trang-thai button.chon { background: var(--mat-3); color: var(--chu); }
.huy-hieu { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--cam-nen); color: var(--cam); font-size: 12px; font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; }

/* Thanh công cụ: tìm kiếm, lọc, thêm. Ngay dưới dải ngày, cuộn theo danh sách. */
.thanh-cong-cu { display: flex; gap: 8px; padding: 0 12px 8px; }
.o-tim { position: relative; z-index: 5; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 13px; background: var(--mat); border: 1px solid var(--vien); border-radius: 13px; }
.o-tim:focus-within { border-color: var(--nhan); }
.o-tim > svg { flex: none; width: 20px; height: 20px; color: var(--chu-nhat); }
.o-tim input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; }
.o-tim input::placeholder { color: var(--chu-nhat); }
#xoa-tim { flex: none; width: 30px; height: 30px; padding: 7px; border: 0; border-radius: 50%; background: var(--mat-3); color: var(--chu-mo); }
#xoa-tim svg { width: 100%; height: 100%; stroke-width: 2.6; }
.nut-vuong { position: relative; flex: none; width: 48px; height: 48px; padding: 12px; border: 1px solid var(--vien); border-radius: 13px; background: var(--mat); color: var(--chu-mo); }
.nut-vuong svg { width: 100%; height: 100%; }
.nut-vuong.nut-them { border-color: transparent; background: var(--nhan-dam); color: var(--chu-tren-nhan); }
.dem-loc { position: absolute; top: -5px; right: -5px; min-width: 19px; padding: 0 5px; border-radius: 10px; background: var(--cam); color: #201500; font-size: 11.5px; font-weight: 700; line-height: 19px; }

/* Kéo xuống để làm mới */
.keo-lam-moi { height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; color: var(--chu-mo); font-size: 13px; }
.keo-lam-moi.tha { color: var(--nhan); font-weight: 600; }

/* Dải ngày */
.dai-ngay { display: flex; gap: 6px; padding: 2px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.dai-ngay::-webkit-scrollbar { display: none; }
.dai-ngay.mo { opacity: .45; }
.dai-ngay button { flex: none; width: 50px; height: 58px; padding: 6px 0; border: 0; border-radius: 12px; background: var(--mat); color: var(--chu-mo); font-size: 12px; font-weight: 600; line-height: 1.5; }
.dai-ngay button b { display: block; color: var(--chu); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dai-ngay button.trong b { color: var(--chu-nhat); font-weight: 500; }
.dai-ngay button.chon { background: var(--nhan-dam); color: var(--chu-tren-nhan); }
.dai-ngay button.chon b { color: var(--chu-tren-nhan); }
.dai-ngay button.tat-ca { width: 62px; }
.dai-ngay button.tat-ca b { font-size: 15px; white-space: nowrap; }

.khoang-ngay { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);   /* minmax: không bao giờ rộng hơn màn hình */ gap: 6px; padding: 2px 12px 8px; }
.nut-khoang, .o-ngay { min-width: 0; height: 44px; padding: 0 8px; border: 1px solid var(--vien); border-radius: 11px; background: var(--mat); text-align: center; font-size: 14.5px; }
.nut-khoang { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 8px 0 12px; }
.nut-khoang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nut-khoang svg { flex: none; width: 18px; height: 18px; color: var(--chu-mo); }
.o-ngay { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.o-ngay input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.dong-dem { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px 4px; color: var(--chu-nhat); font-size: 12.5px; }
#nhan-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#so-ban-ghi { flex: none; margin-left: auto; }

/* ------------------------------------------------------------ danh sách: tiêu đề ngày và dòng sự kiện */
.danh-sach { padding: 0 12px 12px; }
.dau-ngay { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 -12px; padding: 12px 16px 6px; background: var(--nen); color: var(--chu-mo); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.dau-ngay small { color: var(--chu-nhat); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.the { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; margin-bottom: 8px; padding: 12px 12px 12px 14px; border-radius: var(--ban-kinh); background: var(--mat); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.the.chon { background: var(--mat-2); box-shadow: inset 0 0 0 1.5px var(--nhan); }
.the.live { box-shadow: inset 4px 0 0 var(--do-dam); }
.the.sap-live { box-shadow: inset 4px 0 0 var(--cam); }
.the.chon.live { box-shadow: inset 4px 0 0 var(--do-dam), inset 0 0 0 1.5px var(--nhan); }
.the.da-qua .gio b, .the.da-qua .ten { color: var(--chu-mo); }
.the .gio { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.the .gio b { font-size: 16.5px; font-weight: 700; }
.the .gio span { color: var(--chu-nhat); font-size: 12.5px; }
.the .gio .ngay { color: var(--chu-mo); font-weight: 600; }
.the .ten { font-size: 15.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.the .phu { margin-top: 3px; color: var(--chu-mo); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kenh { color: var(--nhan); font-weight: 650; }
.kenh.chua { color: var(--chu-nhat); font-weight: 500; }
.the .ben { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; max-width: 128px; }
.nhan-hang { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rong { margin: 36px 20px; text-align: center; color: var(--chu-mo); font-size: 15px; line-height: 1.5; }

/* Nhãn tình trạng */
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--mat-3); color: var(--chu-mo); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.chip.muc-1, .chip.luc { background: var(--luc-nen); color: var(--luc); }
.chip.muc-2, .chip.nhan { background: var(--nhan-nen); color: var(--nhan); }
.chip.muc-3, .chip.gap, .chip.cam { background: var(--cam-nen); color: var(--cam); }
.chip.muc-4, .chip.do { background: var(--do-nen); color: var(--do); }
.chip.muc-5, .chip.live { background: var(--do-dam); color: #fff; }
.chip.live::before { content: "● "; }
.nut-tra { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--luc-dam); color: #fff; font-size: 19px; font-weight: 700; line-height: 40px; }

/* Chuyển thẻ: danh sách trượt nhẹ theo hướng vuốt */
@media (prefers-reduced-motion: no-preference) {
  .danh-sach.vao-phai { animation: vao-phai .2s ease-out; }
  .danh-sach.vao-trai { animation: vao-trai .2s ease-out; }
  .hop[open] { animation: len .2s ease-out; }
  .keo-lam-moi, .danh-sach.ve-cho { transition: height .18s ease-out, transform .18s ease-out, opacity .18s; }
}
@keyframes vao-phai { from { transform: translateX(34px); opacity: 0; } }
@keyframes vao-trai { from { transform: translateX(-34px); opacity: 0; } }
@keyframes len { from { transform: translateY(26px); opacity: 0; } }

/* ------------------------------------------------------------ màn Điểm */
.bang-diem { width: 100%; margin: 8px 0 6px; border-collapse: separate; border-spacing: 0; border-radius: var(--ban-kinh); overflow: hidden; background: var(--mat); font-size: 14px; font-variant-numeric: tabular-nums; }
.bang-diem th { padding: 10px 5px; color: var(--chu-mo); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.bang-diem td { padding: 10px 5px; border-top: 1px solid var(--vien); }
.bang-diem th, .bang-diem td { text-align: center; }
.bang-diem th:first-child, .bang-diem td:first-child { text-align: left; padding-left: 14px; font-weight: 650; overflow-wrap: anywhere; }
.bang-diem td.tru { color: var(--do); font-weight: 700; }
.chu-thich { margin: 6px 4px 4px; color: var(--chu-nhat); font-size: 12.5px; line-height: 1.5; }

/* ------------------------------------------------------------ chi tiết */
#chi-tiet { padding: calc(12px + env(safe-area-inset-top)) 14px 16px; }
.dau-ct { padding: 4px 2px 12px; }
.ma-dong { color: var(--chu-nhat); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ten-ct { margin: 4px 0 6px; font-size: 21px; font-weight: 750; line-height: 1.25; letter-spacing: -.2px; overflow-wrap: anywhere; }
.tom-ct { color: var(--chu-mo); font-size: 14.5px; }
.the-chi-tiet { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; background: var(--mat); border-radius: 13px; }
.the-chi-tiet button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--chu-mo); font-size: 14.5px; font-weight: 600; }
.the-chi-tiet button.chon { background: var(--mat-3); color: var(--chu); }
.muc { margin-bottom: 10px; border-radius: var(--ban-kinh); background: var(--mat); overflow: hidden; }
.muc > h3 { margin: 0; padding: 12px 14px 2px; color: var(--nhan); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.muc > .than { padding: 4px 14px 10px; }
.hang { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 7px 0; font-size: 14.5px; }
.hang + .hang { border-top: 1px solid var(--vien); }
.hang > span:first-child { color: var(--chu-mo); }
.hang > span:last-child { overflow-wrap: anywhere; }
.hang .dam { font-weight: 700; }
.muc .ke { height: 0; }
.muc .doan { margin: 6px 0; color: var(--chu); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.muc .lien-ket { display: block; width: 100%; margin: 6px 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--mat-2); text-align: left; font-size: 14px; }
.muc .lien-ket b { color: var(--nhan); }
.muc.canh > h3 { color: var(--cam); }
.muc.canh ul { margin: 4px 0; padding-left: 20px; font-size: 14.5px; }
.muc.canh li { margin: 5px 0; }
.cho-chon { margin: 30vh 30px 0; text-align: center; color: var(--chu-nhat); line-height: 1.6; }

/* Thanh thao tác ở đáy màn chi tiết */
/* Thanh thao tác ở đáy màn chi tiết: cùng kiểu thanh điều hướng (chỗ lõm, nút "+" giữa), hai bên Sửa, Xoá, Chia sẻ, Khác */
.thanh-hanh-dong { position: relative; isolation: isolate; flex: none; display: flex; padding-bottom: var(--dem-day);
  filter: drop-shadow(0 -1px 0 var(--vien)) drop-shadow(0 -6px 14px var(--bong-thanh)); }
.thanh-hanh-dong > button { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 56px; padding: 8px 0 6px; border: 0; background: none; color: var(--chu-mo); font-size: 12px; font-weight: 600; }
.thanh-hanh-dong > button svg { width: 24px; height: 24px; }
.thanh-hanh-dong > button.nguy { color: var(--do); }
.thanh-hanh-dong #ct-khac svg { stroke-width: 3.2; }
.nut-quay-lai { position: sticky; top: 0; z-index: 3; display: inline-flex; align-items: center; margin: -4px 0 6px -8px; padding: 8px 10px;
  border: 0; border-radius: 10px; background: var(--nen); color: var(--nhan); font-size: 16px; font-weight: 650; }
.nut-trong-muc { display: block; width: 100%; margin: 10px 0 4px; }

/* ------------------------------------------------------------ nút, hộp thoại (tấm trượt từ đáy trên điện thoại) */
.nut-chinh, .nut-phu, .nut-nguy { min-height: 46px; padding: 0 18px; border: 0; border-radius: 12px; font-weight: 650; font-size: 15px; white-space: nowrap; }
.nut-chinh { background: var(--nhan-dam); color: var(--chu-tren-nhan); }
.nut-phu { background: var(--mat-2); color: var(--chu); }
.nut-nguy { background: var(--do-nen); color: var(--do); }
.nut-xanh { background: var(--luc-dam); color: #fff; }
.nut-chinh:disabled { opacity: .5; cursor: default; }

/* Hộp thoại: toàn màn hình trên điện thoại (như Menu), bảng giữa màn hình từ 720px */
.hop { margin: 0; padding: 0; border: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: none; border-radius: 0; background: var(--nen); color: var(--chu); box-shadow: var(--bong); }
.hop[open] { display: flex; flex-direction: column; animation: hop-hien .2s ease-out; }
@keyframes hop-hien { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .hop[open] { animation: none; } }
.hop::backdrop { background: var(--phu-mo); }
.tay-nam { display: none; }   /* hộp toàn màn hình: không còn tay nắm */
.hop h2 { flex: none; margin: 0; padding: 12px 18px 8px; font-size: 18px; font-weight: 750; overflow-wrap: anywhere; }
.dau-hop { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 4px 18px; }
.dau-hop h2 { flex: 1; min-width: 0; padding: 0; font-size: 22px; }
.hop h3 { margin: 16px 0 8px; color: var(--chu-mo); font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
/* flex-basis phải là auto, không phải 0 (flex: 1): .hop chỉ có max-height, và Safari (mọi trình duyệt trên iPhone)
   bóp phần thân về 0 khi khởi điểm là 0, nên Menu và các hộp thoại chỉ còn tiêu đề với nút Đóng. */
.hop .than-hop { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 12px; }
.hop .chan-hop { flex: none; display: flex; gap: 8px; padding: 10px 18px calc(12px + var(--dem-day)); border-top: 1px solid var(--vien); }
.hop .chan-hop button { flex: 1; }
.nho { margin: 8px 0; color: var(--chu-mo); font-size: 13.5px; line-height: 1.5; }
.nho.loi { color: var(--do); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cach-tren { margin-top: 10px; }

.muc-menu { display: block; width: 100%; min-height: 50px; margin: 6px 0; padding: 0 14px; border: 0; border-radius: 12px; background: var(--mat-2); text-align: left; font-size: 15px; }
.muc-menu.nguy { color: var(--do); }
.muc-menu.sap-co { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--chu-nhat); cursor: default; }
.chon-doan { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--mat-2); }
.chon-doan button { min-width: 74px; min-height: 38px; border: 0; border-radius: 9px; background: none; color: var(--chu-mo); font-weight: 600; }
.chon-doan button.chon { background: var(--nhan-dam); color: var(--chu-tren-nhan); }
/* Bảng chọn nhanh khoảng ngày: hai cột, "Hôm nay", "Hôm qua", "Tất cả" trải hết chiều ngang */
.luoi-khoang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.luoi-khoang button { min-height: 50px; border: 1px solid var(--vien); border-radius: 12px; background: var(--mat-2); color: var(--chu); font-size: 15.5px; font-weight: 650; }
.luoi-khoang button.ca-hang { grid-column: 1 / -1; }
.luoi-khoang button.chon { border-color: transparent; background: var(--nhan-dam); color: var(--chu-tren-nhan); }
#dia-chi-mang { color: var(--nhan); font-weight: 650; user-select: all; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Menu: toàn màn hình, các thẻ, nhóm dòng kiểu trang cài đặt */
#hop-menu { width: 100vw; max-width: 100vw; height: 100%; max-height: none; margin: 0; border-radius: 0; background: var(--nen); }
#hop-menu[open] { animation: menu-hien .2s ease-out; }
.hop:focus { outline: none; }   /* hộp nhận con trỏ khi mở (ung_dung.js): không vẽ viền */
@keyframes menu-hien { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { #hop-menu[open] { animation: none; } }
.dau-menu { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 12px 2px 18px; }
.dau-menu h2 { margin-right: auto; padding: 0; font-size: 24px; letter-spacing: -.2px; }
.logo-menu { flex: none; width: auto; height: 34px; }
.nut-dong { flex: none; width: 42px; height: 42px; padding: 11px; border: 0; border-radius: 50%; background: var(--mat-2); color: var(--chu-mo); }
.nut-dong svg { width: 100%; height: 100%; stroke-width: 2.4; }

.the-menu { flex: none; display: flex; gap: 2px; margin: 8px 12px 6px; padding: 4px; border-radius: 14px; background: var(--mat); overflow-x: auto; scrollbar-width: none; }
.the-menu::-webkit-scrollbar { display: none; }
.the-menu button { flex: 1 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 6px 6px; border: 0; border-radius: 10px; background: none; color: var(--chu-mo); font-size: 12px; font-weight: 650; white-space: nowrap; }
.the-menu svg { width: 22px; height: 22px; }
.the-menu button.chon { background: var(--mat-3); color: var(--chu); }
.the-menu button.chon svg { color: var(--nhan); }

#hop-menu .than-hop { padding: 2px 14px calc(24px + var(--an-toan-duoi)); touch-action: pan-y; }
#hop-menu .than-hop h3 { margin: 20px 4px 8px; }
.o-thong-tin { margin: 10px 0 0; padding: 13px 15px; border-radius: var(--ban-kinh); background: var(--mat); color: var(--chu-mo); font-size: 14px; line-height: 1.5; }
.nhom-cd { border-radius: var(--ban-kinh); background: var(--mat); overflow: hidden; }
.nhom-cd:not(:has(> :not([hidden]))) { display: none; }   /* mọi dòng đều ẩn (ví dụ chưa đăng nhập): bỏ luôn khung */
.dong-cd { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; background: none; color: var(--chu); text-align: left; font-size: 15.5px; }
.nhom-cd > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--vien); }
.dong-cd > .logo-dong { flex: none; width: 40px; height: auto; }
.logo-dang-nhap { display: block; width: auto; height: 46px; margin: 12px auto 0; }
.logo-nav { display: none; }
.dong-cd > svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--nhan-nen); color: var(--nhan); }
.chu-cd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chu-cd b { font-weight: 650; }
.chu-cd small { color: var(--chu-mo); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
button.dong-cd::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-top: 2px solid var(--chu-nhat); border-right: 2px solid var(--chu-nhat); transform: rotate(45deg); }
.dong-cd.nguy, .dong-cd.nguy .chu-cd b { color: var(--do); }
.dong-cd.nguy > svg { background: var(--do-nen); color: var(--do); }
.dong-cd.sap-co { cursor: default; }
.dong-cd.sap-co b { color: var(--chu-mo); }
.dong-cd.sap-co > svg { background: var(--mat-2); color: var(--chu-nhat); }
.nhan-sap-co { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--mat-3); color: var(--chu-mo); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dong-cd .chon-doan { flex: none; }
.dong-cd .chon-doan button { min-width: 58px; }
/* Thẻ Cảnh báo: các mốc xếp theo thời gian, nối nhau bằng một đường dọc qua tâm biểu tượng */
.dong-thoi-gian .moc { position: relative; }
.dong-thoi-gian .moc:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: calc(50% + 18px); bottom: calc(-50% + 18px); width: 2px; background: var(--vien); }
.dong-cd.moc.nguy > svg { background: var(--do-nen); color: var(--do); }
.o-gio { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 76px; }
.o-gio input, .o-gio b { width: 64px; height: 42px; border: 1px solid var(--vien); border-radius: 10px; background: var(--mat-2); color: var(--chu); text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.o-gio b { display: flex; align-items: center; justify-content: center; width: auto; min-width: 64px; padding: 0 6px; border-style: dashed; background: none; font-size: 14.5px; white-space: nowrap; }
.o-gio input:focus { outline: 0; border-color: var(--nhan); }
.o-gio input:disabled { opacity: 1; border-style: dashed; background: none; -webkit-text-fill-color: var(--chu); }
.o-gio > span { color: var(--chu-mo); font-size: 11px; text-align: center; line-height: 1.2; }
#bm-canh-bao .hang-nut { margin-top: 12px; }
#bm-canh-bao .hang-nut button { flex: 1; }
#hop-menu .chi-cam-ung, #hop-menu .chi-may-tinh { display: none; }
@media (pointer: coarse) { #hop-menu .chi-cam-ung { display: flex; } }
@media (hover: hover) and (pointer: fine) { #hop-menu .chi-may-tinh { display: flex; } }

.nhom-chon { display: flex; flex-wrap: wrap; gap: 7px; }
.nhom-chon label { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border-radius: 999px; background: var(--mat-2); color: var(--chu); font-size: 14px; cursor: pointer; }
.nhom-chon label:has(input:checked) { background: var(--nhan-dam); color: var(--chu-tren-nhan); }
.nhom-chon input { position: absolute; opacity: 0; pointer-events: none; }
.nhom-chon small { opacity: .65; font-variant-numeric: tabular-nums; }

/* Bảng đoán từ dưới ô nhập (ganGoiY trong ung_dung.js): ô tìm kiếm chính và các ô của biểu mẫu */
.goi-y { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(52vh, 430px); overflow-y: auto;
  padding: 6px; border: 1px solid var(--vien); border-radius: 14px; background: var(--mat); box-shadow: var(--bong); }
.goi-y-muc, .goi-y-xoa { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px 10px;
  border: 0; border-radius: 10px; background: none; text-align: left; font-size: 15px; font-weight: 400; line-height: 1.3; }
.goi-y-muc.chon { background: var(--mat-2); }
.goi-y-chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chu-mo); }
.goi-y-chu b { color: var(--chu); font-weight: 650; }
.goi-y-loai { flex: none; color: var(--chu-nhat); font-size: 12px; }
.goi-y-xoa { justify-content: center; min-height: 38px; color: var(--nhan); font-size: 13.5px; }
.bieu-mau label { position: relative; display: block; margin-top: 12px; color: var(--chu-mo); font-size: 13.5px; font-weight: 600; }
.bieu-mau .nhom-chon label { display: inline-flex; margin: 0; color: var(--chu); font-weight: 400; }
.bieu-mau input:not([type=checkbox]), .bieu-mau select, .bieu-mau textarea { display: block; width: 100%; min-height: 46px; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 11px; background: var(--mat-2); color: var(--chu); font-size: 16px; font-weight: 400; }
.bieu-mau input:focus, .bieu-mau select:focus, .bieu-mau textarea:focus { outline: 0; border-color: var(--nhan); }
.bieu-mau fieldset { margin: 14px 0 0; padding: 8px 10px 11px; border: 1px solid var(--vien); border-radius: 11px; }
.bieu-mau legend { padding: 0 5px; color: var(--chu-mo); font-size: 13.5px; font-weight: 600; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-cot { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; }
#bm-goi-y-gio { min-height: 1.4em; }
#bm-goi-y-gio.loi { color: var(--do); }

.dong-ch { display: grid; grid-template-columns: 1fr 92px; gap: 6px 8px; align-items: center; padding: 11px 0; border-top: 1px solid var(--vien); }
.dong-ch .ten-nhom { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.dong-ch .ten-nhom small { color: var(--chu-nhat); font-weight: 400; }
.dong-ch select, .dong-ch input[type=text] { margin-top: 0 !important; }
.dong-ch label.theo-doi { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--chu); font-size: 13.5px; font-weight: 400; }
.dong-ch label.theo-doi input { width: 20px; height: 20px; margin: 0; accent-color: var(--nhan-dam); }

/* ------------------------------------------------------------ bảng link Google Sheets (Menu > Nguồn dữ liệu) */
.thanh-nguon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; }
.thanh-nguon .tu-dong { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--chu); font-size: 14px; font-weight: 400; cursor: pointer; }
.thanh-nguon .tu-dong input, .o-chon input { width: 20px; height: 20px; margin: 0; accent-color: var(--nhan-dam); }
.khung-sua { margin: 8px 0 12px; padding: 4px 14px 12px; border: 1px solid var(--nhan); border-radius: 13px; background: var(--nhan-nen); }
.thanh-chon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: var(--mat-2); font-size: 14px; }
.thanh-chon button { min-height: 38px; padding: 0 12px; font-size: 14px; }
.bang-nguon { border: 1px solid var(--vien); border-radius: 13px; overflow: hidden; }
.bang-nguon.dang-cho { opacity: .55; pointer-events: none; }
.dau-bang { display: none; }
.dong-nguon { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 11px 10px; background: var(--mat); }
.dong-nguon + .dong-nguon { border-top: 1px solid var(--vien); }
.dong-nguon.dang-keo { position: relative; z-index: 1; background: var(--mat-3); box-shadow: var(--bong); }
.dong-nguon.tat .ten-link, .dong-nguon.tat .ghi-chu { opacity: .5; }
/* Bảng nằm trong .bieu-mau nên các nhãn dưới đây phải thắng quy tắc ".bieu-mau label": viết bộ chọn đủ nặng. */
.bang-nguon label.o-chon { display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.tay-keo { width: 30px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--chu-nhat); font-size: 20px; line-height: 1; cursor: grab; touch-action: none; }
.tay-keo:active { cursor: grabbing; }
.ten-link { min-width: 0; }
.ten-link b { display: block; font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.ten-link a { display: block; color: var(--nhan); font-size: 12.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dong-nguon .ghi-chu, .dong-nguon .trang-thai { grid-column: 3; color: var(--chu-mo); font-size: 13px; overflow-wrap: anywhere; }
.dong-nguon .trang-thai { font-variant-numeric: tabular-nums; }
.dong-nguon.loi .trang-thai { color: var(--do); }
.dong-nguon .nut-sua { grid-column: 4; grid-row: 2 / span 2; min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.bang-nguon label.cong-tac { position: relative; display: block; width: 46px; height: 28px; margin: 0; cursor: pointer; grid-column: 4; grid-row: 1; justify-self: end; }
.cong-tac input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cong-tac span { display: block; width: 46px; height: 28px; border-radius: 14px; background: var(--mat-3); transition: background .15s; }
.cong-tac span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.cong-tac input:checked + span { background: var(--luc-dam); }
.cong-tac input:checked + span::after { transform: translateX(18px); }
.cong-tac input:focus-visible + span { outline: 2px solid var(--nhan); outline-offset: 2px; }

#ket-qua-nhap table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
#ket-qua-nhap th, #ket-qua-nhap td { padding: 6px; border-bottom: 1px solid var(--vien); text-align: left; }
#ket-qua-nhap td.so, #ket-qua-nhap th.so { text-align: right; }
#ket-qua-nhap .tom-tat { margin: 12px 0 0; padding: 10px 12px; border-radius: 11px; background: var(--luc-nen); color: var(--chu); line-height: 1.5; }
#ket-qua-nhap .tom-tat.loi { background: var(--do-nen); }
#tep-excel { margin: 8px 0; max-width: 100%; }

.thong-bao { position: fixed; left: 50%; bottom: calc(104px + var(--an-toan-duoi)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 14px; background: var(--chu); color: var(--nen); font-size: 14.5px; font-weight: 600; text-align: center; box-shadow: var(--bong); }
.thong-bao.loi { background: var(--do-dam); color: #fff; }

/* ------------------------------------------------------------ máy tính bảng và PC: ba cột */
@media (min-width: 720px) {
  .khung { flex-direction: row; }
  .thanh-nav { order: 0; flex-direction: column; justify-content: flex-start; gap: 4px; width: 84px; padding: 14px 8px; border-top: 0; border-right: 1px solid var(--vien);
    background: var(--mat); filter: none; }
  .thanh-nav .nen-nav, .thanh-nav .o-them-giua, .thanh-hanh-dong .nen-nav, .logo-dau, .nut-quay-lai { display: none; }
  .thanh-nav .logo-nav { display: block; width: 58px; height: auto; margin: 2px auto 14px; }
  .thanh-cong-cu .nut-them { display: inline-block; }
  .thanh-nav button { flex: none; min-height: 62px; border-radius: 12px; }
  .thanh-nav button.chon { background: var(--nhan-nen); }
  .thanh-nav .nut-menu { margin-top: auto; }
  .cot-danh-sach { flex: 0 0 clamp(330px, 40vw, 470px); border-right: 1px solid var(--vien); }
  .cot-chi-tiet, .khung.xem-chi-tiet .cot-danh-sach, .khung.xem-chi-tiet .thanh-nav { display: flex; }
  .dong-ho:not(.canh-bao) { display: inline; }
  #chi-tiet { padding: 22px 26px; }
  #chi-tiet > * { max-width: 780px; margin-left: auto; margin-right: auto; }
  .thanh-hanh-dong { justify-content: flex-end; gap: 6px; padding: 10px 26px; background: var(--mat); border-top: 1px solid var(--vien); filter: none; }
  .thanh-hanh-dong > button { flex: none; flex-direction: row; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
  .thanh-hanh-dong .o-them-giua { flex: none; order: 9; }
  .thanh-lom.thanh-hanh-dong .nut-them-giua { width: 44px; height: 44px; margin-top: 0; }
  .hop { margin: auto; width: min(580px, 92vw); height: auto; max-height: 86vh; max-height: 86dvh; border-radius: 18px; background: var(--mat); }
  .hop.hop-rong { width: min(980px, 94vw); }
  /* Menu trên màn hình rộng: bảng lớn, các thẻ thành cột bên trái */
  #hop-menu { width: min(940px, 94vw); height: min(720px, 90vh); max-height: none; margin: auto; border-radius: 18px; background: var(--nen); }
  #hop-menu[open] { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dau-menu { grid-column: 1 / -1; padding: 16px 16px 6px 22px; }
  .the-menu { flex-direction: column; gap: 4px; margin: 6px 0 16px 14px; padding: 0; background: none; overflow: visible; }
  .the-menu button { flex: none; flex-direction: row; gap: 11px; min-height: 46px; padding: 0 12px; font-size: 14.5px; }
  .the-menu button.chon { background: var(--mat); }
  #hop-menu .than-hop { padding: 0 22px 22px 18px; }
  #hop-menu .than-hop > section > :first-child { margin-top: 6px; }
  /* Bảng link: đủ rộng thì thành bảng bảy cột có hàng tiêu đề */
  .dau-bang, .dong-nguon { display: grid; grid-template-columns: 30px 30px minmax(0, 1.5fr) minmax(0, 1fr) 62px minmax(0, 1.2fr) 64px; gap: 10px; align-items: center; padding: 10px 12px; }
  .dau-bang { background: var(--mat-2); color: var(--chu-mo); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
  .dong-nguon .ghi-chu, .dong-nguon .trang-thai, .dong-nguon .nut-sua, .bang-nguon label.cong-tac { grid-column: auto; grid-row: auto; justify-self: auto; }
  .tay-nam { display: none; }
  .dau-hop { padding: 14px 14px 4px 22px; }
  .hop .chan-hop { justify-content: flex-end; }
  .hop .chan-hop button { flex: none; min-width: 110px; }
  .thong-bao { bottom: 28px; }
}
@media (min-width: 1200px) {
  .thanh-nav { width: 96px; }
  .cot-danh-sach { flex-basis: 480px; }
  .ten-ct { font-size: 24px; }
}
@media (hover: hover) and (pointer: fine) {
  .the:hover { background: var(--mat-2); }
  .muc-menu:hover, .nut-phu:hover, .thanh-nav button:hover, .nut-vuong:hover, .nut-khoang:hover, .luoi-khoang button:hover { filter: brightness(1.12); }
  .goi-y-muc:hover, .thanh-hanh-dong > button:hover { background: var(--mat-2); }
  .the-trang-thai button:not(.chon):hover, .dai-ngay button:not(.chon):hover { background: var(--mat-2); }
}