/* ComDraft — ứng dụng học tập học phần EC1103
   Giao diện đất sét: mỗi khối có ba lớp bóng — bóng đổ phía dưới, vệt sáng
   mảnh ở mép trên, và bóng chìm bên trong ở đáy. Ba lớp ấy hợp lại mới ra
   cảm giác khối nặn tay chứ không phải hộp phẳng có đổ bóng.
   Bảng màu lấy đúng từ bộ nhận diện của bài giảng (scripts/design.js).
   © Đỗ Thùy Hương, 2026. */

:root {
  --coral: #DC756A;
  --coral-dam: #AC4D33;
  --coral-nhat: #FBCEC9;

  --nen: #FAF0EA;
  --nen-sau: #F3E4DC;
  --mat: #FEF8F5;
  --mat-2: #F8EAE3;
  --vien: #EEDBD3;

  --chu: #3A2B28;
  --chu-nhat: #6B5651;
  --chu-mo: #9A8580;

  --chinh: #C85A48;
  --chinh-nen: #FBE7E2;
  --tren-chinh: #FFFFFF;

  --dung: #2E7D53;
  --dung-nen: #E4F2EA;
  --sai: #C0392B;
  --sai-nen: #FBE9E6;
  --vang: #B07D10;
  --vang-nen: #FBF1DC;

  --bo: 22px;
  --bo-nho: 16px;
  --bo-lon: 30px;

  /* ba lớp bóng của khối đất sét */
  --clay: 7px 9px 20px rgba(172, 77, 51, .13),
          inset 2px 2px 6px rgba(255, 255, 255, .95),
          inset -5px -5px 12px rgba(172, 77, 51, .09);
  --clay-nho: 4px 5px 12px rgba(172, 77, 51, .11),
              inset 1px 1px 4px rgba(255, 255, 255, .9),
              inset -3px -3px 8px rgba(172, 77, 51, .08);
  /* khối lõm: đảo chiều hai lớp bóng trong */
  --clay-lom: inset 4px 4px 10px rgba(172, 77, 51, .14),
              inset -3px -3px 8px rgba(255, 255, 255, .9);

  --head: Cambria, "Times New Roman", Georgia, serif;
  --body: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ba đường cong chuyển động có tên. Trước đây mười bốn khai báo transition
     đều để trống, tức là dùng `ease` mặc định của trình duyệt — đường cong
     đối xứng, khởi động chậm, dừng chậm, nên bấm vào thấy ì. Chuyển động
     giao diện phải bật nhanh rồi hãm dần: đó là `--nhanh-ra`. */
  --nhanh-ra: cubic-bezier(.22, .68, .32, 1);
  --nhanh-vao: cubic-bezier(.55, .06, .68, .19);
  --nhanh-hai: cubic-bezier(.45, .05, .3, 1);

  /* Hai đầu dải màu của khối hero, và màu của màn mờ phủ lên bản đồ.
     Màn mờ giữ dạng ba số kênh vì phải đổi độ trong ở bốn điểm dừng khác
     nhau — có token này thì nền tối chỉ thay một dòng. */
  --hero-dau: #FDEFEA;
  --hero-cuoi: #F5E1D7;
  --hero-man-mau: 254, 248, 245;
}

