/* NTYDAY — giao diện các mục con, 01.11.2026.
   Module8: Hướng dẫn giữ bảng màu riêng; hai thẻ hướng dẫn không nhận nền feed.
   html:root giữ độ ưu tiên cũ khi bỏ main:has(> h1).
   Nạp sau phong-cach.css. Dùng chung màu/ảnh Sáng–Tối từ tệp đó.
   Năm phong cách dùng biến màu riêng; Mặc định không có thuộc tính nên không nhận luật.
   Ảnh/QR/camera, màu trạng thái tự chọn và nền chat riêng giữ nguyên.
   Phần khung chính/auth/cuộc gọi do phong-cach.css phụ trách. */

:root[data-phong-cach] {
  --pcm-the: var(--mat);
  --pcm-chu-phu: var(--chu);
  --pcm-vien: var(--vien);
  --pcm-do-dac: 78%;
  --pcm-anh-sang: 38%;
  --pcm-do-tuoi-chu: 65%;
  --pcm-tieu-de: var(--chu);
  --pcm-bong: 0 1px 3px var(--pc-bong-mau, #00000018);
}
:root[data-phong-cach="aqua"] { --pcm-mau: #23bfff; }
:root[data-phong-cach="dem"] { --pcm-mau: #d884ff; --pcm-do-dac: 86%; --pcm-anh-sang: 7%; }
:root[data-phong-cach="mint"] { --pcm-mau: #45dea0; }
:root[data-phong-cach="cobalt"] { --pcm-mau: #ff9748; --pcm-do-tuoi-chu: 50%; }
:root[data-phong-cach="ngoc"] { --pcm-mau: #ff70a2; }
@media (prefers-color-scheme: dark) {
  :root[data-phong-cach] { --pcm-do-dac: 86%; --pcm-anh-sang: 7%; }
}
@supports (color: color-mix(in srgb, white, transparent)) {
  :root[data-phong-cach] {
    /* Hai lớp ánh kính giữ màu ảnh phía dưới, không phủ một mặt trắng/xám phẳng. */
    --pcm-anh-kinh: linear-gradient(145deg, color-mix(in srgb, white var(--pcm-anh-sang), transparent), transparent 45%, color-mix(in srgb, var(--pcm-mau) 10%, transparent));
    --pcm-the: var(--pcm-anh-kinh), color-mix(in srgb, var(--mat) var(--pcm-do-dac), transparent);
    --pcm-chu-phu: color-mix(in srgb, var(--chu) 92%, var(--mat));
    --pcm-vien: color-mix(in srgb, var(--pcm-mau) 65%, var(--mat));
    --pcm-tieu-de: color-mix(in srgb, var(--chinh-2) var(--pcm-do-tuoi-chu), var(--chu));
    --pcm-bong: 0 1px 3px var(--pc-bong-mau, #00000018);
  }
}

/* Hộp top-layer dùng nền màu rõ; không nhân ảnh của lớp nền chung.
   Chỉ #hop; không đụng #doc, #tt, media viewer hay camera quét QR. */
:root[data-phong-cach] #hop:not([data-loai="anh"]) > .hop-than {
  background: var(--nen);
  color: var(--chu);
  scrollbar-color: var(--chinh-2) transparent;
}
:root[data-phong-cach] #hop > .hop-than > .cd {
  background: transparent;
}

/* Giới thiệu, trạng thái trống, form, lời giải thích và dãy nút.
   Hộp đã có nội dung riêng (ảnh/video/trạng thái) không bị phủ nền. */
:root[data-phong-cach] #hop:not([data-loai="anh"]) > .hop-than > :is(p:not(.loi):not(:empty), form, ol.huong-dan, .hang-nut, .lkm-dau, .gop-y, .trong),
:root[data-phong-cach] #hop .hop-than > .cd > p:not(:empty),
:root[data-phong-cach] #hop .hop-than :is(.sms-ds, .bl-ds, .ds, .ds-chuyen, .ds-tv) > :is(p.nhat, .trong):not(:empty):not(.loi) {
  padding: 8px 10px;
  border: 1px solid var(--pcm-vien);
  border-radius: 16px;
  background: var(--pcm-the);
  color: var(--chu);
  box-shadow: var(--pcm-bong);
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-shadow: none;
}
:root[data-phong-cach] #hop .hop-than > ol.huong-dan {
  padding-inline-start: 2.5em;
}
:root[data-phong-cach] #hop .hop-than :is(.nhat, .cd-chu small, .cd-gia, .muc-xem, .tt-dem, .gy-dem) {
  color: var(--pcm-chu-phu);
}
:root[data-phong-cach] #hop .hop-than :is(h4, .cd-tieu-de) {
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 12px;
  background: var(--pcm-the);
  color: var(--pcm-tieu-de);
  border: 1px solid var(--pcm-vien);
  box-shadow: var(--pcm-bong);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Cài đặt/Điều khiển/Âm thanh: chữ dài xuống dòng, công tắc giữ hit area.
   Chỉ phần bên trong hộp; lưới Cá nhân ở màn chính thuộc #150. */
:root[data-phong-cach] #hop .hop-than :is(.cd-the, .cd-co-chu) {
  background: var(--pcm-the);
  border: 1px solid var(--pcm-vien);
  border-radius: 12px;
  box-shadow: var(--pcm-bong);
  color: var(--chu);
}
:root[data-phong-cach] #hop .cd-hang {
  min-height: 44px;
  padding-block: 8px;
}
:root[data-phong-cach] #hop :is(.cd-chu, .cd-gia, .cd-nhan) {
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.45;
}
:root[data-phong-cach] #hop .cd-doan {
  flex-wrap: wrap;
  gap: 6px;
  background: var(--mat-2);
}
:root[data-phong-cach] #hop .cd-doan button {
  flex: 1 1 5.5em;
  padding: 6px 8px;
  min-height: 40px;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop .cd-doan button[aria-checked="true"] {
  background: var(--chinh);
  color: var(--chu-tren-chinh);
  box-shadow: var(--pcm-bong);
}

