/* ══════════════════════════════════════════════════════════════════════════════════════
   GENUP STATE — người gác cửa dùng chung cho toàn hệ thống

   Chủ dự án 31/08/2026:

     > *"Không nên chỉ dùng hình này cho 'Bạn không có quyền truy cập'. Giá trị nhất là
     > biến nó thành mascot trạng thái chính thức của GENUP. Khách gặp chỗ chưa kết nối,
     > chưa mua, chưa có dữ liệu hay lỗi nhẹ đều thấy cùng một người gác cửa GENUP."*

   ══ BỐN LUẬT VỀ ẢNH, KHÔNG ĐƯỢC PHÁ ══

     ① `genup-trang-thai.png` là tệp GỐC, chép nguyên byte. Không sửa, không nén lại,
        không vẽ lại logo. Đã xác minh sha256 nguồn = đích.
     ② Mọi chữ là HTML overlay. TUYỆT ĐỐI không ghi chữ vào ảnh.
     ③ Chỉ cắt bằng CSS, và ưu tiên không cắt mất nhà, mascot, robot, logo.
     ④ Một ảnh cho MỌI trạng thái. Trạng thái đổi bằng chữ, chấm màu và nút.

   ══ VÌ SAO CHỮ NẰM BÊN TRÁI ══

   Trong ảnh gốc, ngôi nhà và mascot nằm lệch PHẢI (khoảng x 0,45–0,85). Nửa trái là trời
   đêm và thành phố xa — sẵn vùng tối để đặt chữ mà không đè lên nhân vật. Nên bố cục là
   chữ trái / nhân vật phải, và trên màn hẹp thì `object-position` kéo về phải để nhà và
   mascot không bị cắt mất.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* 🔴 LỚP BỌC LÀ CONTAINER, KHÔNG PHẢI KHUNG. Hai lỗi đo được ngày 31/08:

     ① `@media` nghe CỬA SỔ, không nghe khung. Khung sống trong vùng nội dung cạnh
        sidebar: cửa sổ 1280 mà khung chỉ 380 → media query không bao giờ kích hoạt,
        chữ đè lên mascot, nhà bị cắt, logo UP nằm sau chữ.

     ② Đặt `container-type` thẳng lên `.gu-tt` thì `@container` sửa được các phần tử
        CON (`object-position` đổi đúng) nhưng KHÔNG sửa được chính `.gu-tt` —
        `min-height` và `align-items` đứng nguyên. Một phần tử không tự sửa mình bằng
        container query của chính nó. Nên container phải là lớp bọc bên ngoài. */
.gu-tt-bao {
  container-type: inline-size;
  container-name: gu-tt;
}

/* ══ BO CUC THEO MAU CHU DU AN LAM 31/08 ══
   Anh TRAN han, khong vien, khong nen the. Chu can GIUA, mot nut CTA lon.
   Ban truoc cua toi la mot cai the co vien voi chu don ben trai — chu du an tu lam mau
   de chi ra: anh phai la toan bo khung canh, chu chi la mot khoi nho noi len tren no. */
.gu-tt {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* Khung cao han truoc. Chu du an 31/08 gui mau tham chieu: anh gan TRAN khung, chu chi
     chiem mot phan nho. Khung thap thi anh bi bop thanh mot dai ngang va mat het khong
     khi cua canh dem. */
  min-height: 460px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  isolation: isolate;
  /* Nen DEN, khong phai xam the. Anh moi cua chu du an mo dan ra den o ria, nen the
     phai cung mau den thi moi lien mach. */
  --gu-tt-nen: #000107;   /* = màu MÉP ảnh (đo từ tệp, mẫu OWNER 29/09): ảnh dời xuống không lộ đường nối */
  background: var(--gu-tt-nen);
  border: 0;
}

/* Toàn màn — CHỈ cho 401 / 403 / 404 / hết phiên / lỗi hệ thống nghiêm trọng.
   Mọi trạng thái khác phải nằm gọn trong vùng nội dung, giữ nguyên sidebar và header,
   để khách không có cảm giác bị đẩy sang một trang lỗi. */