html[data-theme="dark"] {
  --coral: #E89187;
  --coral-dam: #F0A79E;
  --coral-nhat: #4A302B;

  --nen: #241D1B;
  --nen-sau: #1B1614;
  --mat: #2E2523;
  --mat-2: #382D2A;
  --vien: #433532;

  --chu: #F2E7E2;
  --chu-nhat: #D3C2BC;
  --chu-mo: #A08F89;

  --chinh: #E89187;
  --chinh-nen: #3E2A26;
  --tren-chinh: #2A1714;

  --dung: #7FCB9F;
  --dung-nen: #23342B;
  --sai: #EE9184;
  --sai-nen: #3A2521;
  --vang: #E3BC63;
  --vang-nen: #38301E;

  --clay: 7px 10px 22px rgba(0, 0, 0, .48),
          inset 2px 2px 5px rgba(255, 255, 255, .055),
          inset -5px -5px 12px rgba(0, 0, 0, .42);
  --clay-nho: 4px 6px 14px rgba(0, 0, 0, .42),
              inset 1px 1px 4px rgba(255, 255, 255, .05),
              inset -3px -3px 8px rgba(0, 0, 0, .38);
  --clay-lom: inset 4px 4px 10px rgba(0, 0, 0, .5),
              inset -3px -3px 8px rgba(255, 255, 255, .045);

  --hero-dau: #342724;
  --hero-cuoi: #1E1816;
  --hero-man-mau: 36, 29, 27;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Cỡ biểu tượng nét ở những nút không có lớp .bt riêng. */
.sang-toi button svg { width: 17px; height: 17px; }
.khung-phim .nut-phat svg { width: 26px; height: 26px; }
.dieu-nhac .phat svg { width: 19px; height: 19px; }

/* Vòng sáng khi đi bằng bàn phím.
   Trước đây cả tệp không có lấy một luật :focus-visible nào, mà gần như mọi
   thứ bấm được trong ứng dụng đều là <button>: bốn mục cột trái, bốn mục
   thanh dưới, từng phương án trắc nghiệm, từng thẻ chương, nút phát video.
   Ai dùng bàn phím — kể cả sinh viên chỉ quen bấm Tab — không thấy mình đang
   đứng ở đâu. Đây là lỗi dùng được hay không, không phải chuyện đẹp xấu.
   :focus-visible chứ không phải :focus, để bấm chuột thì không hiện vòng.
   Không cho vòng chạy hiệu ứng: vòng phải hiện ngay lúc nhận tiêu điểm. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--chinh);
  outline-offset: 3px;
  border-radius: 6px;
  transition: none;
}

body {
  font-family: var(--body);
  background: var(--nen);
  color: var(--chu);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- đầu trang */
/* Thanh nhận diện chạy suốt bề ngang: bên trái là logo và tên học liệu,
   bên phải là thương hiệu cá nhân của giảng viên. */
.dau-trang {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 14px 18px 0;
}
.dau-trang .hieu {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; margin-right: auto;
}
.dau-trang .logo {
  width: 46px; height: 46px; flex: none;
  filter: drop-shadow(4px 6px 12px rgba(172, 77, 51, .22));
  transition: transform .18s var(--nhanh-ra);
}
.dau-trang .hieu:hover .logo { transform: translateY(-2px) rotate(-3deg); }
.dau-trang .chu b {
  display: block; font-family: var(--head); font-size: 23px;
  color: var(--coral-dam); line-height: 1.1; letter-spacing: .2px;
}
.dau-trang .chu span { display: block; font-size: 12px; color: var(--chu-mo); margin-top: 2px; }

/* "je m'appelle hương" — chữ ký thương hiệu cá nhân của giảng viên */
.thuong-hieu {
  display: flex; align-items: center; gap: 11px;
  background: var(--mat); border-radius: 999px;
  box-shadow: var(--clay-nho); padding: 6px 8px 6px 18px;
}
/* Chữ ký thương hiệu: một dòng, hai vế cùng một cỡ chữ, chỉ khác nhau ở
   kiểu nghiêng và màu. */
.thuong-hieu .ten {
  white-space: nowrap; line-height: 1.2;
  font-family: var(--head); font-size: 17px; letter-spacing: .2px;
}
.thuong-hieu .ten i { font-style: italic; font-weight: 400; color: var(--chu-mo); }
.thuong-hieu .ten b { font-weight: 700; color: var(--coral-dam); }

/* Ba con số ở thanh trên */
.dong-ho { display: flex; gap: 10px; }
.dong-ho div {
  background: var(--mat); border-radius: var(--bo-nho); box-shadow: var(--clay-nho);
  padding: 7px 14px; text-align: center; min-width: 76px;
}
.dong-ho span { display: block; font-size: 10.5px; color: var(--chu-mo); letter-spacing: .3px; }
.dong-ho b {
  display: block; font-family: var(--head); font-size: 17px; color: var(--chinh);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .dong-ho { display: none; } }
.thuong-hieu img {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  box-shadow: var(--clay-nho);
}
@media (max-width: 560px) {
  .dau-trang { padding: 12px 12px 0; gap: 10px; }
  .dau-trang .chu span { display: none; }
  .thuong-hieu { padding: 5px 6px 5px 14px; gap: 9px; }
  .thuong-hieu .ten { font-size: 15.5px; }
  .thuong-hieu img { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------- bố cục */
.khung {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
  align-items: start;
}
@media (max-width: 840px) {
  .khung { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
}

/* ---------------------------------------------------------------- cột trái */
.canh {
  background: var(--mat);
  border-radius: var(--bo-lon);
  box-shadow: var(--clay);
  padding: 18px 14px;
  position: sticky; top: 18px;
}
@media (max-width: 840px) { .canh { position: static; } }

.menu { display: grid; gap: 7px; }
.menu button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 11px 14px; border: none; border-radius: var(--bo-nho);
  background: transparent; color: var(--chu-nhat); cursor: pointer;
  transition: transform .16s var(--nhanh-ra), box-shadow .16s var(--nhanh-ra), color .16s;
}
.menu button .bt { width: 20px; height: 20px; flex: none; }
.menu button:hover { color: var(--chinh); }
.menu button[aria-current="page"] {
  background: var(--mat-2); color: var(--chinh);
  box-shadow: var(--clay-nho);
}

.cong-cu { display: flex; gap: 8px; margin-top: 18px; padding: 0 4px; }
.cong-cu > * { flex: 1; }

.ngu, .sang-toi {
  display: flex; border-radius: 999px; overflow: hidden;
  background: var(--mat-2); box-shadow: var(--clay-lom); padding: 3px;
}
.ngu button, .sang-toi button {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-family: var(--body); font-size: 12.5px; font-weight: 700;
  color: var(--chu-mo); padding: 6px 4px; border-radius: 999px;
  transition: background .16s, color .16s, box-shadow .16s;
}
.ngu button[aria-pressed="true"], .sang-toi button[aria-pressed="true"] {
  background: var(--mat); color: var(--chinh); box-shadow: var(--clay-nho);
}

/* Nút làm mới: xoá bộ nhớ đệm và service worker rồi tải lại — cho sinh
   viên một cách chủ động lấy đúng bản mới nhất, không phải đợi cache cũ
   tự hết hạn (xem PHIEN_BAN trong sw.js). Đặt flex cố định, không giãn
   theo .cong-cu > * như hai cụm nút kia vì đây chỉ một nút tròn. */
.cong-cu > .lam-moi { flex: 0 0 auto; }
.lam-moi {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; border-radius: 999px;
  background: var(--mat-2); box-shadow: var(--clay-lom); color: var(--chu-mo);
  cursor: pointer; transition: color .16s, transform .16s var(--nhanh-ra);
}
.lam-moi:hover { color: var(--chinh); }
.lam-moi svg { width: 17px; height: 17px; }
.lam-moi:disabled { cursor: wait; opacity: .7; }
.lam-moi.dang-quay svg { animation: lam-moi-quay .8s linear infinite; }
@keyframes lam-moi-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lam-moi.dang-quay svg { animation: none; } }

/* ---------------------------------------------------------------- nội dung */
main { min-width: 0; }

.mu {
  background: var(--mat); border-radius: var(--bo-lon);
  box-shadow: var(--clay); padding: 22px 24px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 18px;
}
.mu .chu-de { flex: 1; min-width: 0; }
.mu h1 { font-family: var(--head); font-size: 25px; color: var(--coral-dam); line-height: 1.25; }
.mu p { color: var(--chu-mo); font-size: 14.5px; margin-top: 5px; }
.mu img { width: 82px; height: 82px; border-radius: 50%; flex: none; box-shadow: var(--clay-nho); }
/* Ba dáng mới của cô Hương có nền lấp lánh cùng tông áo dài nên không tách
   rời được; đóng khung bo góc thì giữ trọn chi tiết mà vẫn hợp khối đất sét. */
.mu img.canh-anh {
  width: auto; height: 124px; border-radius: 20px;
  box-shadow: var(--clay-nho); object-fit: cover;
}
@media (max-width: 600px) { .mu img { display: none; } }

.the {
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay); padding: 18px 20px;
}
.the.gt-hp { margin-bottom: 14px; }
.luoi { display: grid; gap: 14px; }
@media (min-width: 700px) { .luoi.hai { grid-template-columns: 1fr 1fr; } }

/* Danh sách chương ở trang chủ: cuộn ngang có snap, thẻ đang ở giữa được
   phóng lên làm tiêu điểm — thẻ hai bên thu nhỏ, mờ đi để gợi ý còn thẻ
   khác ngoài màn hình. */
.luoi.cuon {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 6px 6px 4px; margin: -6px -6px 0;
}
.luoi.cuon::-webkit-scrollbar { display: none; }
.luoi.cuon .chuong {
  scroll-snap-align: center; flex: 0 0 82%; max-width: 360px;
  transform: scale(.92); opacity: .55;
  transition: transform .25s ease, opacity .25s ease, box-shadow .18s ease;
}
.luoi.cuon .chuong.tam { transform: scale(1); opacity: 1; }
.luoi.cuon .chuong:hover { transform: scale(1); }
@media (min-width: 600px) { .luoi.cuon .chuong { flex-basis: 46%; } }
@media (min-width: 900px) { .luoi.cuon .chuong { flex-basis: 31%; } }

.cham { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.cham i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mat-2);
  box-shadow: var(--clay-lom); transition: background .2s ease, transform .2s ease;
}
.cham i.tam { background: var(--chinh); transform: scale(1.35); }