/* Hồ sơ, bạn bè, thành viên nhóm, máy liên kết, mục quản trị có sẵn. */
:root[data-phong-cach] #hop .hop-than :is(.ho-so-dau, .bb-dong, .lkm-dong, .lkm-the, .lkm-moi > li, .sms-muc, .lich-sua-ban, .bl-bong, .tt-ai-xem, .tat-tb, .vt-giai),
:root[data-phong-cach] #hop .hop-than > .dong,
:root[data-phong-cach] #hop .ds-tv > .dong {
  margin-block: 4px;
  padding: 8px;
  border: 1px solid var(--pcm-vien);
  border-radius: 16px;
  background: var(--pcm-the);
  color: var(--chu);
  box-shadow: var(--pcm-bong);
}
/* Nhãn ảnh đại diện nằm ngoài form: luôn có mặt kính đọc trên mọi bitmap.
   Không đổi ảnh, nút chọn tệp hay xử lý ảnh của người dùng. */
:root[data-phong-cach] #hop .anh-dd-chu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--pcm-vien);
  border-radius: 10px;
  background: var(--pcm-the);
  color: var(--pcm-tieu-de);
  box-shadow: var(--pcm-bong);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-shadow: none;
}
:root[data-phong-cach] #hop .ho-so-dau {
  padding-block: 10px;
}
:root[data-phong-cach] #hop :is(.ho-so-dau .muc-giua, .dong .muc-giua, .bb-ten, .lkm-the) {
  min-width: 0;
  overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop .lkm-dong.lkm-lk {
  border-inline-start: 4px solid var(--chinh-2);
  padding-inline-start: 9px;
}

/* Chọn người, ngôn ngữ, kiểu màn gọi, lý do báo cáo, lựa chọn riêng tư.
   Giữ input thật và giao diện tương phản cao của hệ điều hành. */
:root[data-phong-cach] #hop :is(.chon, .chon-o) {
  padding: 8px;
  min-height: 40px;
  border: 1px solid var(--pcm-vien);
  border-radius: 16px;
  background: var(--pcm-the);
  color: var(--chu);
  line-height: 1.5;
  overflow-wrap: anywhere;
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] #hop :is(.chon, .chon-o):has(> input:checked) {
  border-color: var(--chinh-2);
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] #hop .chon-kmg > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Ô nhập đặc để chữ/placeholder không dựa vào độ nhạt của ảnh.
   .tt-go có màu chữ theo nền trạng thái người dùng chọn: không ghi đè. */