.gu-tt--toan-man {
  position: fixed;
  inset: 0;
  z-index: 9000;
  border-radius: 0;
  border: 0;
  min-height: 100vh;
}

/* `<picture>` co hop bo cuc that thay vi `display: contents`.

   GHI CHU VE MOT CHAN DOAN SAI CUA TOI, de nguoi sau khong di lai:
   ban dau toi ket luan `display:contents` lam `loading="lazy"` khong chay. Phep thu doi
   chung ba cot (img absolute / picture+img absolute / img tinh thuong) cho thay CA BA
   deu khong tai — ke ca mot `<img loading="lazy">` tinh nam ngay goc tren khung nhin.
   Nen nguyen nhan la moi truong trinh duyet tu dong, KHONG phai `display:contents`.

   Van giu `display:block` vi no chac chan hon va khong ton gi. Nhung viec bao dam anh
   thuc su tai nam o `genup-trang-thai.js` (IntersectionObserver), khong nam o day. */
.gu-tt picture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Anh hong thi KHONG duoc de lai man hinh den. Bo lop phu gradient (von de doc chu tren
   anh) va tra ve nen thuong hieu dac + mot vet do nhat o phai, giu duoc nhan dien ma
   khong gia vo la van con anh. */
.gu-tt[data-anh-loi] .gu-tt__anh { display: none; }
.gu-tt[data-anh-loi] .gu-tt__phu {
  background:
    radial-gradient(120% 130% at 88% 46%,
      color-mix(in srgb, var(--gu-do, #DB1920) 16%, transparent) 0%,
      transparent 62%),
    var(--gu-be-mat-toi, #0F1216);   /* LUÔN tối — chữ khung là trắng cố định; --gu-den-2 lật trắng ở nền sáng (22/09) */
}

.gu-tt__anh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62% — đẩy khung nhìn sang phải để giữ nhà + mascot + robot khi khung bị bóp hẹp. */
  object-position: center;
  z-index: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Màn tối để chữ đọc được. Đậm bên trái, trong dần sang phải — nhân vật không bị mờ. */
.gu-tt__phu {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Nhe hon nhieu so voi ban dau. Truoc day day la mot buc tuong den phu 56% ben trai —
     chu doc duoc nhung anh coi nhu bi xoa mat nua. Gio chi la mot vet toi vua du de chu
     bam duoc, con lai de canh dem tu no lam nen. */
  /* Rat nhe. Anh moi cua chu du an da tu mo ra den o ria va vung troi phia tren von da
     toi — khong can mot lop phu nang nua. Chi mot vet o dinh de chu bam duoc. */
  /* 22/09 (BOSS P1): tiêu đề chữ lớn nằm trên vùng SÁNG của ảnh ⇒ gần như không đọc được. Lớp phủ đậm hơn ở vùng chữ
     (đỉnh 0,86 → 0,60 ở 30% → trong ở 62%) + bóng chữ nhẹ; nhân vật ở nửa dưới vẫn rõ. */
  background:
    linear-gradient(180deg,
      rgba(3, 5, 9, 0.86) 0%,
      rgba(3, 5, 9, 0.60) 30%,
      rgba(3, 5, 9, 0.00) 62%);
}

.gu-tt__noi {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 7cqw, 56px) 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 🔴 KHOI CHU GON, KHONG PHAI MOT COT CHIEM NUA KHUNG.
     Ban dau toi cho chu rong 58% khung, va do chinh la nguon con cua moi rac roi: o be
     rong thuc te 645px cua GENUP, khoi chu cham toi x=404 trong khi mascot dung o
     x=303–355 — chu de thang len nhan vat, va moi cach vet vat bang `object-position`
     deu that bai vi khung khong con phan thua ngang de dich.
     Chu du an gui mau tham chieu: anh gan tran khung, chu chi chiem mot phan. Gioi han
     theo SO KY TU chu khong theo phan tram khung — chu dai bao nhieu thi rong bay nhieu,
     va khong bao gio lan sang vung nhan vat. */
  max-width: 46ch;
  color: var(--gu-text-tren-toi);
}
.gu-tt--toan-man .gu-tt__noi { padding: 40px clamp(24px, 7vw, 96px); max-width: 620px; }

/* ── Huy hiệu trạng thái: chấm màu + nhãn. Đây là chỗ DUY NHẤT phân biệt trạng thái
      bằng màu, nên nó phải nhỏ và rõ, không biến cả khung thành một tông. ── */
.gu-tt__hinh {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 13px;
  /* MOT MAU cho moi trang thai. Chu du an 31/08: *"tat ca icon va loi canh bao 2 dong
     tren cung khong dung khac mau, chi nen 1 mau."* Doi mau theo tong lam hai dong dau
     thanh mot bang mau roi rac; khach phai hoc y nghia tung mau truoc khi doc duoc chu. */
  color: var(--gu-do-2, #F0333A);
  opacity: .95;
}

.gu-tt__huy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--gu-do, #DB1920) 15%, transparent);
  color: var(--gu-do-2, #F0333A);
  border: 1px solid color-mix(in srgb, var(--gu-do, #DB1920) 40%, transparent);
}
.gu-tt__cham {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.gu-tt__tieu {
  text-shadow: 0 1px 12px rgba(3, 5, 9, 0.65);
  margin: 0 0 10px;
  /* OWNER 28/09 (polish): 27px ⇒ trần 24px máy tính, ~20px điện thoại. */
  font-size: clamp(var(--gu-fs-lg, 20px), 3.2cqw, 24px);
  font-weight: 800;
  /* Trang, KHONG doi theo tong. Mau chi nam o hai dong tren cung. */
  color: #FFFFFF;
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
  color: #FFFFFF;
}
.gu-tt__manh {
  font-weight: 800;
  font-size: 1.36em;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.gu-tt__mo {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #AEBAC7;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* Nut phu nam DUOI nut chinh, khong canh ben. Chu du an 31/08: *"chu Xem huong dan phai
   nam duoi, tat ca canh giua."* Xep ngang hai nut lam chung trong nhu hai lua chon ngang
   hang, trong khi chi mot cai la viec khach can lam. */
.gu-tt__nut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.gu-tt__nut a, .gu-tt__nut button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.gu-tt__nut a:active, .gu-tt__nut button:active { transform: translateY(1px); }
.gu-tt__chinh {
  background: var(--gu-do, #DB1920);
  color: #fff;
  /* Nut chinh to va chu hoa theo mau: no la loi moi hanh dong, khong phai mot lien ket. */
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 30px;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--gu-do, #DB1920) 34%, transparent);
}
.gu-tt__chinh:hover { filter: brightness(1.12); }
/* 🔴 Nut chinh cua the trang thai co NEN DO. Khoi va tuong phan cua trang lai dat mau CHU
   thanh do -> chu do tren nen do, ti le 1,67. Chu tren mot nut da to nen thi phai la
   TRANG, khong ke trang thai nao. Do 06/09/2026. */
.gu-tt__chinh, .gu-tt__chinh.loi, .gu-tt__chinh.hong, .gu-tt__chinh b,
.gu-tt__chinh strong { color: #fff !important; }
.gu-tt__phu-nut {
  background: transparent;
  color: #9FADBB;
  border-color: transparent;
  padding: 4px 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.gu-tt__phu-nut:hover { color: var(--gu-text-tren-toi); background: rgba(255, 255, 255, 0.07); }

.gu-tt__nut a:focus-visible, .gu-tt__nut button:focus-visible {
  outline: 2px solid var(--gu-lam, #4DA6FF);
  outline-offset: 2px;
}

/* ── Màn hẹp: chữ xuống dưới, màn tối chuyển sang phủ từ đáy lên, nhân vật lộ ở nửa trên.
      Không đổi tệp ảnh — chỉ đổi hướng gradient và điểm nhìn. ── */
/* Nguong 520, KHONG phai 720. Ly do do duoc: vung noi dung thuc te cua GENUP la 645px,
   nen nguong 720 khien MOI khung roi vao che do dien thoai ngay ca tren man hinh lon.
   645px thua cho bo cuc ngang. Duoi 520 moi that su chat. */
@container gu-tt (max-width: 520px) {
  .gu-tt { min-height: 440px; align-items: flex-start; }
  .gu-tt__anh { object-position: 62% 42%; }
  .gu-tt__phu {
    background:
      linear-gradient(180deg,
        rgba(6, 8, 12, 0.22) 0%,
        rgba(6, 8, 12, 0.55) 42%,
        rgba(6, 8, 12, 0.94) 72%,
        rgba(6, 8, 12, 0.985) 100%);
  }
  .gu-tt__noi { padding: 26px 18px 0; max-width: 100%; }
  .gu-tt__tieu { font-size: clamp(18px, 5.6cqw, var(--gu-fs-lg, 20px)); }
  .gu-tt__mo { max-width: 100%; }
  .gu-tt__nut { align-self: stretch; }
}

/* ── Rat hep: hai nut xuong hai hang, moi nut tron chieu ngang. Duoi 480 thi hai nut
      canh nhau con khoang 150px moi nut — bam nham la chuyen som muon. ── */
@container gu-tt (max-width: 480px) {
  .gu-tt__nut { align-self: stretch; }
  .gu-tt__chinh { width: 100%; }
}

/* ── Giao diện SÁNG. Ảnh vốn là cảnh đêm, nên không đảo màu ảnh (đảo là phá ảnh gốc).
      Thay vào đó giữ nguyên ảnh, chỉ làm khung và viền hợp với nền sáng. Chữ vẫn nằm
      trên vùng tối của chính bức ảnh nên vẫn đọc tốt. ── */
:root[data-gu-sang] .gu-tt,
.gu-sang .gu-tt,
:root[data-theme="light"] .gu-tt {
  /* Khung GIỮ TỐI ở nền sáng (ảnh đêm + chữ trắng cố định) — chỉ đổi viền/bóng cho hợp nền sáng. Bộ chọn cũ data-gu-sang /
     .gu-sang không khớp gì trong hệ (hệ dùng data-theme="light") ⇒ thêm; nền không còn trắng (chữ trắng trên trắng). */
  background: var(--gu-tt-nen);   /* khung vẫn tối ở nền sáng — trùng mép ảnh */
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06);
}
/* 29/09 vòng 12: genup-ui.css tô TỐI mọi `main h2` ở nền sáng (:root[data-theme=light] main h2) ⇒ tiêu đề khung này (h2 trên
   ẢNH ĐÊM, khung giữ tối) thành chữ đen trên nền tối — mọi trang có khung lỗi/trống đều mất tiêu đề. Khung đã cố định tối
   ⇒ chữ cố định "trên nền tối", bộ chọn đủ nặng (0,4,0) để thắng luật chung (0,2,2). */
:root[data-theme="light"] .gu-tt .gu-tt__tieu { color: var(--gu-text-tren-toi); }

@media (prefers-reduced-motion: reduce) {
  .gu-tt__nut a, .gu-tt__nut button { transition: none; }
}

/* Dòng lỗi gọn cho ô trong bảng — vẽ cả khung mascot trong một `<td>` sẽ phá vỡ hàng cột.
   🔴 REQ-20260922-002 (CI #1104, cổng tương phản): màu cứng #9FADBB (2,29 trên nền trắng), đỏ
   #F0333A (4,01) và hover chữ TRẮNG trên nền trắng (1,0) đều trượt WCAG. Trang đầu tiên dùng
   dòng lỗi trong bảng (dang-bai-tu-dong, REQ-055) làm lộ ra. Nay KẾ THỪA màu chữ của ô bảng —
   thứ đã qua cổng tương phản ở cả nền sáng lẫn tối — và phân biệt bằng chữ + gạch chân, không
   bằng màu (luật "không chỉ dựa vào màu"). */
.gu-tt-hong { color: inherit; font-size: 13.5px; }
.gu-tt-lai {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
  text-decoration: underline;
}
.gu-tt-lai:hover, .gu-tt-lai:focus-visible { text-decoration-thickness: 2px; }
/* Viền focus theo MÀU CHỮ (đo Chrome 22/09: viền mặc định trắng trên nền trắng 2,56 < 3). */
.gu-tt-lai:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   MẪU OWNER 29/09/2026 — ảnh "KHÔNG TẢI ĐƯỢC DỮ LIỆU": khung = MỘT MÀN HÌNH LAPTOP
   "chữ chỉ nằm chính giữa và kích thước chỉ nhỏ tầm cỡ ấy … không quá to … nguyên nền đen
   đó là màn hình laptop … khu vực chữ thông báo chỉ nằm cỡ đó."
   Đo trên ảnh mẫu (2000×1126): nhãn ở ~21% chiều cao, tiêu đề ~2,1% bề rộng, câu mô tả và
   "Liên hệ hỗ trợ" ~0,85%, nút "Thử lại" là viên thuốc nhỏ ~0,6%. Khối chữ căn GIỮA, nằm ở
   vùng trời tối phía trên — thành phố bên trái, nhà + gấu + robot bên phải không bị chữ đè.
   Cỡ chữ tính theo bề rộng KHUNG (cqw — lớp bọc .gu-tt-bao là container), có sàn để khung
   hẹp trong vùng nội dung vẫn đọc được. GIỮ biểu tượng trên nhãn (OWNER 29/09: mỗi trạng thái một biểu tượng + chữ riêng),
   chỉ thu cỡ cho cân với khối chữ nhỏ.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.gu-tt { aspect-ratio: 16 / 9; min-height: 340px; }
.gu-tt--toan-man { aspect-ratio: auto; }
.gu-tt__anh { object-position: center; }
.gu-tt__hinh { width: clamp(22px, 1.6cqw, 34px); height: clamp(22px, 1.6cqw, 34px); margin-bottom: .7em; }
.gu-tt--toan-man .gu-tt__hinh { width: clamp(24px, 1.6vw, 34px); height: clamp(24px, 1.6vw, 34px); }
.gu-tt__phu {
  background:
    linear-gradient(180deg, rgba(3, 5, 9, .72) 0%, rgba(3, 5, 9, .38) 34%, rgba(3, 5, 9, 0) 58%),
    radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(3, 5, 9, .55) 100%);
}
.gu-tt__noi { max-width: 40ch; }
@container gu-tt (min-width: 521px) {
  .gu-tt__noi { padding: clamp(28px, 10.5cqw, 240px) 24px 0; }
}
.gu-tt--toan-man .gu-tt__noi { padding: 21vh 24px 0; max-width: 40ch; }

/* nhãn trạng thái: viên thuốc mảnh, chữ thường, đỏ trên nền tối (đúng mẫu) */
.gu-tt__huy {
  font-size: clamp(11.5px, .85cqw, 16px); font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: .38em 1.05em; margin-bottom: 1.15em; gap: .55em;
  background: rgba(5, 7, 11, .55); color: var(--gu-chu-do-tren-toi);
  border: 1px solid rgba(219, 25, 32, .75);
}
.gu-tt__cham { width: .42em; height: .42em; box-shadow: none; }

/* tiêu đề: CHỮ HOA, phông hẹp đậm, một cỡ — không phóng to một phần */
.gu-tt__tieu {
  font-family: var(--hoa, 'Oswald', 'Anton', sans-serif); text-transform: uppercase;
  font-weight: 700; letter-spacing: .01em; line-height: 1.12; margin: 0 0 .5em;
  font-size: clamp(20px, 2.1cqw, 42px);
}
.gu-tt__manh { font-size: 1em; font-weight: inherit; }

.gu-tt__mo { font-size: clamp(12.5px, .85cqw, 17px); line-height: 1.45; color: var(--gu-text-tren-toi-2); max-width: 40ch; margin-bottom: 1.35em; }

.gu-tt__nut { gap: .95em; }
/* nút chính: viên thuốc NHỎ (mẫu) — không còn khối to 46px */
.gu-tt__chinh {
  font-size: clamp(10.5px, .62cqw, 13px); letter-spacing: .03em; padding: .8em 2.3em; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(219, 25, 32, .28);
}
.gu-tt__chinh:hover { filter: none; background: var(--gu-btn-primary-bg-hover); }
/* nút phụ: chỉ là CHỮ xám, không khối */
.gu-tt__phu-nut { font-size: clamp(12.5px, .85cqw, 16px); font-weight: 400; color: var(--gu-text-tren-toi-2); padding: .15em .4em; }
.gu-tt__phu-nut:hover { background: transparent; color: var(--gu-text-tren-toi); text-decoration: underline; }

/* toàn màn: khung là cả cửa sổ ⇒ tính theo vw */
.gu-tt--toan-man .gu-tt__huy { font-size: clamp(11.5px, .85vw, 16px); }
.gu-tt--toan-man .gu-tt__tieu { font-size: clamp(22px, 2.1vw, 42px); }
.gu-tt--toan-man .gu-tt__mo, .gu-tt--toan-man .gu-tt__phu-nut { font-size: clamp(12.5px, .85vw, 17px); }
.gu-tt--toan-man .gu-tt__chinh { font-size: clamp(10.5px, .62vw, 13px); }

/* màn hẹp (≤520): khung không ép 16:9 nữa (chữ cần chỗ), vẫn các cỡ nhỏ ở trên */
@container gu-tt (max-width: 520px) {
  .gu-tt { aspect-ratio: auto; min-height: 440px; }
  .gu-tt__chinh { width: auto; }
  /* điện thoại: chữ ở nửa trên (nền đen), cảnh dời xuống 36% dưới — không đè chữ lên nhà/linh vật */
  .gu-tt picture { top: 36%; }
  .gu-tt__anh { object-position: 60% 50%; }
}
/* (tiếp mẫu 29/09) Luật cũ `.gu-tt__nut a, .gu-tt__nut button` (0,1,1) mạnh hơn `.gu-tt__chinh` (0,1,0) ⇒ nút vẫn to 46px. */
.gu-tt__nut .gu-tt__chinh { font-size: clamp(10.5px, .62cqw, 13px); padding: .8em 2.3em; border-radius: 999px; gap: .5em; }
.gu-tt__nut .gu-tt__phu-nut { font-size: clamp(12px, .85cqw, 16px); padding: .15em .4em; border-radius: 6px; }
.gu-tt--toan-man .gu-tt__nut .gu-tt__chinh { font-size: clamp(10.5px, .62vw, 13px); }
.gu-tt--toan-man .gu-tt__nut .gu-tt__phu-nut { font-size: clamp(12.5px, .85vw, 16px); }
/* Khoảng cách gọn như mẫu: khối chữ là một cụm nhỏ, không trải dài xuống nhân vật. */
.gu-tt__hinh { margin-bottom: .5em; }
.gu-tt__huy { margin-bottom: .85em; }
.gu-tt__tieu { margin-bottom: .38em; }
.gu-tt__mo { margin-bottom: 1.05em; }
.gu-tt__nut { gap: .6em; }
/* Khung HẸP hơn màn laptop (vùng nội dung cạnh thanh bên): chữ có sàn cỡ nên cụm chữ chiếm tỉ lệ lớn hơn mẫu.
   Giữ đúng bố cục mẫu (chữ trên trời tối, nhân vật bên dưới) bằng cách dời VÙNG ẢNH xuống 15% và kéo khung cao hơn
   tương ứng — mép ảnh vốn đen, trùng nền khung (--gu-tt-nen), nên không lộ đường nối. */
@container gu-tt (min-width: 521px) and (max-width: 1199px) {
  .gu-tt:not(.gu-tt--toan-man) { aspect-ratio: 16 / 10.6; }
  .gu-tt:not(.gu-tt--toan-man) picture { top: 15%; }
  .gu-tt:not(.gu-tt--toan-man) .gu-tt__noi { padding-top: clamp(22px, 4.2cqw, 60px); }
}

/* Nút ĐÓNG của màn nhắc toàn màn (`toanMan({ dong: true })`) — OWNER 30/09/2026. */
.gu-tt__dong {
  position: fixed; top: var(--gu-sp-5); right: var(--gu-sp-5); z-index: 9001; /* trên lớp .gu-tt--toan-man (9000) */
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gu-surface-2) 80%, transparent); color: var(--gu-text-tren-toi);
}
.gu-tt__dong svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gu-tt__dong:hover { filter: brightness(1.25); }
.gu-tt__dong:focus-visible { outline: 2px solid var(--gu-lam); outline-offset: 2px; }