h2.muc {
  font-family: var(--head); font-size: 19px; color: var(--coral-dam);
  margin: 22px 0 12px; padding-left: 4px;
}

/* ---------------------------------------------------------------- nút */
.nut {
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 11px 22px; border: none; border-radius: 999px;
  background: var(--mat); color: var(--chinh); cursor: pointer;
  box-shadow: var(--clay-nho);
  transition: transform .14s var(--nhanh-ra), box-shadow .14s var(--nhanh-ra);
}
.nut:hover { transform: translateY(-2px); }
.nut:active { transform: translateY(1px); box-shadow: var(--clay-lom); }
.nut.chinh { background: var(--chinh); color: var(--tren-chinh); }
.nut.chinh:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,.25); }
.nut.nho { font-size: 13px; padding: 8px 16px; }
.nut:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- chương */
.chuong {
  display: flex; gap: 15px; align-items: center; text-align: left; width: 100%;
  font-family: var(--body); cursor: pointer; border: none;
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay); padding: 16px 18px; color: var(--chu);
  transition: transform .18s var(--nhanh-ra), box-shadow .18s var(--nhanh-ra);
}
.chuong:hover { transform: translateY(-3px); }
.chuong .so {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--chinh); color: var(--tren-chinh);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  font-family: var(--head); box-shadow: var(--clay-nho);
}
.chuong > span { min-width: 0; flex: 1; }
.chuong .ten { display: block; font-weight: 600; font-size: 15.5px; }
.chuong .phu { display: block; font-size: 12.5px; color: var(--chu-mo); margin-top: 3px; }
.chuong .diem { flex: none; text-align: right; font-size: 13px; color: var(--chinh); font-weight: 700; }

.thanh {
  height: 10px; border-radius: 999px; background: var(--mat-2);
  box-shadow: var(--clay-lom); overflow: hidden; margin-top: 9px;
}
.thanh i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--coral), var(--chinh));
  transition: width .35s var(--nhanh-ra);
}

/* ---------------------------------------------------------------- tài nguyên */
.tai-nguyen { display: grid; gap: 10px; margin-top: 14px; }
.tai-nguyen a, .tai-nguyen button {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  width: 100%; text-align: left; border: none; cursor: pointer;
  font-family: var(--body); font-size: 15px;
  background: var(--mat-2); border-radius: var(--bo-nho);
  box-shadow: var(--clay-nho); padding: 12px 15px; color: var(--chu);
  transition: transform .16s var(--nhanh-ra);
}
.tai-nguyen a:hover, .tai-nguyen button:hover { transform: translateY(-2px); }
.tai-nguyen .bt {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: var(--chinh-nen); color: var(--chinh);
  display: grid; place-items: center;
}
.tai-nguyen .bt svg, .tai-nguyen svg.bt { width: 19px; height: 19px; }
.tai-nguyen b { font-size: 14.5px; display: block; }
.tai-nguyen small { color: var(--chu-mo); font-size: 12px; }

/* ---------------------------------------------------------------- làm bài */
.tien-do { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; font-size: 13.5px; color: var(--chu-mo); }
.tien-do .thanh { flex: 1; margin: 0; }

.cau { font-size: 17.5px; font-weight: 600; line-height: 1.5; }
.muc-do {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--chinh); background: var(--chinh-nen);
  border-radius: 999px; padding: 4px 13px; margin-bottom: 11px;
  box-shadow: var(--clay-nho);
}