:root[data-phong-cach] #hop :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), textarea:not(.tt-go), select) {
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: var(--mat);
  color: var(--chu);
  caret-color: var(--chinh-2);
}
:root[data-phong-cach] #hop :is(input, textarea:not(.tt-go))::placeholder {
  color: var(--chu-nhat);
  opacity: 1;
}
:root[data-phong-cach] #hop .hop-than .hang-nut {
  gap: 8px;
}
:root[data-phong-cach] #hop .hang-nut > .nut:not(.nut-tron) {
  min-height: 40px;
  height: auto;
  padding-block: 7px;
  white-space: normal;
  overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop .loi:not(:empty) {
  padding: 10px 12px;
  border: 1px solid currentColor;
  border-inline-start-width: 4px;
  border-radius: 12px;
  background: var(--mat);
  color: var(--do);
  line-height: 1.5;
  text-shadow: none;
}
:root[data-phong-cach] #hop .cd-hang.canh .cd-chu small {
  background: var(--mat);
  color: var(--do);
  border-radius: 4px;
}

/* QR đen/trắng nguyên vẹn, luôn có vùng trắng quanh mã; không filter/blend.
   Khung máy ảnh .quet-khung và canvas ảnh đính kèm không nhận luật này. */
:root[data-phong-cach] #hop .qr-khung {
  padding: 16px;
  background: #ffffff;
  color: #102b47;
  border: 1px solid #d1dfe8;
  border-radius: 20px;
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] #hop .qr-anh {
  background: #ffffff;
  filter: none;
  mix-blend-mode: normal;
}
:root[data-phong-cach] #hop :is(.ma-lon, .qr-link, .qr-ma, .sms-nd) {
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--vien);
  border-radius: 14px;
  background: var(--mat);
  color: var(--chu);
  overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop .ds-an {
  background: var(--mat);
  box-shadow: var(--pcm-bong);
}

/* Nhật ký/Bảng tin/Cộng đồng dùng nền màu; bóng thẻ chỉ một lớp nhỏ.
   Giữ màu trạng thái, ảnh bài viết, vòng đã/chưa xem và hộp #tt. */
:root[data-phong-cach] :is(#nhat-ky, #cong-dong):not(.guide-card) {
  background: var(--nen);
}
:root[data-phong-cach] #nhat-ky .bang-tin {
  background: transparent;
  border-top-color: transparent;
}
:root[data-phong-cach] #nhat-ky :is(.tt-hang, .tt-dong, .tt-goi-y, .tt-nut-duoi),
:root[data-phong-cach] #cong-dong :is(.trong, .ds > h4, .ds > p) {
  margin: 10px 12px;
  padding: 12px;
  border: 1px solid var(--pcm-vien);
  border-radius: 18px;
  background: var(--pcm-the);
  color: var(--chu);
  box-shadow: var(--pcm-bong);
  overflow-wrap: anywhere;
}
:root[data-phong-cach] #nhat-ky .tt-ten {
  padding: 3px 6px;
  border-radius: 8px;
  background: var(--mat);
  color: var(--chu);
}
:root[data-phong-cach] #nhat-ky .tt-tieu-de {
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--mat);
  color: var(--chu);
}
:root[data-phong-cach] #nhat-ky :is(.bai, .bt-viet),
:root[data-phong-cach] #ds-kenh > .muc {
  background: var(--pcm-the);
  color: var(--chu);
  border: 1px solid var(--pcm-vien);
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] #cong-dong > input {
  min-height: 48px;
  background: var(--mat);
  color: var(--chu);
  border-color: var(--vien);
  box-shadow: var(--pcm-bong);
}

/* Các mục đi từ ô soạn: đính kèm, hiệu ứng ảnh, bộ 260 biểu cảm.
   Chỉ vỏ nút và trạng thái chọn, không filter ảnh/canvas/emoji của người dùng. */
