/* Token lấy nguyên từ bộ thiết kế trong man-hinh-fanpage/. Đổi màu hay bo góc thì sửa
   ở đây, đừng viết thẳng vào từng màn. */

:root {
  --cam: #C2410C;
  --cam-dam: #9A3412;
  --cam-nhat: #FFEDD5;

  /* Màu riêng của hai khu (ngày 13/10/2026): Fanpage giữ cam thương hiệu, Hộp thư xanh mòng két. */
  --mau-fanpage: #C2410C;
  --mau-hop-thu: #0F766E;

  --nen: #F7F8FA;
  --the: #FFFFFF;
  --vien: #E4E7EC;
  --vien-dam: #D3D8E0;
  --ke: #F0F2F5;

  --chu: #101720;
  --chu-than: #1F2A37;
  --chu-phu: #4A5765;
  --chu-mo: #98A2B3;

  --xanh: #047857;
  --xanh-nen: #ECFDF5;
  --vang: #B45309;
  --vang-nen: #FFFBEB;
  --vang-vien: #F5D9A8;
  --do: #B91C1C;
  --do-nen: #FEF2F2;

  --bong: 0 1px 2px rgba(16, 23, 32, .05), 0 6px 20px rgba(16, 23, 32, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu-than);
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}

a { color: var(--cam); text-decoration: none; }
a:hover { color: var(--cam-dam); }

/* ---- khung chung ---- */