.dap-an { display: grid; gap: 11px; margin-top: 17px; }
.dap-an button {
  display: flex; gap: 13px; align-items: flex-start; text-align: left; width: 100%;
  font-family: var(--body); font-size: 15.5px; line-height: 1.5;
  padding: 14px 16px; border: none; border-radius: var(--bo-nho);
  background: var(--mat); color: var(--chu); cursor: pointer;
  box-shadow: var(--clay-nho);
  transition: transform .14s var(--nhanh-ra), box-shadow .14s var(--nhanh-ra);
}
.dap-an button:hover:not(:disabled) { transform: translateY(-2px); }
.dap-an button .ky {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--chinh-nen); color: var(--chinh);
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
.dap-an button[data-tt="chon"] { box-shadow: var(--clay-lom); }
.dap-an button[data-tt="chon"] .ky { background: var(--chinh); color: var(--tren-chinh); }
.dap-an button[data-tt="dung"] { background: var(--dung-nen); }
.dap-an button[data-tt="dung"] .ky { background: var(--dung); color: #fff; }
.dap-an button[data-tt="sai"] { background: var(--sai-nen); }
.dap-an button[data-tt="sai"] .ky { background: var(--sai); color: #fff; }
.dap-an button:disabled { cursor: default; transform: none; }

.giai-thich {
  margin-top: 15px; padding: 14px 16px; border-radius: var(--bo-nho);
  background: var(--mat-2); box-shadow: var(--clay-lom); font-size: 14.5px;
}
.giai-thich b { color: var(--chinh); }

.dieu-huong { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.dieu-huong .phai { margin-left: auto; display: flex; gap: 10px; }

.danh-dau {
  background: none; border: none; cursor: pointer; font-size: 22px;
  line-height: 1; padding: 4px; color: var(--vien);
}
.danh-dau[aria-pressed="true"] { color: #E0A500; }

/* ---------------------------------------------------------------- kết quả */
.diem-vong {
  width: 178px; height: 178px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; background: var(--mat);
  box-shadow: var(--clay);
}
.diem-vong span {
  font-family: var(--head); font-size: 46px; font-weight: 700; color: var(--chinh);
  font-variant-numeric: tabular-nums;
}
.o-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 12px; margin-top: 18px; }
.o-so div {
  background: var(--mat-2); border-radius: var(--bo-nho);
  box-shadow: var(--clay-nho); padding: 13px; text-align: center;
}
.o-so b {
  display: block; font-family: var(--head); font-size: 23px; color: var(--chinh);
  font-variant-numeric: tabular-nums;
}
.o-so span { font-size: 12.5px; color: var(--chu-mo); }

.xem-lai details {
  background: var(--mat); border-radius: var(--bo-nho);
  box-shadow: var(--clay-nho); padding: 13px 16px; margin-bottom: 10px;
}
.xem-lai summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.xem-lai .ghi { font-size: 14.5px; margin-top: 9px; }
.xem-lai .ghi p { margin: 5px 0; }
.xem-lai .ghi .d { color: var(--dung); font-weight: 600; }
.xem-lai .ghi .s { color: var(--sai); text-decoration: line-through; }

/* ---------------------------------------------------------------- thiết lập */
.nhom { margin-top: 17px; }
.nhom > b { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--chinh); margin-bottom: 9px; }
.chon { display: flex; flex-wrap: wrap; gap: 9px; }
.chon button {
  font-family: var(--body); font-size: 14px; padding: 9px 17px; border: none;
  border-radius: 999px; background: var(--mat); color: var(--chu); cursor: pointer;
  box-shadow: var(--clay-nho); transition: transform .14s, box-shadow .14s;
}
.chon button:hover { transform: translateY(-2px); }
.chon button[aria-pressed="true"] {
  background: var(--chinh); color: var(--tren-chinh); box-shadow: var(--clay-lom);
}

/* ---------------------------------------------------------------- chân trang */
footer { margin-top: 30px; padding: 0 0 26px; font-size: 12.5px; color: var(--chu-mo); }
footer a { color: var(--chinh); }
footer p + p { margin-top: 5px; }
footer .chu-thich { padding: 0 4px; }

/* Dải nhận diện ở chân trang: lặp lại logo và thương hiệu của đầu trang */
.chan-hieu {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay-nho); padding: 15px 20px; margin-bottom: 16px;
}
.chan-hieu .logo { width: 40px; height: 40px; flex: none; }
.chan-hieu .goc { margin-right: auto; }
.chan-hieu .goc b {
  display: block; font-family: var(--head); font-size: 19px; color: var(--coral-dam); line-height: 1.15;
}
.chan-hieu .goc span { display: block; font-size: 12px; color: var(--chu-mo); }
.chan-hieu .ky {
  white-space: nowrap; line-height: 1.2;
  font-family: var(--head); font-size: 16.5px; letter-spacing: .2px;
}
.chan-hieu .ky i { font-style: italic; font-weight: 400; color: var(--chu-mo); }
.chan-hieu .ky b { font-weight: 700; color: var(--coral-dam); }
.chan-hieu .dau-nv { height: 46px; width: auto; flex: none; }

/* ---------------------------------------------------------------- trình xem */
/* Lớp phủ mở ngay trong ứng dụng: slide lật từng trang, video phát tại chỗ. */
.xem {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(58, 43, 40, .62); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 18px;
}
html[data-theme="dark"] .xem { background: rgba(0, 0, 0, .72); }

.xem .hop {
  background: var(--mat); border-radius: var(--bo-lon);
  box-shadow: var(--clay); width: min(1080px, 100%);
  max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.xem .dinh {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--vien);
}
.xem .dinh b {
  flex: 1; min-width: 0; font-family: var(--head); font-size: 17px;
  color: var(--coral-dam); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xem .dong {
  flex: none; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--mat-2); color: var(--chinh); font-size: 16px; cursor: pointer;
  box-shadow: var(--clay-nho);
}
.xem .dong:active { box-shadow: var(--clay-lom); }

.xem .than {
  flex: 1; min-height: 0; display: grid; place-items: center;
  background: var(--nen-sau); padding: 12px;
}
.xem .than img.trang {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 12px; box-shadow: var(--clay-nho); cursor: pointer;
  /* Chỉ cản trở nhẹ việc kéo/lưu ảnh trong khung xem — không ngăn được
     chụp màn hình thật, xem ghi chú ở .xem .baove. */
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.xem .than video {
  max-width: 100%; max-height: 100%; width: 100%;
  border-radius: 12px; background: #000;
}

.xem .loi-xem { text-align: center; padding: 30px 22px; max-width: 460px; }
.xem .loi-xem b { display: block; font-family: var(--head); font-size: 18px; color: var(--coral-dam); }
.xem .loi-xem p { margin: 8px 0 16px; font-size: 14px; color: var(--chu-nhat); }

.xem .baove {
  display: block; padding: 0 18px 12px; font-size: 11px; line-height: 1.4;
  color: var(--chu-mo); text-align: center;
}

.xem .day {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px 14px; border-top: 1px solid var(--vien);
}
.xem .day .tai { margin-left: auto; font-size: 12.5px; color: var(--chinh); }
.xem .dieu-khien { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; }
.xem .dieu-khien .nut { padding: 7px 15px; font-size: 17px; line-height: 1; }
.xem .dem { font-size: 13px; color: var(--chu-nhat); white-space: nowrap; min-width: 92px; text-align: center; }
.xem .dieu-khien input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--chinh); }