:root[data-phong-cach] :is(.dk-muc, .hu-muc) {
  background: var(--pcm-the);
  color: var(--chu);
  border-color: var(--pcm-vien);
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] .hu-muc:is(.hu-chon, [aria-checked="true"]) {
  background: var(--mat-2);
  border-color: var(--chinh-2);
}
:root[data-phong-cach] :is(.ne-option, .ne-link, .ne-send, .ne-search, .bc-tim) {
  min-height: 44px;
}
:root[data-phong-cach] :is(.ne-search, .bc-tim) {
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--vien);
  border-radius: 12px;
  background: var(--mat);
  color: var(--chu);
}
:root[data-phong-cach] :is(.ne-search, .bc-tim)::placeholder {
  color: var(--chu-nhat);
  opacity: 1;
}
:root[data-phong-cach] .ne-option[aria-pressed="true"] {
  background: var(--chinh);
  color: var(--chu-tren-chinh);
  border-color: var(--chinh);
}
:root[data-phong-cach] .ne-footer {
  padding: 8px;
  border: 1px solid var(--vien);
  border-radius: 14px;
  background: var(--mat);
  color: var(--chu);
}

/* Trang mở trong khung đọc dùng cùng tệp này sau phong-cach.css.
   Móc sẵn cho Claude nối <link> ở các trang phụ, không sửa nội dung. */
:root[data-phong-cach]:not([data-theme]) {
  /* Hướng dẫn có bộ tên biến riêng. Chọn Sáng/Tối riêng tại trang đó vẫn dùng được. */
  --bg: var(--nen);
  --surface: var(--mat);
  --surface-soft: var(--mat-2);
  --text: var(--chu);
  --muted: var(--pcm-chu-phu);
  --line: var(--vien);
  --accent: var(--chinh-2);
  --accent-hover: var(--chinh-2);
  --focus: var(--chinh-2);
  --note: var(--mat-2);
  --shadow: var(--pcm-bong);
}
:root[data-phong-cach] body.trang-phu {
  min-height: 100dvh;
  height: auto;
  background: var(--nen);
  color: var(--chu);
}
:root[data-phong-cach] :is(header.dau-trang, header.topbar) {
  background: var(--pcm-the);
  color: var(--chu);
  border-bottom: 1px solid var(--pcm-vien);
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] :is(.dau-trang .ve-lui, .dau-trang .ve-app, .ngon-ngu a, .ngon-ngu select) {
  color: var(--chu);
}
:root[data-phong-cach] :is(.ngon, .guide-card, .find-panel, .intro, .no-results) {
  padding: 14px;
  border: 1px solid var(--pcm-vien);
  border-radius: 14px;
  background: var(--pcm-the);
  color: var(--chu);
  box-shadow: var(--pcm-bong);
}
:root[data-phong-cach] :is(.ngon a, .chan a) {
  color: var(--chinh-2);
  background: var(--mat);
  border-radius: 3px;
  text-decoration-thickness: 1px;
}
/* Hỗ trợ / Xoá tài khoản dùng main > h1, không bọc trong .ngon.
   Giữ cùng mặt đọc với các trang khác; không phủ thêm lên thẻ .ngon/Hướng dẫn. */