.thanh-tren {
  background: var(--the);
  border-bottom: 1px solid var(--vien);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.than {
  max-width: 1440px;
  margin: 0 auto;
  padding: 34px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.the {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  padding: 22px 26px;
}

.the-noi { box-shadow: var(--bong); border-color: transparent; }

/* Thẻ gói cước trên màn chọn gói.

   Rê chuột lên là khung nổi lên và viền đổi màu. Không có phản hồi nào thì khách không
   biết cả khung là chỗ bấm được, họ chỉ dám bấm đúng cái nút nhỏ bên dưới. */
.the-goi {
  border: 2px solid var(--vien);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.the-goi:hover {
  border-color: var(--cam);
  box-shadow: var(--bong);
  transform: translateY(-3px);
}

.the-goi-dang-dung { border-color: var(--cam); }

/* Máy không có chuột thì không có trạng thái rê, và một thẻ tự nhấc lên rồi đứng yên ở đó
   trông như lỗi hiển thị. */
@media (hover: none) {
  .the-goi:hover { transform: none; box-shadow: none; }
  .the-goi:hover { border-color: var(--vien); }
  .the-goi-dang-dung:hover { border-color: var(--cam); }
}

.tieu-de-muc { font-size: 20px; font-weight: 700; color: var(--chu); margin: 0; }

/* ---- nút ---- */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--vien);
  background: var(--the);
  color: var(--chu);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.nut:hover:not(:disabled) { border-color: var(--vien-dam); }

.nut:disabled { opacity: .5; cursor: not-allowed; }

.nut-chinh {
  background: var(--cam);
  border-color: var(--cam);
  color: #fff;
}

.nut-chinh:hover:not(:disabled) { background: var(--cam-dam); border-color: var(--cam-dam); }

.nut-mo { color: var(--chu-phu); }

/* Bac giua giua nut chinh va nut thuong. Dung cho viec quan trong nhung khong phai viec
   chinh cua man hinh, vi du "Noi them Trang" khi da co Trang roi. Hai nut cam dac canh
   nhau thi khong nut nao con noi bat. */
/* Con quay bao dang chay. Viec nao mat hon vai giay ma man hinh dung im thi khach tuong
   treo, roi bam lai hoac dong trang giua chung. */
.quay {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--vien-dam);
  border-top-color: var(--cam);
  border-radius: 50%;
  animation: quay-vong .8s linear infinite;
}

.quay-to { width: 34px; height: 34px; border-width: 3px; }

@keyframes quay-vong { to { transform: rotate(360deg); } }

/* Ton trong nguoi dat may bao giam chuyen dong. Thay vi quay, no nhap nhe. */
@media (prefers-reduced-motion: reduce) {
  .quay { animation: quay-mo 1.4s ease-in-out infinite; }
  @keyframes quay-mo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

.nut-vien { border-color: var(--cam); color: var(--cam); }
.nut-vien:hover:not(:disabled) { border-color: var(--cam-dam); color: var(--cam-dam); }

/* Nut dang the <a> phai tu giu mau chu cua no.
   Luat a:hover o dau tep co do dac hieu cao hon .nut-chinh, nen re chuot len mot nut cam
   dac la chu trang bi doi thanh cam dam: chu trung mau nen, doc khong ra. */
a.nut { color: var(--chu); }
a.nut:hover { color: var(--chu); }
a.nut.nut-chinh, a.nut.nut-chinh:hover { color: #fff; }
a.nut.nut-vien { color: var(--cam); }
a.nut.nut-vien:hover { color: var(--cam-dam); }
a.nut.nut-mo, a.nut.nut-mo:hover { color: var(--chu-phu); }

.nut-nho { padding: 9px 14px; font-size: 14px; border-radius: 8px; font-weight: 500; }

/* ---- huy hiệu trạng thái ---- */

.huy-hieu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.huy-hieu::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.hh-tot { background: var(--xanh-nen); color: var(--xanh); }
.hh-cho { background: var(--vang-nen); color: var(--vang); }
.hh-chan { background: var(--do-nen); color: var(--do); }
.hh-mo   { background: var(--nen); color: var(--chu-phu); }

/* Huy hieu dung lam lien ket. Luat a { color: var(--cam) } o tren manh hon lop .hh-*,
   nen khong ghim lai thi huy hieu do bien thanh mau cam ngay khi no tro thanh the a. */
a.hh-tot, a.hh-tot:hover { color: var(--xanh); }
a.hh-cho, a.hh-cho:hover { color: var(--vang); }
a.hh-chan, a.hh-chan:hover { color: var(--do); }
a.hh-mo, a.hh-mo:hover { color: var(--chu-phu); }

/* Con quay co nho, dung ben trong mot huy hieu hay mot dong chu. */
.quay-nho { width: 12px; height: 12px; border-width: 2px; }

/* Con quay dat trong nut cam: vien mau cam tren nen cam la con quay vo hinh. */
.nut-chinh .quay { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }

/* Huy hieu co dau ve rieng ben trong thi bo cham tron mac dinh, khong de hai dau canh nhau. */
.huy-hieu:has(svg)::before { display: none; }

/* Huy hieu dung lam nut loc. The button tu dat nen va vien rieng, phai go de lop .hh-* con tac dung. */
button.huy-hieu { background-clip: padding-box; }

/* ---- lời nhắc ---- */

.nhac {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
}

.nhac-vang { background: var(--vang-nen); border: 1px solid var(--vang-vien); color: var(--vang); }
.nhac-do   { background: var(--do-nen); border: 1px solid #FBD5D5; color: var(--do); }

/* Lời nhắc đặt ngay dưới một ô nhập còn thiếu. Nhỏ hơn hộp .nhac vì nó nói về đúng một ô,
   không phải về cả màn, nhưng vẫn phải đủ đậm để mắt bắt được ngay sau khi bấm nút. */
.loi-o {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--do);
}
.nhac-xanh { background: var(--xanh-nen); border: 1px solid #A7F3D0; color: var(--xanh); }

/* ---- chữ ---- */

.phu { font-size: 14px; color: var(--chu-phu); }
.mo  { font-size: 13px; color: var(--chu-mo); }

/* Căn đều hai bên cho đoạn văn xuôi dài.

   Chỉ áp cho thẻ <p> và cho đoạn đủ dài. Căn đều một dòng ngắn hai ba chữ thì trình duyệt
   kéo giãn khoảng trắng ra thành những khe hở rất xấu, nên nhãn ô nhập, chữ trên nút và ô
   trong bảng đều để nguyên. */
p.phu, p.mo, .doan-van, .tt-dan, .tt-o-than, .tt-hoi-dap p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Trên màn hẹp thì bỏ căn đều: dòng ngắn quá, căn đều là khoảng trắng loang lổ. */
@media (max-width: 520px) {
  p.phu, p.mo, .doan-van, .tt-dan, .tt-o-than, .tt-hoi-dap p { text-align: left; }
}

/* 🔴 Nội dung mô hình sinh ra luôn hiện bằng văn bản thuần, giữ xuống dòng bằng CSS.
   Không bao giờ dựng nó thành HTML: một thẻ script lọt vào bài viết là chạy trong trình
   duyệt của khách. */
.noi-dung-bai {
  white-space: pre-wrap;
  font-size: 17px;
  line-height: 1.85;
  color: var(--chu-than);
}

/* ---- ô nhập ---- */

.o-nhap {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  font: inherit;
  color: var(--chu-than);
  background: var(--the);
  resize: vertical;
}

.o-nhap:focus { outline: 2px solid var(--cam); outline-offset: -1px; border-color: var(--cam); }

textarea.o-nhap { line-height: 1.8; }

/* ---- bảng ---- */

/* Bảng dùng chung cho mọi màn.

   🔴 Ô phải có khoảng đệm NGANG. Trước đây chỉ có đệm dọc, nên chữ của cột này dính vào
   chữ của cột bên cạnh, và bảng tám cột đọc ra thành một dãy số liền nhau. Chỗ này hỏng
   ở mọi màn cùng lúc vì mọi màn đều dùng lớp .bang.

   Ô đầu và ô cuối đệm rộng hơn: bảng hay nằm trong thẻ .the đặt padding 0 để cuộn ngang
   được, nên không nới thì chữ chạm thẳng vào viền khung. */
.bang { width: 100%; border-collapse: collapse; }

.bang th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-phu);
  padding: 16px 14px 10px;
  border-bottom: 1px solid var(--vien);
  white-space: nowrap;
}

.bang td {
  padding: 14px;
  border-bottom: 1px solid var(--ke);
  vertical-align: middle;
}

.bang tr:last-child td { border-bottom: none; }

/* Mép ngoài không đệm, vì thẻ bao quanh bảng thường đã có đệm sẵn. Đệm cả hai nơi thì
   cột đầu thụt vào so với tiêu đề ngay phía trên nó. */
.bang th:first-child, .bang td:first-child { padding-left: 0; }
.bang th:last-child, .bang td:last-child { padding-right: 0; }

/* Thẻ chứa nguyên một bảng: bỏ đệm của thẻ để bảng cuộn ngang được tới sát mép, rồi trả
   khoảng cách lại cho ô đầu và ô cuối. Dùng lớp riêng chứ không dò chuỗi style trong
   thuộc tính: dò chuỗi thì đổi một dấu cách là hỏng mà không ai biết. */
.the-bang { padding: 0; overflow-x: auto; }

.the-bang > .bang th:first-child,
.the-bang > .bang td:first-child { padding-left: 22px; }

.the-bang > .bang th:last-child,
.the-bang > .bang td:last-child { padding-right: 22px; }

/* Tiêu đề, dòng chú thích, nút phân trang nằm cùng thẻ với bảng thì nhận lại khoảng đệm của thẻ (ngày 14/10/2026: "Từng lượt Cuốn
   soạn" và dòng chú thích dưới bảng dính sát mép khung). Chỉ bảng được đi sát mép để cuộn ngang. */
.the-bang > :not(.bang) { margin-left: 26px; margin-right: 26px; }
.the-bang > :first-child:not(.bang) { margin-top: 20px; }
.the-bang > :last-child:not(.bang) { margin-bottom: 20px; }
.the-bang > :not(.bang) + .bang { margin-top: 8px; }
.the-bang > .bang + :not(.bang) { margin-top: 10px; }
@media (max-width: 640px) {
  .the-bang > :not(.bang) { margin-left: 18px; margin-right: 18px; }
  .the-bang > :first-child:not(.bang) { margin-top: 16px; }
  .the-bang > :last-child:not(.bang) { margin-bottom: 16px; }
}

/* ---- lịch tháng ---- */

.luoi-lich {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.o-lich {
  min-height: 96px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: var(--the);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}

.o-lich.trong { background: transparent; border-style: dashed; }
.o-lich.chan { border-color: var(--do); }
.o-lich a { font-weight: 600; }

/* Hôm nay: viền cam đậm và một vệt nền nhạt. Khách mở lịch giữa tháng thì câu hỏi đầu
   tiên luôn là "hôm nay là ô nào", và đếm theo hàng ngang là việc không ai muốn làm. */
.o-lich.hom-nay {
  border-color: var(--cam);
  border-width: 2px;
  background: var(--cam-nhat);
  padding: 7px 9px;
}

.o-lich.hom-nay .so-ngay { color: var(--cam); }

/* Ngày đã qua: nhạt đi, nhưng vẫn đọc được. Làm mờ hẳn thì khách tưởng hỏng, còn để
   nguyên thì cả tháng trông giống nhau và không thấy mình đang đứng ở đâu. */
.o-lich.da-qua { opacity: 0.55; background: var(--nen); }
.o-lich.da-qua.hom-nay { opacity: 1; }

.ngay-am { font-size: 11px; color: var(--cam); font-weight: 600; }

/* ---- màn hình nhỏ ----
   Khách mở điện thoại lúc tám giờ sáng giữa lúc bận. Chữ không được nhỏ đi, nút không
   được sát nhau: ngón tay cái bấm trượt là họ bỏ luôn việc duyệt bài hôm đó. */

@media (max-width: 640px) {
  .thanh-tren { padding: 12px 16px; }
  .than { padding: 18px 16px; gap: 16px; }
  .the { padding: 16px 18px; border-radius: 14px; }
  .tieu-de-muc { font-size: 18px; }
  .noi-dung-bai { font-size: 16px; line-height: 1.8; }

  /* Nút trên điện thoại cao hơn và chiếm hết bề ngang hàng của nó. */
  .nut { padding: 14px 18px; font-size: 15px; }
  .nut-nho { padding: 11px 14px; }

  .luoi-lich { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .o-lich { min-height: 64px; padding: 5px 6px; font-size: 11px; }

  /* Bảng nhiều cột không co lại được thì cho cuộn ngang trong khung của nó. */
  .bang { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- màn bài hôm nay ---- */

.khung-dien-thoai {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nut-to {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

.hang-nut {
  display: flex;
  gap: 9px;
}

.hang-nut > * { flex: 1 1 0; }

.anh-bai {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--cam-nhat);
  display: block;
}

/* ---- màn đăng nhập, đăng ký ---- */

.khung-hep {
  width: 100%;
  max-width: 420px;
}

.khung-hep .the { padding: 26px 28px; }

/* Nhãn của ô nhập. Đặt thành một lớp để mọi biểu mẫu trong hệ thống giống nhau, thay vì
   mỗi màn tự viết một kiểu rồi lệch dần. */
.nhan-o {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--chu);
  margin-bottom: 8px;
}

/* ---- menu quản trị ----
   Đóng mở bằng chính trình duyệt qua thẻ details, không cần mạch tương tác. */

.menu-quan-tri { position: relative; }

.menu-quan-tri > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.menu-quan-tri > summary::-webkit-details-marker { display: none; }

.menu-quan-tri > summary::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

.menu-quan-tri[open] > summary::after { transform: translateY(-2px) rotate(180deg); }

.menu-quan-tri-hop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 210px;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 12px;
  box-shadow: var(--bong);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.menu-quan-tri-hop a,
.menu-quan-tri-hop button {
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--chu);
  font-size: 14px;
}

.menu-quan-tri-hop a:hover { background: var(--nen); color: var(--chu); }

/* Nút đổi quán trông như một mục trong menu chứ không như một nút bấm: nó nằm cùng danh
   sách với các mục kia, và viền nút ở đây chỉ làm rối. */
.menu-quan-tri-hop button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.menu-quan-tri-hop button:hover:enabled { background: var(--nen); }

/* Quán đang mở: để đó cho thấy mình đang ở đâu, nhưng bấm vào không đi đâu cả. */
.menu-quan-tri-hop button:disabled { color: var(--chu-phu); cursor: default; font-weight: 600; }

/* ---- nút gạt tháng / năm ---- */

.gat-ky {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  background: var(--nen);
}

.gat-ky button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-phu);
  padding: 7px 16px;
  border-radius: 999px;
}

.gat-ky button.dang-chon {
  background: var(--the);
  color: var(--cam);
  box-shadow: var(--bong);
}

/* ============================================================================
   Trang tiếp thị: trang chủ, trang giá, trang câu hỏi thường gặp.

   Tiền tố .tt- cho cả khu này, vì ba trang đó mở cho người lạ và có nhịp riêng:
   chữ to hơn, khoảng trắng rộng hơn, và không có thanh điều hướng bên trái. Trộn
   vào lớp dùng chung thì sửa một chỗ là đổ cả hai bên.

   Bản thiết kế gốc dựng ở khổ 1440px cố định. Ở đây đổi sang lưới co giãn, vì
   phần lớn chủ quán mở trang này bằng điện thoại.
   ============================================================================ */

.tt { background: var(--the); color: var(--chu-than); }
.tt main { display: block; }

.tt-trong { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }

/* Thanh trên */
.tt-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  border-bottom: 1px solid var(--vien);
}

.tt-hieu {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700; color: var(--chu); text-decoration: none;
}
.tt-hieu-phu { font-weight: 500; color: var(--chu-phu); }

.tt-menu { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.tt-menu a { font-size: 15px; font-weight: 500; color: var(--chu-phu); text-decoration: none; }
.tt-menu a:hover { color: var(--cam-dam); }

.tt-nut {
  display: inline-block; padding: 13px 22px; border-radius: 10px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--vien-dam); color: var(--chu); background: var(--the);
}
.tt-nut:hover { border-color: var(--chu-mo); color: var(--chu); }
/* 🔴 Ghi màu chữ với !important vì luật `a { color: var(--cam) }` ở đầu tệp có cùng độ
   đặc hiệu và đứng trước, nên nút chính từng ra chữ cam trên nền cam: nhìn như chữ xám, và
   rê chuột vào thì cam đậm trên cam đậm, mất chữ hẳn. */
.tt-nut-chinh,
.tt-nut-chinh:link,
.tt-nut-chinh:visited { background: var(--cam); border-color: var(--cam); color: #FFFFFF !important; }
.tt-nut-chinh:hover,
.tt-nut-chinh:focus { background: var(--cam-dam); border-color: var(--cam-dam); color: #FFFFFF !important; }
.tt-nut-lon { padding: 17px 28px; font-size: 17px; }

/* Nhịp chữ */
.tt-nhan { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--cam); }
.tt-de-lon {
  font-size: clamp(34px, 6vw, 60px); font-weight: 700; line-height: 1.12;
  letter-spacing: -.03em; color: var(--chu); margin: 0; text-wrap: pretty;
}
.tt-de {
  font-size: clamp(27px, 4.2vw, 42px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.02em; color: var(--chu); margin: 0; text-wrap: pretty;
}
.tt-dan { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.65; color: var(--chu-phu); margin: 0; }

/* Mảng và lưới */
/* 🔴 padding-block chứ không phải padding viết tắt. Nhiều khối mang cả hai lớp
   .tt-trong và .tt-mang; viết tắt thì lớp nào khai sau xoá luôn lề ngang của lớp kia, và
   chữ dính sát mép màn hình. */
.tt-mang { padding-block: clamp(52px, 8vw, 88px); }
.tt-mang-xam { background: var(--nen); }
.tt-cot { display: flex; flex-direction: column; gap: 18px; }

.tt-luoi { display: grid; gap: 22px; }
.tt-luoi-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tt-luoi-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tt-luoi-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.tt-o {
  background: var(--the); border-radius: 14px; padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.tt-o-vien { border: 1px solid var(--vien); }
.tt-o-de { font-size: 18px; font-weight: 700; color: var(--chu); }
.tt-o-than { font-size: 15px; line-height: 1.65; color: var(--chu-phu); }

/* Hai cột phần mở đầu. Xuống một cột sớm, vì thẻ ảnh bên phải cần chỗ thở. */
.tt-mo-dau { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tt-mo-dau { grid-template-columns: 1.05fr .95fr; } }

.tt-gach { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; color: var(--chu-than); }
.tt-gach svg { flex-shrink: 0; margin-top: 3px; }

/* Thẻ gói */
.tt-goi {
  border: 1px solid var(--vien); border-radius: 18px; padding: 30px;
  display: flex; flex-direction: column; gap: 18px; position: relative; background: var(--the);
}
.tt-goi-noi { border: 2px solid var(--cam); background: #FFF7ED; }
.tt-goi-nhan {
  position: absolute; top: -13px; left: 28px; padding: 5px 14px; border-radius: 999px;
  background: var(--cam); color: #FFFFFF; font-size: 13px; font-weight: 600;
}
.tt-goi-ten { font-size: 20px; font-weight: 700; color: var(--chu); }
.tt-goi-gia {
  font-size: clamp(30px, 4vw, 38px); font-weight: 700; color: var(--chu); letter-spacing: -.02em;
}
.tt-goi-don { font-size: 15px; color: var(--chu-mo); }

/* Khối nhấn màu cam nhạt, dùng cho lời hứa và lời nói thật */
.tt-nhac {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 24px; background: #FFF7ED; border-radius: 14px;
  font-size: 15px; line-height: 1.7; color: var(--chu-than);
}

/* Chân trang */
.tt-chan { border-top: 1px solid var(--vien); background: var(--nen); margin-top: 20px; }
.tt-chan-trong {
  max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px;
  display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tt-chan-cot { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--chu-phu); }
.tt-chan-cot a { color: var(--chu-phu); text-decoration: none; }
.tt-chan-cot a:hover { color: var(--cam-dam); }
.tt-chan-cot p { margin: 0; line-height: 1.7; max-width: 320px; }
.tt-chan-de { font-weight: 700; color: var(--chu); }
.tt-chan-cuoi {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 32px;
  font-size: 14px; color: var(--chu-mo);
}

/* Thẻ tin Zalo ở phần mở đầu */
.tt-zalo {
  background: var(--nen); border: 1px solid var(--vien); border-radius: 20px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px; max-width: 420px; width: 100%;
}
.tt-zalo-trong {
  background: var(--the); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--bong);
}
.tt-zalo-anh {
  height: 150px; border-radius: 10px; background: var(--cam-nhat);
  display: flex; align-items: center; justify-content: center;
}
.tt-zalo-nut {
  flex-grow: 1; text-align: center; padding: 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; border: 1px solid var(--vien); color: var(--chu);
}
.tt-zalo-nut-chinh { background: var(--cam); border-color: var(--cam); color: #FFFFFF; }

/* Câu hỏi thường gặp */
.tt-hoi { border-top: 1px solid var(--vien); padding: 22px 0; }
.tt-hoi-de { font-size: 17px; font-weight: 700; color: var(--chu); margin-bottom: 8px; }
.tt-hoi-dap { font-size: 15px; line-height: 1.75; color: var(--chu-phu); }
.tt-hoi-dap p { margin: 0 0 10px; }
.tt-hoi-dap p:last-child { margin-bottom: 0; }

/* ---- khu tiếp thị trên màn hẹp ----
   Bản thiết kế gốc dựng ở khổ 1440px. Ba chỗ hỏng khi thu nhỏ: nút gọi hành động nhảy
   xuống một hàng riêng rồi phình hết bề ngang, đoạn văn dính sát lề, và thẻ gói mất đệm. */

@media (max-width: 860px) {
  /* Hàng một: dấu Cuốn bên trái, nút gọi hành động bên phải. Hàng hai: ba đường dẫn.
     Thứ tự đặt bằng order vì trong mã nguồn nút đứng sau nhóm đường dẫn. */
  .tt-nav { padding: 14px 18px; gap: 10px 12px; }
  .tt-hieu { order: 1; }
  .tt-nut-dau { order: 2; margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .tt-menu { order: 3; width: 100%; gap: 14px; justify-content: flex-start; font-size: 14px; }
  .tt-menu a { font-size: 14px; }

  .tt-trong { padding-inline: 18px; }
  .tt-mang { padding-block: 44px; }
  .tt-o { padding: 20px; }
  .tt-goi { padding: 24px; }
  .tt-nut-lon { padding: 14px 20px; font-size: 16px; }
  .tt-chan-trong { padding: 36px 18px 24px; gap: 24px; }
  .tt-chan-cuoi { padding: 0 18px 28px; }
}

@media (max-width: 520px) {
  .tt-nav { padding: 12px 16px; }
  .tt-menu { gap: 10px 14px; }
  .tt-nut-dau { padding: 8px 12px; font-size: 13px; }
  .tt-trong { padding-inline: 16px; }

  /* Nút gọi hành động chiếm hết bề ngang ở chỗ nó đứng một mình, cho ngón cái dễ bấm.
     Riêng nút trên thanh trên thì không, vì nó nằm cạnh mấy đường dẫn khác. */
  .tt-cot > .tt-nut-lon,
  .tt-cot > div > .tt-nut-lon { width: 100%; text-align: center; }
}

/* ---- thanh trên: hàng ngang trên máy tính, menu xổ trên điện thoại ---- */

.dau-cuon { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.thanh-muc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.thanh-muc > * { white-space: nowrap; }

/* Tên tài khoản hay là cả địa chỉ thư dài. Không cắt thì nó đẩy nút Thoát xuống hàng hai (người
   trực thấy ở khổ 1310px ngày 03/10/2026). Tên đầy đủ vẫn nằm trong thuộc tính title. */
.ten-tai-khoan { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* Khổ máy tính xách tay: khép khoảng cách giữa các mục cho hàng đủ mục còn vừa một dòng. */
@media (max-width: 1400px) {
  .thanh-muc { gap: 10px; }
}

/* Từ 1.101px tới 1.360px chỉ giữ biểu tượng Cuốn, bỏ chữ cạnh nó, để hàng đủ mục của người trực
   còn vừa một dòng. Dưới 1.101px đã là nút ba gạch, chữ hiện lại như cũ. */
@media (min-width: 1101px) and (max-width: 1360px) {
  .thanh-tren .dau-cuon > div { display: none; }
}

/* Nút ba gạch chỉ có mặt ở khổ hẹp. */
.menu-goi { display: none; position: relative; }
.menu-goi > summary { display: flex; align-items: center; gap: 0; }
.menu-goi > summary::after { display: none; }
.menu-goi > summary svg { display: block; }

.menu-ten {
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--chu);
  border-bottom: 1px solid var(--ke);
  margin-bottom: 4px;
  max-width: 230px;
  overflow-wrap: anywhere;
}

.menu-ke { height: 1px; background: var(--ke); margin: 4px 6px; }

/* Nhãn nhóm trong menu quản trị. Chữ nhỏ và nhạt: nó chỉ để mắt biết chỗ ngắt, không phải
   một mục bấm được. Có đường kẻ phía trên trừ nhóm đầu, vì nhóm đầu đã sát mép hộp. */
.menu-nhom {
  padding: 10px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chu-mo);
}

.menu-nhom + a { margin-top: 0; }
.menu-quan-tri-hop > .menu-nhom:not(:first-child) {
  border-top: 1px solid var(--ke);
  margin-top: 4px;
}

/* Hàng ngang đủ mục của người trực (thêm Quản trị, ô chọn tài khoản) rộng khoảng 1.250px. Dưới
   1.100px hàng ấy không còn vừa một dòng, nên đổi sang nút ba gạch từ đây chứ không đợi tới 900px. */
@media (max-width: 1100px) {
  .thanh-muc { display: none; }
  .menu-goi { display: block; }

  /* Menu bám mép phải màn hình và không tràn ra ngoài. */
  .menu-goi .menu-quan-tri-hop {
    right: 0;
    min-width: 230px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  /* Menu quản trị nằm lồng trong menu chính thì nó phải xổ theo chiều dọc ngay tại chỗ,
     chứ không nổi lên như một hộp riêng đè ra ngoài màn hình. */
  .menu-goi .menu-quan-tri { position: static; }
  .menu-goi .menu-quan-tri > summary { border: 0; background: none; padding: 10px 14px; font-size: 14px; }
  .menu-goi .menu-quan-tri .menu-quan-tri-hop {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 12px;
    max-height: none;
  }
}

/* ---- hàng nội dung và hàng nút, hai lối xếp hay lặp lại ----

   Viết thành lớp chứ không viết thẳng style vào thẻ, vì style nội tuyến thắng mọi quy tắc
   trong tệp này: đã viết vào thẻ rồi thì media query không kéo nó xuống cột được nữa. */

.the-hang { display: flex; align-items: center; gap: 18px; }

/* 🔴 Tên khác với .hang-nut vốn đã có ở trên. Lớp cũ đặt flex: 1 1 0 cho mọi con, tức
   chia đều bề ngang; dùng lại tên ấy cho một nhúm nút thường là mọi nút phình ra hết hàng,
   kể cả trên máy tính. Chuyện này đã xảy ra một lần với nút Lưu ở màn gói cước. */
.nhom-nut { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

@media (max-width: 720px) {
  /* Thẻ có ảnh đại diện, khối chữ và một nhúm nút: ở khổ hẹp ba khối ấy chen nhau tới mức
     mỗi nút còn vài chục pixel. Xuống cột thì nút nào cũng đủ chỗ cho ngón cái. */
  .the-hang { flex-direction: column; align-items: stretch; gap: 14px; }
  .the-hang > * { width: 100%; }

  /* Ảnh đại diện vẫn giữ hình vuông của nó, không kéo ngang ra. */
  .the-hang > .dau-tron { width: 50px; }

  .nhom-nut > .nut { flex: 1 1 auto; text-align: center; justify-content: center; }
}

@media (max-width: 480px) {
  /* Hẹp nữa thì mỗi nút một hàng. Hai nút nằm cạnh nhau ở khổ này thì chữ trên nút bị
     ngắt làm đôi, và nút hai chữ trông như hai nút. */
  .nhom-nut > .nut { flex: 1 1 100%; }
}

/* Trang bài: cột nội dung và cột giải thích. Dưới 900px thì xếp chồng, vì cột phải cố
   định 380px chiếm quá nửa màn hình điện thoại và cột trái không còn chỗ thở. */
.luoi-bai { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }

@media (max-width: 900px) {
  .luoi-bai { grid-template-columns: 1fr; }
}

/* Khối chỉ dành cho khổ điện thoại. Ẩn ở khổ rộng, hiện lại trong media query bên dưới.
   .chi-may-tinh là chiều ngược lại: một bảng nhiều cột hiện ở máy tính, còn trên điện thoại
   cùng dữ liệu ấy hiện thành thẻ trong một khối .chi-mobile. */
.chi-mobile { display: none; }

@media (max-width: 720px) {
  .chi-mobile { display: block; }
  .chi-may-tinh { display: none; }

  /* Lịch tháng đổi từ lưới bảy cột sang danh sách một cột.

     Bảy cột ở khổ 390px cho mỗi ô bốn mươi pixel, không đủ cho giờ đăng, tên nhóm, tóm tắt
     bài và huy hiệu trạng thái; chữ tràn ra ngoài và ô nọ chồng ô kia. Một cột thì mỗi
     ngày là một hàng rộng, đọc thẳng được. */
  .luoi-lich { grid-template-columns: 1fr; gap: 8px; }

  /* Tên thứ và ô đệm đầu tháng chỉ có nghĩa trong lưới bảy cột. */
  .luoi-lich > .ten-thu,
  .luoi-lich > div:empty { display: none; }

  /* Ngày không có bài thì ẩn, nếu không khách phải cuộn qua ba chục hàng trống mới thấy
     bài. Dòng nhắc ở đầu lịch đã nói rõ chuyện này. */
  .o-lich.trong { display: none; }

  .o-lich { min-height: 0; padding: 12px 14px; font-size: 14px; }
  .o-lich.hom-nay { padding: 11px 13px; }

  /* Số ngày to lên, vì trong danh sách một cột nó là thứ dẫn đường duy nhất. */
  .o-lich .so-ngay { font-size: 16px; }
}

/* ---- thanh tab ----
   Cuộn ngang trong lòng thanh, không đẩy cả trang ra. Che thanh cuộn đi vì nó chỉ dài vài
   pixel và trông như một vết bẩn; người dùng vuốt ngang là biết còn mục nữa. */

.thanh-tab {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--vien);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.thanh-tab::-webkit-scrollbar { display: none; }

/* Biến thể cho thanh tab ít mục: xuống hàng thay vì cuộn, để không mục nào bị giấu. */
.thanh-tab-xuong-hang { flex-wrap: wrap; overflow-x: visible; }
.thanh-tab-xuong-hang .muc-tab { white-space: normal; }

.muc-tab {
  padding: 12px 16px;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- vùng bấm của nút ----
   🔴 Nút phải đủ lớn cho ngón cái, nhưng chỉ nâng cỡ TRONG media query của điện thoại.

   Sửa thẳng lớp dùng chung là làm hỏng bản máy tính: một nút vốn ngắn gọn bị kéo cao lên
   và trông lệch hẳn so với mọi thứ quanh nó. Chuyện này đã xảy ra một lần rồi. */

@media (max-width: 640px) {
  .nut { min-height: 48px; padding: 14px 20px; font-size: 15px; }
  .nut-nho { min-height: 42px; padding: 11px 16px; }

  /* Ô nhập cũng vậy: ô thấp thì ngón tay chạm trượt xuống ô dưới. */
  .o-nhap { min-height: 46px; }
}

/* ---- kho ảnh ----
   Hai ảnh một hàng ở khổ điện thoại. Một cột thì mỗi ảnh chiếm trọn màn hình và khách phải
   cuộn rất lâu mới nhìn hết kho; ba cột thì ảnh nhỏ tới mức không nhận ra món gì. */

.luoi-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

@media (max-width: 640px) {
  .luoi-anh { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Ô tìm trên lịch tháng: ở khổ rộng nó nép về bên phải cạnh các thẻ lọc, ở khổ hẹp nó
   chiếm trọn một hàng. Ô tìm hẹp trên điện thoại chỉ đủ hiện bốn năm chữ, và khách gõ
   xong không đọc lại được mình vừa gõ gì. */
.o-tim-lich { flex: 0 1 240px; margin-left: auto; }

@media (max-width: 720px) {
  .o-tim-lich { flex: 1 1 100%; margin-left: 0; }
}

/* ---- màn quản trị Trang đã nối ---- */

/* Hàng số liệu đầu màn. Mỗi ô là một nút lọc: con số tổng nào cũng phải dẫn xuống được đúng
   danh sách tạo ra nó.

   Số cột cố định theo khổ chứ không để lưới tự co. Tự co thì ở khung rộng chừng 950px lưới
   chỉ xếp được năm ô, và ô thứ sáu rớt xuống một hàng một mình. Sáu ô chia đều sáu cột, ba
   cột hay hai cột thì không bao giờ lẻ. */
.luoi-o-so { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 900px) {
  .luoi-o-so { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.o-so {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: 12px;
  background: var(--the);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.o-so:hover { border-color: var(--vien-dam); }
.o-so-chon, .o-so-chon:hover { border-color: var(--cam); box-shadow: inset 0 0 0 1px var(--cam); }
.o-so-nhan { font-size: 13px; color: var(--chu-phu); }
.o-so-so { font-size: 20px; font-weight: 700; color: var(--chu); }

/* Hàng bộ lọc: hai ô tìm giãn theo chỗ trống, ô ngày và ô chọn giữ bề ngang vừa đủ.

   Ô ngày và ô chọn của trình duyệt tự cao hơn ô chữ vài pixel, nên xếp theo đáy thì nhãn
   phía trên lệch hàng. Xếp theo đỉnh và ghim cùng một chiều cao cho mọi ô thì nhãn thẳng
   hàng, còn nút Bỏ lọc tự hạ xuống ngang đáy các ô. */
.hang-loc-trang { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.hang-loc-trang .o-nhap { height: 48px; }
.o-loc-rong { flex: 1 1 220px; min-width: 0; }
.o-loc-ngay { flex: 0 1 170px; min-width: 0; }
.o-loc-chon { flex: 0 1 210px; min-width: 0; }
.o-loc-nut { flex: 0 0 auto; align-self: flex-end; }

/* Ảnh đại diện của Trang. Chữ cái đầu nằm dưới, ảnh đè lên trên. Đường dẫn ảnh của Facebook
   có hạn dùng; ảnh hỏng thì trình duyệt vẫn vẽ biểu tượng ảnh vỡ, nên thẻ img tự ẩn qua
   onerror và chữ cái đầu lộ ra. */
.dai-dien-trang {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cam-nhat);
  color: var(--cam);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dai-dien-trang img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.o-trang { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Bản điện thoại: mỗi Trang một thẻ, mỗi dòng thông tin một hàng nhãn và giá trị. */
.danh-sach-the { display: flex; flex-direction: column; gap: 12px; }
.the-trang-noi { display: flex; flex-direction: column; gap: 10px; }

.dong-thong-tin {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--ke);
}

.dong-thong-tin > :first-child { color: var(--chu-mo); flex-shrink: 0; }
.dong-thong-tin > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  /* Hai ô ngày nằm cạnh nhau, ô chọn và nút bỏ lọc mỗi thứ một hàng cho ngón cái dễ bấm. */
  .o-loc-ngay { flex: 1 1 140px; }
  .o-loc-chon { flex: 1 1 100%; }
  .o-loc-nut { flex: 1 1 100%; }
  .o-loc-nut > .nut { width: 100%; }

  .luoi-o-so { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---- trang bài: cột phải và bản xem trước như trên Facebook ---- */

/* Cột phải của trang bài gồm hai thẻ xếp chồng. min-width 0 để ô lưới được co nhỏ hơn nội
   dung của nó; thiếu dòng này thì một đường dẫn dài trong bài đẩy cả cột tràn ra ngoài. */
.cot-bai-phu { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Màu lấy theo bảng tin Facebook chứ không theo màu Cuốn: khách cần thấy bài của mình trông
   ra sao ở chỗ người theo dõi sẽ đọc nó. container-type để ảnh đơn tính chiều cao tối đa
   theo bề ngang của chính khung này, không theo bề ngang màn hình. */
.xt {
  --xt-chu: #050505;
  --xt-phu: #65676B;
  --xt-ke: #CED0D4;
  --xt-nen-phu: #E4E6EB;
  --xt-lien-ket: #0064D1;
  container-type: inline-size;
  background: #FFFFFF;
  border: 1px solid var(--vien);
  border-radius: 10px;
  overflow: hidden;
  color: var(--xt-chu);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.xt-dau { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }

/* Chữ cái đầu nằm dưới, ảnh đè lên trên, cùng lối với ảnh đại diện ở màn quản trị. */
.xt-dai-dien {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--xt-nen-phu);
  color: var(--xt-phu);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xt-dai-dien img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.xt-ten-khoi { flex: 1 1 auto; min-width: 0; }
.xt-ten { font-size: 15px; font-weight: 600; line-height: 1.33; overflow-wrap: anywhere; }
.xt-gio { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--xt-phu); }
.xt-ba-cham { flex-shrink: 0; color: var(--xt-phu); }

/* Giữ xuống dòng của bài bằng CSS, không dựng HTML. */
.xt-chu {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.34;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Bài chỉ có chữ và ngắn thì Facebook hiện chữ to. */
.xt-chu-to { font-size: 24px; line-height: 1.25; }

/* Bài dài thu lại năm dòng kèm nút Xem thêm, như bảng tin. */
.xt-chu-gon {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  padding-bottom: 0;
}

.xt-xem-them {
  display: block;
  margin: 4px 16px 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--xt-chu);
  cursor: pointer;
}

.xt-the { color: var(--xt-lien-ket); }

/* Lưới ảnh sáu phần: hai ảnh chia ba phần mỗi ảnh, ba ảnh ở hàng dưới chia hai phần mỗi
   ảnh. Một lưới cho mọi cách xếp từ một tới năm ảnh. */
.xt-anh { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.xt-o-anh { position: relative; overflow: hidden; background: var(--xt-nen-phu); }
.xt-o-anh img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ảnh đơn giữ tỉ lệ thật của nó, nhưng không cao quá khung dọc 4:5 như bảng tin. */
.xt-anh-1 .xt-o-anh { grid-column: span 6; }
.xt-anh-1 .xt-o-anh img { height: auto; max-height: 500px; max-height: 125cqw; }

.xt-anh-2 .xt-o-anh { grid-column: span 3; aspect-ratio: 1; }

.xt-anh-3 .xt-o-anh:first-child { grid-column: span 6; aspect-ratio: 16 / 10; }
.xt-anh-3 .xt-o-anh:not(:first-child) { grid-column: span 3; aspect-ratio: 1; }

.xt-anh-4 .xt-o-anh { grid-column: span 3; aspect-ratio: 1; }

.xt-anh-5 .xt-o-anh:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 1; }
.xt-anh-5 .xt-o-anh:nth-child(n+3) { grid-column: span 2; aspect-ratio: 1; }

.xt-con-nua {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 600;
}

.xt-video video { display: block; width: 100%; max-height: 500px; max-height: 125cqw; background: #000; }

/* Hàng Thích, Bình luận, Chia sẻ. Chỉ để nhìn, không bấm được. */
.xt-hanh-dong { display: flex; margin: 0 12px; padding: 4px 0; border-top: 1px solid var(--xt-ke); }

.xt-hanh-dong > span {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-phu);
  white-space: nowrap;
}

/* ---- màn quản trị Mô hình tạo ảnh ---- */

/* Ba thẻ mức chất lượng. Ba cột trên máy tính; dưới 1000px một cột, vì hai cột thì thẻ thứ ba
   lẻ một mình, và mỗi thẻ có ô nhập cần đủ bề ngang. */
.luoi-muc-anh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

@media (max-width: 1000px) {
  .luoi-muc-anh { grid-template-columns: 1fr; }
}

.the-muc-anh { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.the-muc-do { border-color: var(--do); }
.hang-dau-muc { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Hai ô nhập cạnh nhau trong một thẻ. */
.hai-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }

.o-danh-dau { display: flex; align-items: center; gap: 9px; min-height: 48px; font-size: 14px; color: var(--chu-phu); cursor: pointer; }

/* Khối biên: nền xám nhạt, đổi sang nền đỏ nhạt khi biên xuống dưới ngưỡng. */
.khoi-bien { background: var(--nen); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.7; color: var(--chu-phu); }
.khoi-bien-do { background: var(--do-nen); color: var(--do); }

/* Mã mô hình theo cách gọi của nhà cung cấp: chữ đều nét, cho xuống dòng ở bất kỳ đâu vì mã
   dài và không có dấu cách. */
.chu-may { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }

.lich-su-gia summary { cursor: pointer; font-size: 13px; color: var(--chu-phu); }
.lich-su-gia > div { margin-top: 6px; }

/* Lưới ô nhập của phần sửa mô hình. */
.luoi-o-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }

@media (max-width: 480px) {
  .hai-o { grid-template-columns: 1fr; }
}

/* ---- màn Khách hàng: khung đặt lại mật khẩu hộ khách ---- */

.khung-mat-khau { margin: 0; display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--cam); white-space: normal;
                  position: sticky; left: 22px; max-width: calc(min(100vw, 1440px) - 150px); }
.dong-nguoi-mat-khau { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--vien); padding-top: 12px; }

/* Bảng khách hàng cuộn ngang khi cửa sổ hẹp, kể cả trên máy tính. Khung nằm trong một ô trải
   hết bảng, nên ghim nó ở mép trái và giới hạn bề ngang theo khung chứa của trang (rộng tối đa
   1440px, đệm 40px mỗi bên), kẻo phải cuộn ngang mới đọc hết. Điện thoại đệm hẹp hơn. */
@media (max-width: 720px) {
  .khung-mat-khau { position: sticky; left: 12px; max-width: calc(100vw - 76px); }
  .dong-nguoi-mat-khau > .nhom-nut { flex: 1 1 100%; }
}

/* Nút dạng chữ, đặt dưới một dòng thông tin trong ô bảng mà không làm bảng rộng thêm.
   Trên điện thoại nâng vùng bấm lên cỡ ngón tay. */
.nut-chu { background: none; border: 0; padding: 6px 0 0; color: var(--cam); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .nut-chu { min-height: 44px; padding-top: 0; }
}

/* ---- trang tạo ảnh và sửa ảnh bằng AI ---- */

.khung-tao-anh { display: flex; flex-direction: column; gap: 16px; }
.nhom-the-tab { display: flex; gap: 10px; flex-wrap: wrap; }

/* Thẻ chọn: mức chất lượng, việc sửa. Cả thẻ là vùng bấm, không riêng nút tròn nhỏ. */
.luoi-muc-khach { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.luoi-viec-sua { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.the-chon { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--vien);
            border-radius: 12px; cursor: pointer; background: #fff; line-height: 1.5; }
.the-chon.dang-chon { border-color: var(--cam); background: var(--cam-nhat); }
.the-chon input { margin-top: 4px; flex-shrink: 0; }
.gia-muc { display: block; margin-top: 4px; font-weight: 700; color: var(--cam); font-size: 14px; }

.luoi-anh-chon { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.o-anh-chon { position: relative; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
              background: var(--cam-nhat); cursor: pointer; aspect-ratio: 1 / 1; }
.o-anh-chon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-anh-chon.dang-chon { border-color: var(--cam); box-shadow: 0 0 0 2px var(--cam); }
.anh-goc-lon { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; align-self: flex-start; background: var(--nen); }

.hang-sua-mien-phi, .hang-goi-y { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.o-doi-khung { width: auto; min-width: 240px; }

.luoi-anh-ai { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.o-anh-ket-qua { position: relative; display: flex; flex-direction: column; gap: 8px; }
.o-anh-ket-qua img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--nen); display: block; }
.dau-ai { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px;
          font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.dau-goc { background: var(--cam); }
.dong-lich-su-anh { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--vien); padding-top: 12px; }

@media (max-width: 720px) {
  .nhom-the-tab > .nut { flex: 1 1 0; }
  .luoi-anh-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .luoi-anh-chon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hang-sua-mien-phi > .nut { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .o-doi-khung { width: 100%; min-width: 0; }
  .o-anh-ket-qua .nhom-nut > .nut { flex: 1 1 100%; }
}

/* ---- màn quản trị lượt tạo ảnh AI ---- */

.luoi-o-so.luoi-o-so-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.khoi-tien-anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.khoi-tien-anh > div { display: flex; flex-direction: column; gap: 2px; }
.khoi-tien-anh strong { font-size: 18px; color: var(--chu); }
.hai-cot-anh-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dong-bam { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none;
            border: 0; border-top: 1px solid var(--vien); padding: 10px 0; cursor: pointer; font: inherit; color: var(--chu); flex-wrap: wrap; }
.dong-bam:hover { color: var(--cam); }
.mo-ta-cat { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }
.khung-chi-tiet-anh { display: flex; flex-direction: column; gap: 14px; background: var(--nen); border-radius: 12px; padding: 16px; white-space: normal; }
.luoi-chi-tiet { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; }
.luoi-chi-tiet > div { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.o-chu-dai { background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; line-height: 1.6;
             white-space: pre-wrap; overflow-wrap: anywhere; }
.luoi-anh-quan-tri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.o-anh-quan-tri { display: flex; flex-direction: column; gap: 4px; }
.o-anh-quan-tri img, .anh-da-don { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #fff; }
.anh-da-don { display: flex; align-items: center; justify-content: center; color: var(--chu-mo); font-size: 13px; border: 1px dashed var(--vien); }

@media (max-width: 720px) {
  .luoi-o-so.luoi-o-so-4, .khoi-tien-anh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hai-cot-anh-ai { grid-template-columns: 1fr; }
  .mo-ta-cat { max-width: none; }
  .luoi-anh-quan-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.luoi-kieu-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
@media (max-width: 720px) { .luoi-kieu-anh { grid-template-columns: 1fr; } }

.luoi-goi-y { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.luoi-goi-y .the-chon { text-align: left; font: inherit; color: var(--chu); }
.luoi-kieu-khach { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dong-anh-mau { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--vien); }
.dong-anh-mau > img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--nen); }
.cot-anh-mau { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hang-them-mau { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hang-them-mau .o-nhap { flex: 1 1 240px; }
@media (max-width: 720px) {
  .luoi-kieu-khach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dong-anh-mau > img { width: 64px; height: 64px; }
  .hang-them-mau > .nut { flex: 1 1 100%; }
}

/* Thẻ sửa ảnh: bên trái so trước và sau, bên phải là nút sửa. Cột so sánh dính khi cuộn trên máy
   tính, để khách bấm nút ở cột phải mà vẫn nhìn thấy kết quả. */
.ban-sua-anh { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cot-so-sanh { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.cot-cong-cu { display: flex; flex-direction: column; gap: 16px; }
.hai-anh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hai-anh figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hai-anh figcaption { font-size: 13px; font-weight: 700; color: var(--chu-phu); }
.hai-anh img, .o-cho-sau { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 12px; background: var(--nen); display: block; }
.o-cho-sau { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center;
             padding: 12px; color: var(--chu-mo); font-size: 13px; border: 1px dashed var(--vien); box-sizing: border-box; }
.khung-chon-anh { display: flex; flex-direction: column; gap: 10px; }
.hang-tab-anh, .hang-trang-anh { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hang-trang-anh { justify-content: space-between; }
.khoi-trang-thai { display: flex; flex-direction: column; gap: 8px; }
.khoi-trang-thai:empty { display: none; }
.khoi-ket-qua-tao { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--vien); padding-top: 16px; }

@media (max-width: 900px) {
  .ban-sua-anh { grid-template-columns: 1fr; }
  .cot-so-sanh { position: static; }
}
@media (max-width: 720px) {
  .hang-tab-anh > .nut { flex: 1 1 0; }
  .hang-trang-anh > .nut { flex: 1 1 0; }
  .hang-trang-anh > .mo { flex: 1 1 100%; text-align: center; order: -1; }
}

/* Khối chấm bài và chấm ảnh AI. Trên điện thoại ba nút xếp dọc, mỗi nút chiếm hết bề ngang,
   cùng cỡ với các nút khác trên màn; trên máy tính ba nút nằm một hàng. */
.khoi-cham { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ke); }
.khoi-cham-gon { border-top: none; padding-top: 4px; }
.cau-hoi-cham { font-size: 15px; font-weight: 700; color: var(--chu); }
.hang-cham { display: flex; gap: 10px; flex-wrap: wrap; }
.nut.nut-chon, .nut.nut-chon:hover { background: var(--cam); border-color: var(--cam); color: #fff; }
.vung-ly-do { display: flex; flex-direction: column; gap: 10px; }
.hang-ly-do { display: flex; flex-wrap: wrap; gap: 8px; }
.o-ly-do { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 40px;
           border: 1px solid var(--vien); border-radius: 999px; font-size: 14px; color: var(--chu);
           background: var(--the); cursor: pointer; line-height: 1.35; }
.o-ly-do input { accent-color: var(--cam); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.o-ly-do-chon { border-color: var(--cam); background: var(--cam-nhat); }
.nhan-ghi-chu { font-size: 13px; color: var(--chu-phu); }
.cham-xong { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--chu-phu); }

@media (max-width: 640px) {
  .hang-cham { flex-direction: column; }
  .hang-cham .nut { width: 100%; justify-content: center; }
  .o-ly-do { width: 100%; border-radius: 10px; }
}
.o-anh-va-cham { display: flex; flex-direction: column; gap: 10px; }

/* Chấm cam cạnh mục menu khi Cuốn đã trả lời thư mà khách chưa đọc. */
.cham-cam { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%;
            background: var(--cam); vertical-align: middle; }
/* Bản chỉ có chấm, gắn ở góc nút ba gạch điện thoại; nút làm mốc cho chấm. */
.menu-goi > summary { position: relative; }
.cham-tren-nut { position: absolute; top: 4px; right: 4px; margin: 0; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--nen, #fff); }

/* Hộp thư hỗ trợ, phía khách và phía người trực. Dựng cho điện thoại trước. */
.trang-ho-tro { display: flex; flex-direction: column; gap: 16px; }
.khoi-bieu-mau-ho-tro { display: flex; flex-direction: column; gap: 14px; }
.nhom-loai-ho-tro { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nhom-loai-ho-tro legend { margin-bottom: 8px; }
.danh-sach-thu { display: flex; flex-direction: column; }
.dong-thu { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--ke);
            color: var(--chu); text-decoration: none; }
.dong-thu:first-child { border-top: 0; padding-top: 0; }
.dong-thu:hover strong { color: var(--cam); }
.dong-thu-dau { display: flex; align-items: center; gap: 4px; }
.luong-thu { display: flex; flex-direction: column; gap: 12px; }
.thu-mot { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px;
           background: var(--the); border: 1px solid var(--vien); max-width: 720px; }
.thu-cuon { background: var(--cam-nhat); border-color: transparent; }
.thu-he-thong { background: var(--nen); border-style: dashed; }
.thu-dau { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--chu-phu); }
.thu-than { white-space: pre-wrap; word-break: break-word; line-height: 1.6; color: var(--chu); }
.anh-thu { display: flex; gap: 8px; flex-wrap: wrap; }
.anh-thu img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vien); }
.o-tra-loi { display: flex; flex-direction: column; gap: 8px; }
.hai-cot-ho-tro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.khung-tai-khoan { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

@media (max-width: 900px) {
  .hai-cot-ho-tro { grid-template-columns: minmax(0, 1fr); }
  /* Ô trả lời dính đáy màn hình trên điện thoại, để ngón cái với tới mà không phải cuộn. */
  .o-tra-loi-dinh { position: sticky; bottom: 0; z-index: 5; background: var(--the);
                    padding: 10px 0 12px; border-top: 1px solid var(--ke); }
  .o-tra-loi-dinh .nut { min-height: 48px; }
}

/* Màn chọn cách học giọng sau khi nối Trang: bốn thẻ ngang hàng, điện thoại thành một cột. */
.luoi-hoc-giong { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.the-chon-hoc { display: flex; flex-direction: column; gap: 10px; }
.the-chon-hoc p { margin: 0; line-height: 1.7; flex-grow: 1; }
.the-chon-hoc .nut { align-self: flex-start; }
.ten-chon-hoc { font-size: 16px; font-weight: 700; color: var(--chu); }
@media (max-width: 640px) { .the-chon-hoc .nut { align-self: stretch; justify-content: center; } }

/* Màn Đặt bài theo ý: ba ô Số ngày, Ngày bắt đầu, Khung giờ nằm một hàng ở máy tính.
   Ô xổ xuống thay cho hàng nút, vì hàng nút làm rớt dòng (góp ý ngày 01/10/2026). */
.luoi-dat-bai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hang-o-gon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.o-gon { max-width: 260px; }
.o-so-ngay { width: 90px; }
@media (max-width: 760px) { .luoi-dat-bai { grid-template-columns: 1fr; } .o-gon { max-width: none; } }

/* Ba cách lên lịch, dùng ở màn duyệt hồ sơ giọng và màn Lịch tháng. */
.khoi-xep-lich { display: flex; flex-direction: column; gap: 12px; }
.chon-xep { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--vien);
            border-radius: 12px; cursor: pointer; line-height: 1.6; }
.chon-xep > span { display: flex; flex-direction: column; gap: 2px; }
.chon-xep input { margin-top: 5px; width: 18px; height: 18px; flex-shrink: 0; }
.chon-xep.dang-chon { border: 2px solid var(--cam); padding: 11px 13px; }
.o-ngay-xep { display: flex; flex-direction: column; gap: 6px; max-width: 260px; }


/* Menu Quản trị có menu con (góp ý ngày 01/10/2026). Máy tính: bốn tên nhóm, rê chuột hoặc
   Tab vào nhóm thì menu con mở sang trái. Điện thoại: bốn thẻ bấm để xổ. */
.menu-qt-dien-thoai { display: none; }
.menu-qt-hop { min-width: 230px; }
.menu-qt-nhom { position: relative; border-radius: 8px; outline: none; }
.menu-qt-ten { display: flex; justify-content: space-between; align-items: center; gap: 12px;
               padding: 10px 14px; border-radius: 8px; font-size: 14px; color: var(--chu); cursor: pointer; }
.menu-qt-nhom:hover > .menu-qt-ten, .menu-qt-nhom:focus-within > .menu-qt-ten { background: var(--nen); }
.menu-qt-con { display: none; position: absolute; top: -7px; right: 100%; min-width: 230px; z-index: 31;
               background: var(--the); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong);
               padding: 6px; flex-direction: column; }
.menu-qt-con a { padding: 10px 14px; border-radius: 8px; color: var(--chu); font-size: 14px; white-space: nowrap; }
.menu-qt-con a:hover { background: var(--nen); }
.menu-qt-nhom:hover > .menu-qt-con, .menu-qt-nhom:focus-within > .menu-qt-con { display: flex; }
.menu-qt-nhom-dt > summary { list-style: none; }
.menu-qt-nhom-dt > summary::-webkit-details-marker { display: none; }
.menu-qt-nhom-dt > summary::after { content: "+"; color: var(--chu-phu); }
.menu-qt-nhom-dt[open] > summary::after { content: "−"; }
.menu-qt-nhom-dt > a { display: block; padding: 9px 14px 9px 26px; font-size: 14px; color: var(--chu); }
@media (max-width: 900px) {
  .menu-qt-may-tinh { display: none; }
  .menu-qt-dien-thoai { display: block; }
}

.menu-qt-tong-quan { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
                     color: var(--chu); border-bottom: 1px solid var(--ke); margin-bottom: 4px; }
.menu-qt-tong-quan:hover { background: var(--nen); }

/* Màn Kế hoạch nội dung (03/10/2026). */
.khung-chu-de { display: flex; flex-direction: column; gap: 14px; border: 2px solid var(--cam); }
.nhom-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.danh-sach-chu-de { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.the-chu-de { display: flex; flex-direction: column; gap: 10px; }
.the-chu-de .huy-hieu { white-space: nowrap; flex-shrink: 0; }
.chu-de-tat { opacity: .65; }
.o-thu { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--vien); border-radius: 10px; cursor: pointer; }
.o-thu input { width: 18px; height: 18px; }
.khung-y { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ke); padding-top: 10px; }
.dong-y { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--ke); }
.y-da-dung span:first-child { color: var(--chu-phu); text-decoration: line-through; }
.luoi-xem-truoc { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.o-xem-truoc { min-height: 64px; padding: 6px 8px; border: 1px solid var(--vien); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--chu); overflow-wrap: anywhere; }
.o-xem-truoc.trong { background: var(--nen); color: var(--chu-phu); }
.o-xem-truoc .so-ngay { font-size: 12px; color: var(--chu-phu); font-weight: 600; }
.o-xem-truoc .thu-trong-o { display: none; }
.o-xem-truoc .nhan-o-xem { font-size: 11px; font-weight: 600; color: var(--chu-phu); white-space: nowrap; flex-shrink: 0; }
.o-xem-truoc.vuot-goi { background: var(--nen); border-style: dashed; color: var(--chu-phu); }
.o-xem-truoc.vuot-goi .nhan-o-xem { color: var(--do); }
@media (max-width: 640px) {
  .danh-sach-chu-de { grid-template-columns: 1fr; }

  /* Bảy cột ở khổ 390px làm tên chủ đề gãy từng mẩu, ngày 20/10 gãy thành "20/1" và "0". Đổi
     sang danh sách như Lịch tháng: mỗi ngày một hàng, ghi thứ ngay cạnh ngày. */
  .luoi-xem-truoc { grid-template-columns: 1fr; gap: 4px; }
  .luoi-xem-truoc > .ten-thu,
  .luoi-xem-truoc > div:empty { display: none; }
  .o-xem-truoc { min-height: 0; flex-direction: row; align-items: baseline; gap: 10px; padding: 8px 12px; font-size: 14px; }
  .o-xem-truoc .so-ngay { flex: 0 0 88px; font-size: 13px; }
  .o-xem-truoc .thu-trong-o { display: inline; }
}

/* Màn Tổng quan (/tong-quan). Hai khối Fanpage và Hộp thư cạnh nhau trên máy tính, xếp dọc trên điện thoại. */
.luoi-tong-quan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.dong-viec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--vien);
             border-radius: 10px; color: var(--chu); text-decoration: none; min-height: 44px; }
.dong-viec > span { min-width: 0; }
.dong-viec-trang { flex-wrap: wrap; }
.dong-viec:hover { border-color: var(--cam); }
.cham-viec { width: 8px; height: 8px; border-radius: 999px; background: var(--vang); flex-shrink: 0; }
.cham-viec.gap { background: var(--do); }

/* Thanh tiến độ bước làm quen (ThanhLamQuen). Trên điện thoại cuộn ngang trong khung, không tràn màn. */
.thanh-lam-quen { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.thanh-lam-quen li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
                     background: var(--nen); color: var(--chu-phu); white-space: nowrap; font-size: 14px; }
.thanh-lam-quen .so-buoc { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center;
                           justify-content: center; background: var(--vien); font-weight: 700; font-size: 12px; }
.thanh-lam-quen li.dang { background: var(--cam-nhat); color: var(--chu); font-weight: 700; }
.thanh-lam-quen li.dang .so-buoc { background: var(--cam); color: #fff; }
.thanh-lam-quen li.xong .so-buoc { background: var(--xanh-nen); color: var(--xanh); }
@media (max-width: 640px) {
  /* Khổ hẹp: bước khác chỉ hiện số, để bốn bước vừa một hàng, không thanh cuộn. */
  .thanh-lam-quen li:not(.dang) > span:last-child { display: none; }
  .thanh-lam-quen li:not(.dang) { padding-right: 6px; }
}

/* Khung trò chuyện minh hoạ ở trang giới thiệu Hộp thư. */
.tin-khach, .tin-cuon { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; max-width: 88%; }
.tin-khach { align-self: flex-start; background: var(--nen); color: var(--chu); border-bottom-left-radius: 4px; }
.tin-cuon { align-self: flex-end; background: var(--cam-nhat); color: var(--chu); border-bottom-right-radius: 4px;
            display: flex; flex-direction: column; gap: 6px; }
.tin-chuyen { background: var(--vang-nen); }
.tin-nhan-nguon { font-size: 12px; color: var(--chu-phu); }

/* Blazor đặt con trỏ vào h1 sau mỗi lần chuyển trang (FocusOnNavigate) cho trình đọc màn hình. Viền tập trung của trình
   duyệt khi đó chỉ là khung đen quanh tiêu đề, không phải thứ khách vừa bấm. */
h1[tabindex="-1"]:focus { outline: none; }

/* Màn Tin nhắn của Hộp thư: hai cột trên máy tính, một cột trên điện thoại. */
.hop-thu-tin { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; align-items: start; }
.hop-thu-tin .cot-danh-sach { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hop-thu-tin .cot-cuoc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dong-cuoc { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--vien);
             border-radius: 10px; background: var(--nen-the, #fff); cursor: pointer; min-height: 44px; font: inherit; color: var(--chu); }
.dong-cuoc.dang-chon { border-color: var(--cam); box-shadow: 0 0 0 1px var(--cam); }
.dong-cuoc .cau-cuoi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khung-tin { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.nut-quay-lai { display: none; }
@media (max-width: 860px) {
  .hop-thu-tin { grid-template-columns: 1fr; }
  .hop-thu-tin.dang-mo-cuoc .cot-danh-sach { display: none; }
  .hop-thu-tin:not(.dang-mo-cuoc) .cot-cuoc { display: none; }
  .nut-quay-lai { display: inline-flex; }
}
/* Trong màn Tin nhắn, khung tin nằm trên nền trang: tin khách cần nền trắng và viền để thấy rõ khung. */
.khung-tin .tin-khach { background: var(--the); border: 1px solid var(--vien); }

/* Dấu chấm hỏi giải thích (GoiThich): rê chuột hoặc chạm thì hiện câu dài hơn. */
.goi-thich { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
  margin-left: 2px; border-radius: 50%; border: 1px solid var(--vien); color: var(--chu-phu); font-size: 9px; font-weight: 700;
  cursor: help; vertical-align: super; line-height: 1; top: -1px; }
.goi-thich:focus { outline: 2px solid var(--cam); outline-offset: 1px; }
.goi-thich-chu { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(260px, 80vw); padding: 8px 10px; border-radius: 8px; background: var(--chu); color: var(--the, #fff);
  font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.goi-thich:hover .goi-thich-chu, .goi-thich:focus .goi-thich-chu { display: block; }
/* Có JavaScript (ngày 16/10/2026): app.js chép câu giải thích vào một ô chung gắn vào body, nên khung bảng hay khung có transform không
   che được; câu gốc trong dấu ? thôi hiện. Không có JavaScript thì câu gốc hiện như cũ. */
.co-js .goi-thich:hover .goi-thich-chu, .co-js .goi-thich:focus .goi-thich-chu { display: none; }
.goi-thich-noi-chung { display: none; position: fixed; z-index: 1000; width: max-content; max-width: min(260px, 80vw); padding: 8px 10px;
  border-radius: 8px; background: var(--chu); color: var(--the, #fff); font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left;
  white-space: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); pointer-events: none; }

/* Số đếm nhỏ ở góc trên nút lọc của màn Tin nhắn. */
.nut-co-dem { position: relative; overflow: visible; }
.nut-dem { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--cam); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

/* "Cuốn đang soạn câu trả lời..." trong khung chat, ba chấm nhảy lần lượt. */
.dang-soan { align-self: flex-start; font-size: 13px; color: var(--chu-phu); padding: 4px 10px; }
.cham-nhay span { animation: cham-nhay 1.2s infinite; opacity: .2; }
.cham-nhay span:nth-child(2) { animation-delay: .2s; }
.cham-nhay span:nth-child(3) { animation-delay: .4s; }
@keyframes cham-nhay { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cham-nhay span { animation: none; opacity: 1; } }

/* Ô "Câu trả lời" của Hộp thư: thấp khi trống, tự cao theo chữ khách gõ, tới 40% màn hình thì cuộn. Trình duyệt chưa biết
   field-sizing thì app.js (cuon.tuGian) đặt chiều cao bằng tay. */
.o-tu-gian { field-sizing: content; min-height: calc(2lh + 26px); max-height: 40vh; overflow-y: auto; resize: none; }

/* Khu Hộp thư: đổi ba biến màu nhấn sang xanh mòng két, nên nút chính, gạch chân tab, bong bóng tin của Cuốn và viền ô
   đang chọn cùng đổi theo mà không phải sửa từng màn. Khung chung gắn lớp này lên thanh trên và thân trang. */
.khu-hop-thu { --cam: var(--mau-hop-thu); --cam-dam: #115E59; --cam-nhat: #CCFBF1; }
.thanh-tren { border-top: 3px solid var(--cam); }

/* Công tắc hai khu trên thanh trên: nửa của khu đang đứng tô màu khu đó. */
.cong-tac-khu { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--vien); border-radius: 999px; background: var(--nen); }
.cong-tac-khu a { padding: 5px 14px; border-radius: 999px; color: var(--chu-phu); font-weight: 600; }
.cong-tac-khu a:hover { color: var(--chu); }
.cong-tac-khu a.dang-o-fanpage { background: var(--mau-fanpage); color: #FFFFFF; }
.cong-tac-khu a.dang-o-hop-thu { background: var(--mau-hop-thu); color: #FFFFFF; }

/* Quản lý dòng thông tin riêng của Hộp thư (ngày 14/10/2026): ô tìm cạnh ô lọc tệp, mỗi dòng một ô chọn. */
.hang-loc-nguon { display: flex; gap: 10px; flex-wrap: wrap; }
.hang-loc-nguon > input { flex: 1 1 240px; }
.hang-loc-nguon > select { flex: 0 1 260px; min-width: 0; }
.dong-nguon { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid var(--vien); padding-top: 8px; }
.dong-nguon > input[type=checkbox] { margin-top: 5px; }
.xem-truoc-nhap { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; }

/* Công tắc gạt dùng chung (CongTacGat.razor): bật nền xanh núm bên phải, tắt nền xám núm bên trái. Mọi chỗ bật tắt có hiệu lực
   ngay dùng khối này, không dùng nút chữ "Bật / Tắt". */
.cong-tac-boc { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cong-tac-gat {
  position: relative; width: 56px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  background: #98A2B3; cursor: pointer; flex-shrink: 0; transition: background-color .2s ease;
}
.cong-tac-gat::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(16, 23, 32, .3); transition: transform .2s ease;
}
.cong-tac-gat[aria-checked="true"] { background: #16A34A; }
.cong-tac-gat[aria-checked="true"]::after { transform: translateX(24px); }
.cong-tac-gat:focus-visible { outline: 2px solid var(--chu); outline-offset: 2px; }
.cong-tac-gat:disabled { opacity: .6; cursor: wait; }
.cong-tac-chu { font-size: 13px; font-weight: 600; color: var(--chu-phu); min-width: 64px; }
@media (prefers-reduced-motion: reduce) { .cong-tac-gat, .cong-tac-gat::after { transition: none; } }

/* Trang câu hỏi thường gặp của Hộp thư. */
.cau-hoi { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 16px; }
.cau-hoi h2 { font-size: 17px; margin: 0; color: var(--chu); }
.cau-hoi p, .cau-hoi ol { margin: 0; line-height: 1.75; }
.cau-hoi ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Danh sách sản phẩm của Hộp thư: ảnh nhỏ bên trái, tên mã giá ở giữa, nút bên phải. */
.bang-san-pham { display: flex; flex-direction: column; }
.dong-san-pham { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid var(--vien); padding: 10px 0; }
.dong-san-pham > input[type=checkbox] { margin-top: 22px; }
.anh-san-pham { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--nen);
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; line-height: 1.3; }
.anh-san-pham img { width: 56px; height: 56px; object-fit: cover; display: block; }
.sua-san-pham { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
/* Khung ảnh nhiều góc của một sản phẩm (ngày 15/10/2026): mỗi ảnh một hàng, ảnh nhỏ bên trái, câu tả bên phải; điện thoại tự xuống dòng. */
.khung-anh-sp { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--nen); }
.o-anh-sp { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.o-anh-sp img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }

/* Ảnh sản phẩm trong khung chat Hộp thư và ảnh sẽ gửi kèm nháp. */
.anh-trong-chat { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; }
.anh-gui-kem { display: flex; gap: 8px; flex-wrap: wrap; }
.anh-gui-kem img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vien); }

/* Ô chỉ số của màn quản trị (ngày 16/10/2026): một con số lớn, nhãn và giải thích nhỏ; không bấm được nên không đổi viền khi rê chuột. */
.o-chi-so { border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--nen-the, transparent); }
.so-lon { font-size: 26px; font-weight: 700; color: var(--chu); line-height: 1.2; }

/* Ảnh đại diện Trang (AnhTrang) và hàng nút chọn Trang ở màn Tin nhắn, ngày 19/10/2026. */
.anh-trang { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
  overflow: hidden; color: #fff; font-weight: 700; line-height: 1; }
.anh-trang img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chon-trang-hop-thu { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--vien); }
.nut-trang { display: inline-flex; align-items: center; gap: 8px; }
.dong-cuoc-trang { display: inline-flex; align-items: center; gap: 6px; }