@media (max-width: 600px) {
  .xem { padding: 0; }
  .xem .hop { border-radius: 0; height: 100%; width: 100%; }
  .xem .day { padding: 10px 12px 12px; gap: 10px; }
  .xem .dieu-khien { min-width: 0; }
  .xem .dem { min-width: 76px; font-size: 12px; }
  .xem .baove { padding: 0 12px 10px; }
}

/* ------------------------------------------------- bài tập thể thức văn bản */
/* Tờ A4 chia chín ô đúng theo sơ đồ ở slide 5.2. Chạm chọn khối rồi chạm ô để
   đặt — làm được trên điện thoại, khác với kéo thả bằng chuột. */
.xem .than-rong { display: block; place-items: unset; overflow-y: auto; }
.the-thuc { padding: 4px 2px 2px; }

.the-thuc .loi-nhac {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay-nho); padding: 12px 16px;
}
.the-thuc .loi-nhac img { width: 108px; border-radius: 14px; flex: none; }
.the-thuc .loi-nhac b { font-family: var(--head); font-size: 16px; color: var(--coral-dam); }
.the-thuc .loi-nhac p { font-size: 13.5px; color: var(--chu-nhat); margin-top: 3px; }
@media (max-width: 600px) { .the-thuc .loi-nhac img { display: none; } }