html:root[data-phong-cach] body.trang-noi-dung > main {
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 780px;
  margin: 12px auto 24px;
  padding: 14px;
  border: 1px solid var(--pcm-vien);
  border-radius: 14px;
  background: var(--pcm-the);
  color: var(--chu);
  box-shadow: var(--pcm-bong);
  overflow-wrap: anywhere;
}
html:root[data-phong-cach] body.trang-noi-dung > main a {
  color: var(--chinh-2);
  background: var(--mat);
  border-radius: 3px;
  text-decoration-thickness: 1px;
}
:root[data-phong-cach] :is(.tom-tat, .note) {
  background: var(--mat);
  color: var(--chu);
  border: 1px solid var(--vien);
}
/* Trang Hướng dẫn có thể chọn Sáng/Tối khác app: nền và link theo cùng bảng. */
:root[data-phong-cach] body.trang-huong-dan {
  background: var(--bg);
  color: var(--text);
}
:root[data-phong-cach] body.trang-phu.trang-huong-dan a {
  color: var(--accent);
}
:root[data-phong-cach] body.trang-phu.trang-huong-dan a:hover {
  color: var(--accent-hover);
}
:root[data-phong-cach][data-theme="light"] {
  color-scheme: light;
  --pcm-do-dac: 78%;
  --pcm-anh-sang: 38%;
}
:root[data-phong-cach][data-theme="dark"] {
  color-scheme: dark;
  --pcm-do-dac: 86%;
  --pcm-anh-sang: 7%;
}
:root[data-phong-cach] :is(header.topbar, .guide-card, .find-panel, .intro, .no-results) {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
@supports (color: color-mix(in srgb, white, transparent)) {
  :root[data-phong-cach] :is(header.topbar, .guide-card, .find-panel, .intro, .no-results) {
    background: var(--pcm-anh-kinh), color-mix(in srgb, var(--surface) var(--pcm-do-dac), transparent);
    border-color: var(--pcm-vien);
  }
}
:root[data-phong-cach] :is(.guide-content, .intro .eyebrow) {
  background: var(--surface);
  border-radius: 10px;
}
:root[data-phong-cach] body.trang-huong-dan .note {
  background: var(--note);
  color: var(--text);
  border-color: var(--line);
}
:root[data-phong-cach] .chan {
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 16px auto;
  padding: 12px;
  border-radius: 16px;
  background: var(--pcm-the);
  color: var(--pcm-chu-phu);
}

/* Tiêu đề trang đọc có sắc riêng của phong cách, vẫn đủ rõ trên kính mỏng.
   Hướng dẫn giữ bảng --text riêng khi người dùng chọn Sáng/Tối tại trang đó. */
:root[data-phong-cach] .ngon :is(h1, h2, h3),
html:root[data-phong-cach] body.trang-noi-dung > main :is(h1, h2, h3) {
  color: var(--pcm-tieu-de);
  text-shadow: none;
}

/* Hướng dẫn có chế độ riêng: chữ phụ lấy từ chính bảng --text/--surface
   để không nhạt trên lớp kính mới hoặc lẫn với màu chữ của app. */
:root[data-phong-cach][data-theme] { --muted: var(--text); }
:root[data-phong-cach] body.trang-huong-dan > footer {
  padding: 12px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--pcm-vien);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--pcm-bong);
}
@supports (color: color-mix(in srgb, white, transparent)) {
  :root[data-phong-cach][data-theme] { --muted: color-mix(in srgb, var(--text) 92%, var(--surface)); }
  :root[data-phong-cach] body.trang-huong-dan > footer {
    background: var(--pcm-anh-kinh), color-mix(in srgb, var(--surface) var(--pcm-do-dac), transparent);
  }
}


/* Không thêm chuyển động; tập trung nhìn rõ bàn phím/trạng thái chọn. */
:root[data-phong-cach] #hop :is(.nut, .cd-hang, .chon, .bb-ten, input, textarea, select):focus-visible {
  outline: 3px solid var(--chinh-2);
  outline-offset: 3px;
}
/* .cd-the cắt góc bo: vòng tiêu điểm của hàng nằm bên trong để không bị cắt. */
:root[data-phong-cach] #hop .cd-hang:focus-visible {
  outline-offset: -3px;
}
@media (max-width: 420px) {
  :root[data-phong-cach] #hop .chon-kmg {
    flex-wrap: wrap;
  }
  :root[data-phong-cach] #hop .chon-kmg > span {
    flex: 1 1 8rem;
  }
}
@media (forced-colors: active) {
  :root[data-phong-cach] {
    --pcm-the: Canvas;
    --pcm-chu-phu: CanvasText;
    --pcm-vien: CanvasText;
    --pcm-bong: none;
  }
  :root[data-phong-cach] :is(#hop > .hop-than, #nhat-ky, #cong-dong) {
    background-image: none;
  }
}

/* Rà toàn app: bỏ mặt đặc bên trong panel kính của trang phụ/hộp. */
@media (forced-colors: none) {
:root[data-phong-cach] {
  --pcm-guide-glass: var(--surface);
}
@supports (color: color-mix(in srgb, white, transparent)) {
:root[data-phong-cach] {
  --pcm-guide-glass: color-mix(in srgb, var(--surface) var(--pcm-do-dac), transparent);
}
}
:root[data-phong-cach] body.trang-doc main form,
:root[data-phong-cach] body.trang-doc .tom-tat,
:root[data-phong-cach] body.trang-huong-dan .guide-content,
:root[data-phong-cach] body.trang-huong-dan .intro .eyebrow,
:root[data-phong-cach] body.trang-huong-dan .note {
  background: transparent;
}
:root[data-phong-cach] body.trang-huong-dan .support-box {
  background: var(--pcm-guide-glass); color: var(--text);
}
:root[data-phong-cach] #hop .ds-an,
:root[data-phong-cach] #hop .ma-lon,
:root[data-phong-cach] #hop .qr-link,
:root[data-phong-cach] #hop .qr-ma,
:root[data-phong-cach] #hop .sms-nd {
  background: var(--pc-be-mat); color: var(--chu); --chu-nhat: var(--chu);
}
:root[data-phong-cach] #hop .loi:not(:empty) {
  background: var(--pc-be-mat); color: var(--chu); border-color: var(--do);
}
@supports not (color: color-mix(in srgb, white, transparent)) {
:root[data-phong-cach] {
  --pcm-the: var(--pc-be-mat);
}
:root[data-phong-cach] body.trang-huong-dan header.topbar,
:root[data-phong-cach] body.trang-huong-dan .guide-card,
:root[data-phong-cach] body.trang-huong-dan .find-panel,
:root[data-phong-cach] body.trang-huong-dan .intro,
:root[data-phong-cach] body.trang-huong-dan .no-results,
:root[data-phong-cach] body.trang-huong-dan > footer {
  background: var(--pcm-guide-glass);
}
}
}