.the-thuc .san { display: grid; gap: 16px; }
@media (min-width: 860px) { .the-thuc .san { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.to-a4 {
  background: var(--mat); border-radius: 12px; box-shadow: var(--clay);
  padding: 18px; display: grid; gap: 9px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'tren-trai tren-phai'
    'duoi-trai duoi-phai'
    'giua      giua'
    'than      than'
    'cuoi-trai cuoi-phai'
    'cuoi-trai dau';
}
.to-a4 .o {
  border: 2px dashed var(--vien); border-radius: 12px;
  background: var(--mat-2); min-height: 46px; padding: 7px 9px;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.to-a4 .o:hover { transform: translateY(-1px); }
.to-a4 .o .goi-y { font-size: 11px; color: var(--chu-mo); line-height: 1.3; }
.to-a4 .o .ten-khoi { font-size: 12.5px; font-weight: 600; color: var(--chu); line-height: 1.3; }
.to-a4 .o.cho-tha { border-color: var(--chinh); background: var(--chinh-nen); }
.to-a4 .o.dung { border-style: solid; border-color: var(--dung); background: var(--dung-nen); }
.to-a4 .o.sai { border-style: solid; border-color: var(--sai); background: var(--sai-nen); }
.to-a4 .o.sai .ten-khoi { text-decoration: line-through; color: var(--sai); }
.to-a4 .o .dap-dung {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--dung); line-height: 1.3; margin-top: 3px;
}
.to-a4 .tren-trai { grid-area: tren-trai; }
.to-a4 .tren-phai { grid-area: tren-phai; }
.to-a4 .duoi-trai { grid-area: duoi-trai; }
.to-a4 .duoi-phai { grid-area: duoi-phai; }
.to-a4 .giua { grid-area: giua; }
.to-a4 .than-bai { grid-area: than; min-height: 76px; }
.to-a4 .cuoi-trai { grid-area: cuoi-trai; }
.to-a4 .cuoi-phai { grid-area: cuoi-phai; }
.to-a4 .con-dau { grid-area: dau; }

.hop-khoi {
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay); padding: 14px 16px;
}
.hop-khoi h4 {
  font-family: var(--head); font-size: 15px; color: var(--coral-dam); margin-bottom: 10px;
}
.day-khoi { display: grid; gap: 8px; }
.day-khoi .khoi {
  text-align: left; width: 100%; border: none; cursor: pointer;
  font-family: var(--body); background: var(--mat-2);
  border-radius: var(--bo-nho); box-shadow: var(--clay-nho); padding: 9px 13px;
  color: var(--chu); transition: transform .14s, box-shadow .14s, background .14s;
}
.day-khoi .khoi:hover:not(:disabled) { transform: translateY(-2px); }
.day-khoi .khoi b { display: block; font-size: 13.5px; }
.day-khoi .khoi small { display: block; font-size: 11px; color: var(--chu-mo); margin-top: 2px; }
.day-khoi .khoi.dang-cam { background: var(--chinh); color: var(--tren-chinh); box-shadow: var(--clay-lom); }
.day-khoi .khoi.dang-cam small { color: rgba(255, 255, 255, .8); }
.day-khoi .khoi.da-dung { opacity: .38; cursor: default; }

.the-thuc .bao { margin-top: 14px; font-size: 14.5px; font-weight: 600; text-align: center; }
.the-thuc .bao.tot { color: var(--dung); }
.the-thuc .bao.chua { color: var(--sai); }

/* ---------------------------------------------------------------- hồ sơ */
.o-ten label { display: block; font-size: 13px; font-weight: 600; color: var(--chinh); margin-bottom: 8px; }
.o-ten input {
  width: 100%; font-family: var(--body); font-size: 15.5px; color: var(--chu);
  background: var(--mat-2); border: none; border-radius: var(--bo-nho);
  box-shadow: var(--clay-lom); padding: 12px 15px; outline: none;
}
.o-ten input:focus { box-shadow: var(--clay-lom), 0 0 0 2px var(--coral-nhat); }
p.rieng { font-size: 12.5px; color: var(--chu-mo); margin-top: 10px; line-height: 1.5; }

.huy-hieu { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.huy-hieu .hh {
  background: var(--mat); border-radius: var(--bo); box-shadow: var(--clay);
  padding: 16px 13px; text-align: center;
}
.huy-hieu .hh .bt { display: block; font-size: 34px; line-height: 1.1; }
.huy-hieu .hh b { display: block; font-size: 14.5px; margin-top: 7px; color: var(--coral-dam); }
.huy-hieu .hh small { display: block; font-size: 11.5px; color: var(--chu-mo); margin-top: 3px; line-height: 1.35; }
.huy-hieu .hh.khoa { box-shadow: var(--clay-lom); background: var(--mat-2); }
.huy-hieu .hh.khoa .bt, .huy-hieu .hh.khoa b { opacity: .5; }
.huy-hieu .hh.khoa b { color: var(--chu-nhat); }

.xem .to-giay {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 10px; box-shadow: var(--clay-nho); background: #FAF0EA;
}

/* ---------------------------------------------------- video giới thiệu ứng dụng
   Đứng ở chỗ trước đây là khung phim giới thiệu Chương 1. Video quay dọc
   9:16 (khác khổ 16:9 của video bài giảng) nên khung khoá theo đúng tỉ lệ đó
   để không có viền đen — khoá sẵn để trang không nhảy lúc video nạp xong.
   Chặn bề ngang tối đa để màn rộng không kéo khung cao vống lên; ảnh bìa và
   lớp chữ lui hết khi đã bấm phát. */
.video-gt { margin-top: 16px; }
.video-gt-khung {
  position: relative; aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto;
  border-radius: var(--bo); overflow: hidden; background: #000; box-shadow: var(--clay);
}
.video-gt-anh, .video-gt-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-gt-video { opacity: 0; pointer-events: none; }
.video-gt-khung.dang-phat .video-gt-video { opacity: 1; pointer-events: auto; object-fit: contain; }
.video-gt-khung.dang-phat .video-gt-anh,
.video-gt-khung.dang-phat .video-gt-man { opacity: 0; pointer-events: none; }
.video-gt-man {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity .3s ease;
  /* Tối dần từ giữa xuống đáy để chữ trắng nào cũng đọc được, không phụ thuộc
     ảnh bìa sáng hay tối. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .16) 38%, rgba(0, 0, 0, .8) 100%);
}
.video-gt-phat {
  width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--mat); color: var(--chinh); display: grid; place-items: center;
  padding-left: 4px; box-shadow: var(--clay); transition: transform .18s ease;
}
.video-gt-phat svg { width: 26px; height: 26px; fill: currentColor; }
.video-gt-phat:hover { transform: scale(1.06); }
.video-gt-phat:active { transform: scale(.96); }
.video-gt-chu {
  position: absolute; left: 20px; right: 20px; bottom: 16px; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.video-gt-nho {
  margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--coral-nhat);
}
.video-gt-de { margin: 0; font-family: var(--head); font-size: 18px; }
.video-gt-ghi { display: block; margin-top: 8px; font-size: 12px; color: var(--chu-mo); }
@media (max-width: 480px) {
  .video-gt-phat { width: 54px; height: 54px; }
  .video-gt-phat svg { width: 20px; height: 20px; }
  .video-gt-de { font-size: 15px; }
}

/* ---------------------------------------------------- thanh dưới điện thoại */
.thanh-duoi { display: none; }
@media (max-width: 840px) {
  .thanh-duoi {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--mat); border-radius: 22px 22px 0 0;
    box-shadow: 0 -5px 22px rgba(172, 77, 51, .16);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  }
  html[data-theme="dark"] .thanh-duoi { box-shadow: 0 -5px 22px rgba(0, 0, 0, .5); }
  .thanh-duoi button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: transparent; cursor: pointer;
    font-family: var(--body); font-size: 11px; font-weight: 600;
    color: var(--chu-mo); padding: 7px 2px; border-radius: 15px;
  }
  .thanh-duoi button .bt { width: 21px; height: 21px; }
  .thanh-duoi button[aria-current="page"] {
    color: var(--chinh); background: var(--mat-2); box-shadow: var(--clay-lom);
  }
  /* chừa chỗ cho thanh dưới, không để nó che mất chân trang */
  body { padding-bottom: 74px; }
  /* cột trái trên màn hẹp chỉ còn hai nút đổi ngôn ngữ và sáng tối */
  .canh .menu { display: none; }
}

/* ---------------------------------------------------- đồng hồ và nhạc */
.gio-nhac { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 780px) { .gio-nhac { grid-template-columns: 1.25fr 1fr; } }
.khoi-gio, .khoi-nhac {
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay); padding: 16px 18px;
}
.khoi-gio h3, .khoi-nhac h3 {
  font-family: var(--head); font-size: 16px; color: var(--coral-dam); margin-bottom: 11px;
}
.cac-mui { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mui {
  background: var(--mat-2); border-radius: var(--bo-nho);
  box-shadow: var(--clay-lom); padding: 11px 13px;
}
.mui .ten { display: block; font-size: 11.5px; color: var(--chu-mo); letter-spacing: .4px; }
.mui b {
  display: block; font-family: var(--head); font-size: 25px; color: var(--chinh);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.mui small { display: block; font-size: 11px; color: var(--chu-mo); margin-top: 2px; }
.khoi-gio .lech { margin-top: 10px; font-size: 12.5px; color: var(--chu-mo); }

.khoi-nhac .gioi-thieu { font-size: 13px; color: var(--chu-nhat); line-height: 1.5; }
.dieu-nhac { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.dieu-nhac .phat {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  padding: 0; display: grid; place-items: center;
}
.dieu-nhac .phat.dang-phat { box-shadow: var(--clay-lom); }
.chu-nhac { min-width: 0; }
.chu-nhac .ten-bai {
  display: block; font-family: var(--head); font-size: 16px; color: var(--coral-dam);
}
.chu-nhac .gio-bai { font-size: 12.5px; color: var(--chu-mo); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- ghi danh */
.xem .tai.khoa {
  border: none; cursor: pointer; font-family: var(--body); font-size: 12.5px;
  background: var(--chinh-nen); color: var(--chinh); border-radius: 999px;
  padding: 7px 15px; box-shadow: var(--clay-nho); margin-left: auto;
}
.lop-ghi-danh .hop { width: min(520px, 100%); }
.phieu { padding: 4px 2px; }
.phieu .mo { font-size: 14px; color: var(--chu-nhat); line-height: 1.55; margin-bottom: 16px; }
.phieu .o { display: block; margin-bottom: 13px; }
.phieu .o > span {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--chinh); margin-bottom: 6px;
}
.phieu .o input {
  width: 100%; font-family: var(--body); font-size: 15.5px; color: var(--chu);
  background: var(--mat-2); border: none; border-radius: var(--bo-nho);
  box-shadow: var(--clay-lom); padding: 12px 15px; outline: none;
}
.phieu .o input:focus { box-shadow: var(--clay-lom), 0 0 0 2px var(--coral-nhat); }
.phieu .dong-y {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--chu-nhat); line-height: 1.5; margin: 4px 0 10px;
}
.phieu .dong-y input { margin-top: 3px; accent-color: var(--chinh); flex: none; }
.phieu .loi-gd { color: var(--sai); font-size: 13px; min-height: 19px; }
.phieu .nut-hang { display: flex; gap: 10px; margin-top: 8px; }
.o-ten .da-gd { font-size: 14.5px; margin: 2px 0 12px; }
.o-ten .da-gd b { color: var(--coral-dam); }
.o-ten .nut-hang { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------------------------------------------------- Hương AI: tour */
.tour-goi {
  position: fixed; right: 18px; bottom: 18px; z-index: 35;
  display: flex; align-items: center; gap: 9px;
  border: none; cursor: pointer; font-family: var(--body);
  font-size: 13.5px; font-weight: 600; color: var(--chinh);
  background: var(--mat); border-radius: 999px; padding: 8px 16px 8px 8px;
  box-shadow: var(--clay); transition: transform .16s var(--nhanh-ra);
}
.tour-goi img { width: 30px; height: 30px; border-radius: 50%; }
.tour-goi:hover { transform: translateY(-2px); }
@media (max-width: 840px) { .tour-goi { bottom: 84px; } }

.tour-bang {
  position: fixed; right: 18px; bottom: 18px; z-index: 36;
  width: min(360px, calc(100vw - 36px));
  background: var(--mat); border-radius: var(--bo-lon);
  box-shadow: var(--clay); padding: 15px 17px 17px;
  overflow: hidden;
}
@media (max-width: 840px) { .tour-bang { bottom: 84px; } }
.tour-bang .dinh { display: flex; align-items: center; gap: 10px; }
.tour-bang .dinh img { width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--clay-nho); }
.tour-bang .dinh b { font-family: var(--head); font-size: 15px; color: var(--coral-dam); }
.tour-bang .dinh small { font-size: 11.5px; color: var(--chu-mo); }
.tour-bang .dinh span { flex: 1; min-width: 0; }
.tour-bang .dong {
  width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--mat-2); color: var(--chinh); box-shadow: var(--clay-nho); flex: none;
}
/* Nhân vật nép bên phải bảng, chữ chừa lề để không bị đè */
.tour-bang .nv {
  position: absolute; right: -14px; bottom: 0; height: 162px; width: auto;
  pointer-events: none; transition: opacity .18s var(--nhanh-ra);
}
@media (max-width: 480px) { .tour-bang .nv { display: none; } }
.tour-bang .loi {
  font-size: 14px; line-height: 1.55; color: var(--chu); margin: 12px 0 14px;
  padding-right: 84px; min-height: 74px;
}
@media (max-width: 480px) { .tour-bang .loi { padding-right: 0; min-height: 0; } }
.tour-bang .nut-hang { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-bang .nhac { font-size: 11.5px; color: var(--chu-mo); margin-top: 9px; }

/* Vùng đang được nói tới sáng lên */
.tour-sang {
  position: relative; z-index: 34;
  outline: 3px solid var(--chinh);
  outline-offset: 5px;
  border-radius: var(--bo-nho);
  animation: tour-nhip 1.5s ease-in-out infinite;
}
@keyframes tour-nhip {
  0%, 100% { outline-color: var(--chinh); }
  50% { outline-color: var(--coral-nhat); }
}
@media (prefers-reduced-motion: reduce) { .tour-sang { animation: none; } }

.an { display: none !important; }
/* Người bật "giảm chuyển động" cần bớt chuyển động trong KHÔNG GIAN — thứ gây
   chóng mặt là vật trượt, nảy, phóng to. Đổi màu và mờ dần thì không.
   Luật cũ tắt sạch mọi transition, nên bấm một phương án là màu nhảy phắt,
   không còn dấu hiệu nào cho biết máy đã nhận. Nay chỉ chặn phần dịch chuyển
   và giữ lại phần đổi màu, rút xuống 120 ms. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-property: opacity, background-color, color, border-color, box-shadow !important;
    transition-duration: 120ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Vòng tiêu điểm không bao giờ được chạy hiệu ứng, kể cả ở đây. */
  /* Cỡ mặc định của biểu tượng nét. Nút nào cần khác thì tự đè bên dưới. */
.sang-toi button svg { width: 17px; height: 17px; }
.khung-phim .nut-phat svg { width: 26px; height: 26px; }
.dieu-nhac .phat svg { width: 19px; height: 19px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- hero */
/* Cách bày của Google DeepMind: một khối lớn gần như không viền, chữ tiêu đề
   cỡ rất to, nhiều khoảng thở, nền là dải màu chảy mềm. Ở đây giữ bảng màu
   san hô của bộ nhận diện, thêm bản đồ Việt Nam chìm và cô Hương đứng tràn
   xuống mép dưới. */
.hero {
  position: relative;
  isolation: isolate;
  border-radius: 34px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(30px, 5vw, 62px) clamp(24px, 4.4vw, 60px) 0;
  min-height: clamp(330px, 42vw, 460px);
  display: flex; align-items: flex-end; gap: 26px;
  box-shadow: var(--clay);
}
/* Nền hero.
   Bản trước xếp BỐN vệt radial-gradient chồng lên nhau. Đó đúng là dấu hiệu
   Hallmark gọi tên — "aurora blob" — kiểu nền mà mọi trang do máy sinh ra đều
   có. Màu thì không sai, cả bốn vệt đều nằm trong họ san hô của bộ nhận diện,
   nhưng CÁCH DỰNG mới là chỗ lộ. Bốn vệt còn buộc phải chép lại năm điểm dừng
   màu bằng tay ở khối nền tối, nên sửa một màu là phải sửa hai chỗ.
   Nay còn một dải hai điểm dừng, cộng một lớp nhiễu hạt rất mảnh để mặt phẳng
   không bị trơ. Hạt vẽ bằng feTurbulence nhúng thẳng, không gọi ra ngoài —
   repo cấm mọi yêu cầu mạng. Màu lấy qua token, nên nền tối chỉ cần đổi token
   chứ không phải viết lại cả khối. */
.hero-nen {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(158deg, var(--hero-dau) 0%, var(--hero-cuoi) 100%);
}
/* Nhiễu hạt: lớp riêng để chỉnh độ đậm mà không đụng vào dải màu bên dưới. */
.hero-nen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23h)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .hero-nen::after { opacity: .09; }
/* Bản đồ dán thẳng chứ không dùng làm mặt nạ nữa: có sông, tên thành phố,
   lưới kinh vĩ tuyến và hoa gió, nên phải giữ đủ màu của chính nó. Vì thế
   phải có hai tệp, một cho nền sáng một cho nền tối. Bản đồ nằm trọn trong
   khối; tràn ra là cắt mất chỏm bắc và mũi Cà Mau. */
.hero-ban-do {
  position: absolute; z-index: -1; right: 9%; top: 4%; width: 46%; height: 92%;
  background: url('../img/viet-nam.svg') no-repeat center right / contain;
  opacity: .5; pointer-events: none;
}
html[data-theme="dark"] .hero-ban-do {
  background-image: url('../img/viet-nam-toi.svg');
  opacity: .6;
}
/* Màn mờ chuyển từ trái sang: nét bản đồ chạy xuyên qua tiêu đề thì chữ khó
   đọc, nên nửa trái phải chìm hẳn, nửa phải mới để lộ hình. */
.hero-man {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(96deg,
              rgba(var(--hero-man-mau), .94) 0%, rgba(var(--hero-man-mau), .86) 38%,
              rgba(var(--hero-man-mau), .30) 68%, rgba(var(--hero-man-mau), 0) 88%);
}

.hero-chu { flex: 1 1 auto; min-width: 0; padding-bottom: clamp(30px, 5vw, 62px); }
.hero-chu .nhan {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--chinh);
  background: var(--mat); border-radius: 999px; padding: 6px 16px;
  box-shadow: var(--clay-nho); margin-bottom: 20px;
}
.hero-chu h1 {
  font-family: var(--head);
  font-size: clamp(31px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.6px;
  color: var(--coral-dam);
  max-width: 19ch;
  text-wrap: balance;
}
.hero-chu p {
  margin-top: 18px; max-width: 48ch;
  font-size: clamp(14.5px, 1.35vw, 17px); line-height: 1.6; color: var(--chu-nhat);
}
.hero-nut { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-nut .nut { padding: 13px 26px; font-size: 15.5px; }

/* Không đặt position ở đây: bóng thoại cần neo theo khối hero, còn khối nhân
   vật thì chỉ cao bằng bức ảnh và nằm sát đáy. */
.hero-nv { flex: none; align-self: flex-end; }
.hero-nv img { height: clamp(230px, 26vw, 330px); width: auto; display: block; }
/* Bóng thoại đặt phía trên đầu nhân vật. Để bên trái thì nó thò sang cột chữ
   và đè lên đoạn mô tả. */
/* Neo theo mép trên của khối hero chứ không theo đầu nhân vật: lời chào dài
   ngắn thế nào thì bóng thoại cũng không thể thò lên khỏi khối rồi bị cắt. */
.hero-nv .bong {
  position: absolute; bottom: auto;
  right: clamp(24px, 4.4vw, 60px); top: clamp(26px, 4.4vw, 54px);
  /* hẹp vừa đủ để không thò sang vùng hộp của tiêu đề */
  width: max-content; max-width: 196px;
  background: var(--mat); border-radius: var(--bo);
  box-shadow: var(--clay-nho); padding: 11px 14px;
  font-size: 13px; line-height: 1.45; color: var(--chu);
}
.hero-nv .bong::after {
  content: ''; position: absolute; right: 42px; bottom: -10px;
  border: 10px solid transparent; border-top-color: var(--mat); border-bottom: 0;
}
@media (max-width: 1180px) { .hero-nv .bong { display: none; } }
@media (max-width: 760px) {
  .hero { min-height: 0; padding-bottom: clamp(30px, 5vw, 62px); }
  .hero-nv { display: none; }
  .hero-ban-do { right: -6%; width: 56%; opacity: .1; }
}

.ket-nv { display: flex; align-items: flex-end; gap: 18px; justify-content: center; margin-top: 6px; }
.ket-nv img { height: 190px; width: auto; flex: none; }
.ket-nv img.canh-anh { border-radius: 20px; box-shadow: var(--clay-nho); }
.ket-nv .bong {
  position: relative; background: var(--chinh-nen); border-radius: var(--bo);
  box-shadow: var(--clay-nho); padding: 13px 16px; font-size: 14.5px;
  max-width: 320px; margin-bottom: 26px; text-align: left;
}
.ket-nv .bong::after {
  content: ''; position: absolute; right: -10px; bottom: 18px;
  border: 10px solid transparent; border-left-color: var(--chinh-nen);
  border-right: 0;
}
@media (max-width: 600px) { .ket-nv img { display: none; } .ket-nv .bong { margin-bottom: 0; } }