/* Hộp gọn: khung/co-cuộn do CSS chính; module chỉ co phần nội dung. */
:root[data-phong-cach] #hop:not([data-loai="anh"]) > .hop-than { font-size: .9375rem; }
:root[data-phong-cach] #hop .hop-than .nut:not(.nut-tron) { min-height: 40px; height: auto; padding: 7px 10px; border-radius: 10px; font-size: .9375rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
:root[data-phong-cach] #hop .hop-than :is(.ho-so-dau, .bb-dong, .lkm-dong, .sms-muc, .ds-tv > .dong) { border-radius: 12px; box-shadow: var(--pcm-bong); }
:root[data-phong-cach] #hop .hop-than > h4 { margin-block: 12px 6px; }
:root[data-phong-cach] #hop .hop-than > h4:first-child { margin-top: 0; }
:root[data-phong-cach] #hop:not([data-loai="anh"]) { box-sizing: border-box; inset: 0; width: min(480px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: auto; min-height: 0; max-height: min(80dvh, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); margin: auto; padding: 0; border-radius: 16px; overflow: hidden; }
:root[data-phong-cach] #hop:not([data-loai="anh"])[open] { display: flex; flex-direction: column; }
:root[data-phong-cach] #hop:not([data-loai="anh"]) > .hop-than { flex: 0 1 auto; min-height: 0; max-height: none; padding: 10px 12px 12px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
:root[data-phong-cach] #hop > .hop-than > :is(.ds, .ds-tv, .sms-ds) { flex: none; max-height: none; overflow: visible; }
:root[data-phong-cach] :is(#hop, #doc) > .hop-dau { flex: none; min-height: 52px; gap: 6px; padding: 6px 8px 6px 12px; }
:root[data-phong-cach] :is(#hop, #doc) > .hop-dau h3 { min-width: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
:root[data-phong-cach] :is(#hop, #doc) > .hop-dau > .nut { flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
:root[data-phong-cach] :is(#hop, #doc) > .hop-dau > :is(.nut-lui-hop, .nut-dong-hop, .lui-chinh) { display: inline-flex; }
:root[data-phong-cach] #doc.hop-doc { inset: 0; width: min(760px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); height: min(80dvh, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); min-height: 0; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; border-radius: 16px; }
:root[data-phong-cach] #doc.hop-doc > .hop-than { flex: 1; min-height: 0; max-height: none; }
:root[data-phong-cach] #hop .hop-than :is(.cd-nhom, .o) { margin-block: 10px; }
:root[data-phong-cach] #hop .hop-than .o:first-child { margin-top: 0; }
:root[data-phong-cach] #hop[data-loai="an"] .ds-an { margin-bottom: 10px; }
:root[data-phong-cach] #hop[data-loai="an"] .ds-an .muc { min-height: 56px; padding-block: 8px; }
:root[data-phong-cach] #hop .hop-than :is(.ho-so-dau, .dong) > .anh-dai,
:root[data-phong-cach] #hop .hop-than .nut-ten-anh > .anh-dai { width: 40px; height: 40px; font-size: 1rem; }
:root[data-phong-cach] #hop .hop-than .ho-so-dau { gap: 8px; margin-block: 6px 10px; }
:root[data-phong-cach] #hop .hop-than :is(.cd-the, .cd-co-chu, .ho-so-dau, .bb-dong, .lkm-dong, .lkm-the, .sms-muc, .dong, .chon, .chon-o, form, .hang-nut),
:root[data-phong-cach] body.trang-phu :is(.ngon, .guide-card, .find-panel, .intro, .no-results, .support-box) { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-phong-cach] body.trang-doc main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, button, .nut),
:root[data-phong-cach] body.trang-huong-dan :is(input, select, .quiet-button, .primary-button) { min-height: 40px; padding: 7px 10px; border-radius: 10px; }
:root[data-phong-cach] body.trang-huong-dan .guide-card summary { min-height: 56px; gap: 10px; padding: 8px 10px; }
:root[data-phong-cach] body.trang-huong-dan .guide-content { padding: 4px 10px 10px; }

/* Chốt 01.11: mục con là trang riêng; hộp hỏi vẫn co theo nội dung. */
:root[data-phong-cach] #hop[data-kieu="trang"] { background: var(--nen); }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-than { background: var(--pc-be-mat); }
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than :is(.ho-so-dau, .bb-dong, .lkm-dong, .lkm-the, .sms-muc, .lich-sua-ban, .bl-bong, .tt-ai-xem, .tat-tb, .vt-giai),
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than > .dong,
:root[data-phong-cach] #hop[data-kieu="trang"] .ds-tv > .dong { min-height: 56px; margin-block: 0; padding: 6px 0; background: transparent; border-width: 0 0 1px; border-color: var(--vien); border-radius: 0; box-shadow: none; }
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than :is(form, .hang-nut, .cd-the, .cd-co-chu, .lkm-dau, .gop-y),
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-than > :is(p:not(.loi), .trong),
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than > .cd > p:not(:empty) { background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than :is(.muc-ten, .bb-ten) { font-size: 1rem; }
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than :is(.nhat, .muc-xem, .cd-chu small) { font-size: .875rem; }
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than :is(.ho-so-dau, .dong) > .anh-dai,
:root[data-phong-cach] #hop[data-kieu="trang"] .hop-than .nut-ten-anh > .anh-dai { width: 44px; height: 44px; }
:root[data-phong-cach] #hop[data-kieu="hoi"] > .hop-dau > .nut-lui-trang { display: none; }
:root[data-phong-cach] #hop[data-kieu="hoi"] > .hop-dau > .nut-dong-hop { display: inline-flex; }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-dau > .nut-lui-hop { display: inline-flex; }
@media (max-width: 859px) {
:root[data-phong-cach] #hop[data-kieu="trang"] { inset: 0; width: 100%; max-width: none; height: 100dvh; min-height: 0; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
:root[data-phong-cach] #hop[data-kieu="trang"]::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-dau { padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-dau h3 { font-size: 1.25rem; font-weight: 700; }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-dau > .nut-dong-hop { display: none; }
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-than { flex: 1 1 auto; min-height: 0; padding: 8px max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
:root[data-phong-cach] #doc.hop-doc { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
:root[data-phong-cach] #doc.hop-doc > .hop-dau { padding-top: max(6px, env(safe-area-inset-top)); }
:root[data-phong-cach] #doc.hop-doc > .hop-dau > .nut-dong-hop { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
@keyframes pcm-trang-vao { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pcm-hoi-vao { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
:root[data-phong-cach] #hop[data-kieu="hoi"][open] { animation: pcm-hoi-vao 160ms ease-out; }
@media (max-width: 859px) {
:root[data-phong-cach] #hop[data-kieu="trang"][open] { animation: pcm-trang-vao 200ms ease-out; }
}
}
@media (forced-colors: active) {
:root[data-phong-cach] #hop[data-kieu="trang"],
:root[data-phong-cach] #hop[data-kieu="trang"] > .hop-than { background: Canvas; color: CanvasText; }
}

/* 01.11 — mẫu danh sách Facebook Thông báo (6553231030).
   Chỉ trang có danh sách thật; giữ hộp hỏi, QR/media và trang tĩnh.
   Không thêm nội dung, thời gian, cờ mới hoặc ảnh bằng CSS. */
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) {
  --pcm-ds-phu: #606775; background: var(--mat); color: var(--chu);
}
:root[data-phong-cach="dem"] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) { --pcm-ds-phu: #b9c4d0; }
@media (prefers-color-scheme: dark) {
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) { --pcm-ds-phu: #b9c4d0; }
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-dau,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-than {
  background: var(--mat); color: var(--chu); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-dau {
  min-height: 60px; gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-dau h3 {
  font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: normal; color: var(--chu);
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(h4, .cd-tieu-de) {
  width: auto; max-width: 100%; margin: 20px 0 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--pcm-ds-phu); font-size: .875rem; font-weight: 650; line-height: 1.4; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than > h4:first-child {
  margin-top: 4px;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(.dong, .bb-dong),
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .ds-an,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .ds-an > .muc,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .lkm-moi > li {
  margin-block: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(.dong, .bb-dong),
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .ds-an > .muc {
  min-height: 60px; padding: 8px 0; column-gap: 12px; row-gap: 6px; align-items: center;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong {
  flex-wrap: wrap;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .muc-giua {
  flex: 1 1 9rem; min-width: 0;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong:has(> .nut-chan) > .muc-giua,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong:has(> button:nth-of-type(3)) > .muc-giua {
  flex-basis: calc(100% - 56px);
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(.dong, .bb-dong, .ds-an) :is(.muc-ten, .bb-ten) {
  font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--chu); white-space: normal; overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(.dong, .bb-dong, .ds-an) :is(.nhat, .muc-xem),
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than > p.nhat,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .lkm-dau .nhat {
  color: var(--pcm-ds-phu); font-size: .875rem; line-height: 1.4; text-shadow: none;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong:not(.lkm-dong) .nhat,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .ds-an .muc-xem {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .lkm-dong .nhat {
  margin-top: 2px; white-space: normal; overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than :is(.dong, .ds-an > .muc) > .anh-dai,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut-ten-anh > .anh-dai,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .ds-an > .muc .anh-dai {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut-ten-anh {
  flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut {
  flex: 0 1 auto; max-width: 100%; min-width: 40px; min-height: 40px; margin-inline-start: 0; padding: 7px 10px; border-radius: 10px; box-shadow: none; font-size: .875rem; font-weight: 700; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut-chinh,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut-nhan {
  background: var(--chinh); color: var(--chu-tren-chinh); border-color: var(--chinh);
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .nut-nhan {
  flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .dong > .lien-ket {
  min-height: 40px; padding: 7px 4px; display: inline-flex; align-items: center;
}
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) .hop-than .lkm-dong.lkm-lk {
  border-inline-start: 0; padding-inline-start: 0;
}
@media (forced-colors: active) {
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) { --pcm-ds-phu: CanvasText; }
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)),
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-dau,
:root[data-phong-cach] #hop[data-kieu="trang"]:is([data-loai="ban"], [data-loai="thiet-bi"], [data-loai="an"], :has(.hop-than .dong), :has(.hop-than .bb-dong), :has(.hop-than .ds-tv)) > .hop-than { background: Canvas; color: CanvasText; }
}