/* ==========================================================================
   Bộ công cụ tài liệu — giao diện dùng chung cho mọi trang
   Đợt 1 (Trạng chốt 25/09/2026): mọi chức năng chạy trong trình duyệt.

   Màu và nhận diện là của riêng trang này. KHÔNG mượn thương hiệu của ai.
   ========================================================================== */

:root {
  --muc:      #101828;
  --chu:      #344054;
  --nhat:     #667085;
  --vien:     #e4e7ec;
  --vien-dam: #cfd4dc;
  --the:      #ffffff;
  --nen:      #f7f9fc;
  --xanh:     #2557d6;
  --xanh-dam: #1b42a8;
  --xanh-mo:  #eef3ff;
  --luc:      #067647;
  --luc-mo:   #ecfdf3;
  --vang:     #b54708;
  --vang-mo:  #fffaeb;
  --do:       #b42318;
  --do-mo:    #fef3f2;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Quy tắc mặc định `[hidden] { display: none }` thua mọi rule có display
   trong class. Phải chặn dứt khoát, nếu không khối đang ẩn vẫn hiện ra. */
[hidden] { display: none !important; }

body {
  background: var(--nen);
  color: var(--chu);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.giua { margin: 0 auto; max-width: 74rem; padding: 0 16px; }

a { color: var(--xanh); }

code {
  background: #f2f4f7;
  border-radius: 4px;
  font-size: 0.88em;
  padding: 1px 5px;
}

.cham { color: var(--nhat); }
.nho  { font-size: 0.88rem; }

/* ---------------------------- Đầu trang ---------------------------- */

.dau {
  background: var(--the);
  border-bottom: 1px solid var(--vien);
  position: relative;
  z-index: 2;
}

.dau__trong {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  padding: 13px 16px;
}

.hieu {
  align-items: center;
  color: var(--muc);
  display: inline-flex;
  gap: 10px;
  text-decoration: none;
}

/* Logo đã tách nền trong suốt nên đặt lên nền nào cũng được */
.hieu__logo { display: block; height: 36px; width: auto; }

.hieu__chu { display: flex; flex-direction: column; line-height: 1.16; }

.hieu__chu strong {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hieu__chu small { color: var(--nhat); font-size: 0.75rem; }

/* --------------------- Mỗi công cụ một màu riêng --------------------- */

/* Mỗi công cụ một màu riêng, đặt ở một chỗ duy nhất rồi dùng lại cho cả nút
   trên thanh ngang lẫn thẻ ở trang chủ — đổi màu một lần là đổi cả hai.
   --mau: màu chính · --mau-2: màu nhạt hơn để đổ dải · --mau-mo: nền rất nhạt */
.mau-word   { --mau: #2557d6; --mau-2: #5b8dff; --mau-mo: #eff4ff; }
.mau-excel  { --mau: #07794a; --mau-2: #32c48d; --mau-mo: #e9faf2; }
.mau-anh    { --mau: #7839ee; --mau-2: #a98bff; --mau-mo: #f4f0ff; }
.mau-tach   { --mau: #c4620a; --mau-2: #fb9f3c; --mau-mo: #fff5ea; }
.mau-noi    { --mau: #0e7090; --mau-2: #3ebbd8; --mau-mo: #eaf8fc; }
.mau-sapxep { --mau: #c1176f; --mau-2: #f76fb4; --mau-mo: #fdf0f7; }
.mau-nen    { --mau: #c0271c; --mau-2: #f57a6f; --mau-mo: #fef2f1; }
.mau-vanban { --mau: #a16207; --mau-2: #fbbf24; --mau-mo: #fffaeb; }
/* Máy quét lấy đúng màu mòng két của chính ứng dụng (theme-color #0B6E68):
   bấm nút màu gì thì mở ra trang màu đó, không giật mắt. */
.mau-quet   { --mau: #0b6e68; --mau-2: #2dd4bf; --mau-mo: #e6f7f5; }
/* Kiến thức KHÔNG phải công cụ, nên cố ý dùng xám đá chứ không lấy thêm một
   màu rực nữa: nhìn lướt là tách được "chỗ đọc" khỏi chín "chỗ làm việc". */
.mau-kienthuc { --mau: #475569; --mau-2: #94a3b8; --mau-mo: #f1f5f9; }

/* Khoảng cách bóp lại 26/09/2026 khi thêm mục "Van Phuc scanner": tên này dài
   hơn "Máy quét" ~57px, mà 10 mục vốn đã vừa khít 1152/1152px. Giữ padding cũ
   thì thanh ngang xuống 2 hàng và cao thêm 43px trên MỌI trang. Bóp còn
   10px/5px thì menu 1125px, vẫn một hàng, header vẫn 114px.
   ⚠ Chỉ còn dư 27px — thêm mục nữa là phải gom nhóm thật. */
.menu { display: flex; flex-wrap: wrap; gap: 5px; }

.menu a {
  align-items: center;
  background: var(--mau-mo, #f2f4f7);
  border-radius: 999px;
  color: var(--mau, var(--chu));
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 6px;
  padding: 7px 10px;
  text-decoration: none;
  transition: background 140ms, color 140ms, box-shadow 140ms, transform 140ms;
}

/* chấm tròn lấy luôn màu chữ, nên tự đổi sang trắng khi nút đầy màu */
.menu a::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  width: 6px;
}

.menu a:hover,
.menu a[aria-current="page"] {
  background: linear-gradient(135deg, var(--mau, var(--xanh)), var(--mau-2, var(--xanh)));
  box-shadow: 0 2px 9px rgba(16, 24, 40, 0.2);
  color: #fff;
}

.menu a:hover { transform: translateY(-1px); }
.menu a:focus-visible { outline: 3px solid #a9c2ff; outline-offset: 2px; }

/* ---------------------------- Thân trang ---------------------------- */

main { padding: 30px 0 44px; }

.tieu-de-cong-cu { margin: 0 0 22px; }
.tieu-de-cong-cu h1 {
  color: var(--muc);
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 6px;
}
.tieu-de-cong-cu p { margin: 0; max-width: 46rem; }

/* ---------------------------- Ô chọn tệp ---------------------------- */

.o-tha {
  align-items: center;
  background: var(--the);
  border: 2px dashed var(--vien-dam);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 46px 26px;
  text-align: center;
  transition: border-color 150ms, background 150ms;
}

.o-tha.dang-keo { background: var(--xanh-mo); border-color: var(--xanh); }

.o-tha__icon {
  align-items: center;
  background: var(--xanh-mo);
  border-radius: 14px;
  color: var(--xanh);
  display: inline-flex;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.o-tha__chinh { color: var(--muc); font-size: 1.14rem; font-weight: 600; }
.o-tha__phu { color: var(--nhat); font-size: 0.9rem; }

/* ------------------------------- Nút ------------------------------- */

.nut {
  align-items: center;
  background: var(--the);
  border: 1px solid var(--vien-dam);
  border-radius: 9px;
  color: var(--chu);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 11px 20px;
  /* .nut dùng cho cả <button> lẫn <a>; thẻ <a> mặc định có gạch chân */
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}

.nut:hover:not(:disabled) { background: #f9fafb; }
.nut:disabled { cursor: not-allowed; opacity: 0.5; }
.nut:focus-visible { outline: 3px solid #a9c2ff; outline-offset: 2px; }

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

.nut--to { font-size: 1.02rem; padding: 13px 26px; }
.nut--rong { width: 100%; }

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

/* ---------------------------- Khung báo ---------------------------- */

.bao {
  border-radius: 10px;
  margin: 16px 0 0;
  padding: 12px 15px;
}

.bao--loi   { background: var(--do-mo);   border: 1px solid #fecdca; color: var(--do); }
.bao--nhac  { background: var(--vang-mo); border: 1px solid #fedf89; color: #93370d; }
.bao--xong  { background: var(--luc-mo);  border: 1px solid #abefc6; color: var(--luc); }
.bao--tin   { background: var(--xanh-mo); border: 1px solid #b2ccff; color: #1b42a8; }

.bao p { margin: 0 0 6px; }
.bao p:last-child { margin-bottom: 0; }
.bao ol, .bao ul { margin: 0; padding-left: 19px; }
.bao li { margin: 4px 0; }

.dang-lam { color: var(--nhat); padding: 34px 0; text-align: center; }

/* ---------------------------- Khối kết quả -------------------------- */

.lam-viec {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 21rem 1fr;
  overflow: hidden;
}

.ben-trai {
  border-right: 1px solid var(--vien);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 26px 24px;
}

.ben-trai h2 { color: var(--muc); font-size: 1.26rem; margin: 0; }

.ben-phai {
  background: #f2f4f7;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ten-tep {
  align-items: baseline;
  background: var(--the);
  border-bottom: 1px solid var(--vien);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 12px 16px;
}

.ten-tep__chinh { color: var(--muc); font-weight: 600; overflow-wrap: anywhere; }
.ten-tep__phu { color: var(--nhat); font-size: 0.86rem; }

.day-nut-duoi { margin-top: auto; }

/* ---------------------------- Xem trước tài liệu -------------------- */

.khung-xem {
  --docx-co-chu: 11pt;
  --docx-font: "Calibri";
  --xl-co-chu: 11pt;
  --xl-font: "Calibri";
  flex: 1;
  max-height: 74vh;
  overflow: auto;
  padding: 18px 0;
}

/* CHẶN CSS CỦA TRANG RÒ VÀO TÀI LIỆU. body đặt line-height 1.6 và font-size
   16px cho giao diện; những thứ đó thừa kế xuống từng đoạn văn của tệp Word
   và làm giãn dòng — tài liệu 4 trang phình thành 6 trang. */
.khung-xem .docx-wrapper {
  background: transparent;
  font-family: var(--docx-font), "Segoe UI", sans-serif;
  font-size: var(--docx-co-chu);
  line-height: normal;
  padding: 0;
}

.khung-xem .docx-wrapper > section.docx {
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.16);
  margin: 0 auto 18px;
}

/* Trang giấy tự dựng (Excel, ảnh) dùng chung kiểu này */
.to-giay {
  background: #fff;
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.16);
  margin: 0 auto 18px;
  overflow: hidden;
}

/* ---------------------------- Bảng Excel dựng lại ------------------- */

.boc-bang { transform-origin: top left; }

.bang-excel {
  border-collapse: collapse;
  /* hai biến này do excel-sang-pdf.js đọc từ xl/styles.xml của chính tệp */
  font-family: var(--xl-font, Calibri), "Segoe UI", sans-serif;
  font-size: var(--xl-co-chu, 11pt);
  line-height: 1.22;
  table-layout: fixed;          /* tôn trọng độ rộng cột lấy từ tệp */
}

.bang-excel td {
  overflow-wrap: break-word;
  padding: 1px 4px;
  /* Excel xuống dòng bằng ký tự \n ngay cả khi không bật ngắt dòng tự động,
     nên phải giữ nguyên khoảng trắng và dấu xuống dòng. */
  white-space: pre-wrap;
}

/* Hàng có chiều cao người dùng tự đặt: Excel cắt phần thừa, không cho nở */
.bang-excel .o-cat { overflow: hidden; }

/* ---------------------------- Ô cài đặt ----------------------------- */

.o-cai { display: block; }

.o-cai > span {
  color: var(--muc);
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.o-cai select,
.o-cai input[type="number"],
.o-cai input[type="text"] {
  background: var(--the);
  border: 1px solid var(--vien-dam);
  border-radius: 8px;
  color: var(--chu);
  font: inherit;
  padding: 9px 11px;
  width: 100%;
}

.o-cai select:focus-visible,
.o-cai input:focus-visible { border-color: var(--xanh); outline: none; }

.o-cai__phu { color: var(--nhat); font-size: 0.82rem; margin: 4px 0 0; }

/* ---------------------------- Ô chọn nhiều -------------------------- */

.ds-chon {
  border: 1px solid var(--vien);
  border-radius: 9px;
  max-height: 11rem;
  overflow-y: auto;
  padding: 4px;
}

.o-chon {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 8px;
  padding: 6px 8px;
}

.o-chon:hover { background: #f9fafb; }
.o-chon input { accent-color: var(--xanh); flex: none; }
.o-chon span { overflow-wrap: anywhere; }

/* ---------------------------- Lưới thẻ trang chủ -------------------- */

/* ---------------------------- Băng thương hiệu --------------------- */

/* Rộng bằng khối chữ giới thiệu bên dưới cho thẳng hàng, không chiếm hết
   bề ngang trang */
.bang-hieu {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  margin: 26px auto 0;
  max-width: 44rem;
  overflow: hidden;
}

/* width/height có sẵn trong thẻ img để trình duyệt giữ chỗ trước khi ảnh
   tải xong, khỏi giật trang */
.bang-hieu img { display: block; height: auto; width: 100%; }

.bang-hieu__cau {
  align-items: baseline;
  background: linear-gradient(135deg, #0b2a6b, #1e54c4);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: center;
  margin: 0;
  padding: 12px 18px;
  text-align: center;
}

.bang-hieu__cau strong { font-size: 1.04rem; letter-spacing: 0.05em; }
.bang-hieu__cau span { color: #dbe6ff; }

.loi-gioi-thieu {
  margin: 0 auto 34px;
  max-width: 44rem;
  text-align: center;
}

.loi-gioi-thieu h1 {
  color: var(--muc);
  font-size: 2.15rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.loi-gioi-thieu p { font-size: 1.05rem; margin: 0; }

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

.the-cong-cu {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  color: inherit;
  display: block;
  overflow: hidden;
  padding: 20px;
  position: relative;
  text-decoration: none;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}

/* Vạch màu sát mép trên, hiện THƯỜNG TRỰC để nhìn lướt là phân biệt được
   bảy công cụ. Rê chuột thì dày lên chứ không phải lúc đó mới hiện. */
.the-cong-cu::before {
  background: linear-gradient(90deg, var(--mau), var(--mau-2));
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  transition: height 180ms;
  width: 100%;
}

.the-cong-cu:hover {
  border-color: var(--mau);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.13);
  transform: translateY(-3px);
}

.the-cong-cu:hover::before { height: 6px; }
.the-cong-cu:focus-visible { outline: 3px solid var(--mau); outline-offset: 2px; }

.the-cong-cu__icon {
  align-items: center;
  background: linear-gradient(135deg, var(--mau), var(--mau-2));
  border-radius: 13px;
  box-shadow: 0 4px 11px rgba(16, 24, 40, 0.18);
  color: #fff;
  display: inline-flex;
  height: 46px;
  justify-content: center;
  margin-bottom: 13px;
  transition: transform 160ms;
  width: 46px;
}

.the-cong-cu:hover .the-cong-cu__icon { transform: scale(1.07) rotate(-4deg); }

.the-cong-cu h2 {
  color: var(--muc);
  font-size: 1.06rem;
  margin: 0 0 4px;
  transition: color 140ms;
}

/* mũi tên chỉ hiện khi rê chuột, để lúc thường thẻ vẫn gọn */
.the-cong-cu h2::after {
  color: var(--mau);
  content: "→";
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 160ms, transform 160ms;
}

.the-cong-cu:hover h2 { color: var(--mau); }
.the-cong-cu:hover h2::after { opacity: 1; transform: translateX(0); }

.the-cong-cu p { color: var(--nhat); font-size: 0.9rem; margin: 0; }

/* Máy đặt chế độ hạn chế chuyển động thì bỏ hết phần trượt, giữ lại màu */
@media (prefers-reduced-motion: reduce) {
  .the-cong-cu, .the-cong-cu::before, .the-cong-cu__icon,
  .the-cong-cu h2, .the-cong-cu h2::after, .menu a { transition: none; }
  .the-cong-cu:hover { transform: none; }
  .the-cong-cu:hover .the-cong-cu__icon { transform: none; }
  .menu a:hover { transform: none; }
}

/* ---------------------------- Khối Kiến thức ------------------------ */

/* Thẻ bài viết DÙNG LẠI vỏ .the-cong-cu (viền, bo góc, vạch màu trên, hiệu
   ứng rê chuột) nên không bao giờ lệch nhịp với lưới công cụ phía trên.
   Ở đây chỉ tả phần khác: bỏ ô biểu tượng, thêm dòng thông tin nhỏ.

   Khối này gồm 3 bài + 1 thẻ "Xem tất cả" = 4 ô, khớp đúng 4 cột của .luoi
   trên máy tính nên hàng luôn đầy, không bao giờ hụt một ô trống lẻ. */

.khoi-kien-thuc { margin-top: 30px; }

/* auto-FIT chứ không auto-FILL như lưới công cụ. Lưới công cụ có đủ thẻ để
   lấp kín mọi cột (9 thẻ, 4 cột). Lưới bài thì số bài thay đổi: mới có 1 bài mà
   dùng auto-fill là hàng hụt hai ô trống, nhìn lệch hẳn. auto-fit cho các
   thẻ giãn ra chiếm trọn hàng, bao nhiêu bài cũng cân. */
.luoi-bai { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* Trang danh sách: chặn thẻ không rộng quá 26rem rồi canh giữa. Không chặn
   thì lúc mới có một bài, thẻ kéo dài hết 1152px, tiêu đề lọt thỏm giữa
   khoảng trắng. Chặn rồi thì một bài hay mười bài đều ra hàng gọn. */
.luoi-ds {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 26rem));
  justify-content: center;
}

.khoi-kien-thuc__dau {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  margin: 0 0 14px;
}

.khoi-kien-thuc__dau h2 { color: var(--muc); font-size: 1.16rem; margin: 0; }
.khoi-kien-thuc__dau p { color: var(--nhat); font-size: 0.9rem; margin: 0; }

.khoi-kien-thuc__tatca {
  color: var(--xanh);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.khoi-kien-thuc__tatca:hover { text-decoration: underline; }

/* Dòng nhỏ trên tiêu đề: chấm màu của công cụ mà bài nói tới, rồi tên công
   cụ, rồi ngày. Đây là chỗ duy nhất phân biệt thẻ bài với thẻ công cụ. */
.the-bai__meta {
  align-items: center;
  color: var(--nhat);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 6px;
  margin: 0 0 7px;
}

.the-bai__cham {
  background: var(--mau);
  border-radius: 50%;
  flex: none;
  height: 7px;
  width: 7px;
}

.the-bai__nhan { color: var(--mau); font-weight: 600; }
.the-bai__ngay::before { content: "· "; }

/* Thẻ bài để tiêu đề hai dòng, đoạn tóm ba dòng rồi cắt bằng dấu ba chấm.
   Không cắt thì bài nào tóm tắt dài sẽ kéo cao cả hàng, hàng mất cân. */
.the-bai h2 { font-size: 1rem; line-height: 1.38; }

.the-bai__tom {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  line-clamp: 3;
  overflow: hidden;
}

/* Ô thứ tư: viền đứt và nền rỗng để đọc ra ngay là "lối đi tiếp", không
   phải thêm một bài nữa. Canh giữa cả hai chiều cho cân với ba thẻ cạnh nó. */
.the-tat-ca {
  align-items: center;
  background: none;
  border: 1px dashed var(--vien-dam);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}

.the-tat-ca::before { display: none; }

.the-tat-ca:hover {
  background: var(--xanh-mo);
  border-color: var(--xanh);
  border-style: solid;
}

.the-tat-ca__so {
  color: var(--muc);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.the-tat-ca__chu { color: var(--nhat); font-size: 0.88rem; margin-top: 5px; }
.the-tat-ca:hover .the-tat-ca__chu { color: var(--xanh); }

/* ---------------------------- Trang bài viết ------------------------ */

/* Bề ngang 44rem chứ không phải 74rem như khung chung: dòng chữ dài quá thì
   mắt trượt dòng, đọc mệt. 44rem cũng đúng bằng bề ngang khối banner nên
   hai thứ thẳng hàng nhau. */
.bai-viet { margin: 0 auto; max-width: 44rem; }

.duong-dan {
  color: var(--nhat);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.duong-dan a { color: var(--nhat); text-decoration: none; }
.duong-dan a:hover { color: var(--xanh); text-decoration: underline; }
.duong-dan span::before { content: "/"; margin: 0 7px; }

.bai-viet__dau { border-bottom: 1px solid var(--vien); margin-bottom: 26px; padding-bottom: 20px; }
.bai-viet__dau h1 { color: var(--muc); font-size: 1.72rem; line-height: 1.28; margin: 0 0 10px; }
.bai-viet__tom { color: var(--chu); font-size: 1.02rem; line-height: 1.6; margin: 0 0 12px; }

.bai-viet__meta {
  align-items: center;
  color: var(--nhat);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 8px;
}

.bai-viet__than { color: var(--chu); font-size: 1.02rem; line-height: 1.72; }
.bai-viet__than h2 { color: var(--muc); font-size: 1.26rem; margin: 30px 0 10px; }
.bai-viet__than h3 { color: var(--muc); font-size: 1.08rem; margin: 22px 0 8px; }
.bai-viet__than p { margin: 0 0 14px; }
.bai-viet__than ul, .bai-viet__than ol { margin: 0 0 14px; padding-left: 22px; }
.bai-viet__than li { margin-bottom: 6px; }
.bai-viet__than strong { color: var(--muc); }
.bai-viet__than img { border-radius: 10px; height: auto; max-width: 100%; }

.bai-viet__than table {
  border-collapse: collapse;
  display: block;
  margin: 0 0 16px;
  overflow-x: auto;
  width: 100%;
}

.bai-viet__than th, .bai-viet__than td {
  border-bottom: 1px solid var(--vien);
  padding: 9px 10px;
  text-align: left;
}

.bai-viet__than th { color: var(--muc); font-size: 0.92rem; white-space: nowrap; }

.bai-viet__than blockquote {
  border-left: 3px solid var(--mau, var(--xanh));
  color: var(--nhat);
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
}

/* Khối dẫn sang công cụ, đặt cuối bài. Đọc xong là dùng được ngay — đây mới
   là chỗ bài viết trả công, nên cho nó nổi hẳn lên bằng nền màu của công cụ. */
.moi-dung {
  background: var(--mau-mo);
  border: 1px solid var(--mau);
  border-radius: 14px;
  margin-top: 32px;
  padding: 20px 22px;
  text-align: center;
}

.moi-dung h2 { color: var(--muc); font-size: 1.12rem; margin: 0 0 6px; }
.moi-dung p { color: var(--chu); font-size: 0.94rem; margin: 0 0 14px; }

.moi-dung .nut {
  background: linear-gradient(135deg, var(--mau), var(--mau-2));
  border: 0;
  color: #fff;
}

/* ---------------------------- Kho mẫu văn bản ----------------------- */

/* Hai cột: nhóm và thẻ nằm yên bên trái, kết quả cuộn bên phải. Kho lên
   vài trăm mẫu vẫn lướt được vì bộ lọc luôn trong tầm mắt. */
.kho-mau {
  display: grid;
  gap: 24px;
  grid-template-columns: 15rem 1fr;
  margin-bottom: 26px;
}

/* Ô lưới mặc định có min-width:auto nên con rộng bao nhiêu nó nở bấy nhiêu,
   làm tràn ngang cả trang trên điện thoại. Phải ép min-width về 0. */
.kho-mau__ben, .kho-mau__chinh { min-width: 0; }

.kho-mau__ben { align-self: start; position: sticky; top: 14px; }

.ben-tieu {
  color: var(--nhat);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.ds-nhom { list-style: none; margin: 0 0 20px; padding: 0; }

.muc-nhom {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--chu);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.93rem;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 10px;
  text-align: left;
  transition: background 120ms, color 120ms;
  width: 100%;
}

.muc-nhom:hover { background: var(--mau-mo); color: var(--mau); }
.muc-nhom:focus-visible { outline: 3px solid var(--mau); outline-offset: -1px; }

.muc-nhom--chon {
  background: var(--mau-mo);
  color: var(--mau);
  font-weight: 700;
}

.muc-nhom__so {
  background: #eef0f4;
  border-radius: 999px;
  color: var(--nhat);
  flex: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 1px 8px;
}

.muc-nhom--chon .muc-nhom__so { background: var(--mau); color: #fff; }

.ds-the { display: flex; flex-wrap: wrap; gap: 6px; }

.the-nho {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 999px;
  color: var(--nhat);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 10px;
  transition: border-color 120ms, color 120ms, background 120ms;
}

.the-nho:hover { border-color: var(--mau); color: var(--mau); }
.the-nho:focus-visible { outline: 3px solid var(--mau); outline-offset: 2px; }

.the-nho--chon {
  background: var(--mau);
  border-color: var(--mau);
  color: #fff;
  font-weight: 600;
}

/* dải nhắc đang lọc cái gì, bấm vào từng cái để bỏ */
.dang-loc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.chip-bo {
  background: var(--mau-mo);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--mau);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 5px 12px;
}

.chip-bo:hover { border-color: var(--mau); }
.chip-bo--tat { background: none; color: var(--nhat); text-decoration: underline; }

.nhom-tieu {
  align-items: center;
  color: var(--muc);
  display: flex;
  font-size: 1.04rem;
  gap: 9px;
  margin: 22px 0 11px;
}

.nhom-tieu:first-child { margin-top: 0; }

.nhom-tieu span {
  background: #eef0f4;
  border-radius: 999px;
  color: var(--nhat);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 1px 8px;
}

.giua-nut { display: flex; justify-content: center; margin-top: 18px; }

.vao-nhom {
  background: none;
  border: 0;
  color: var(--mau);
  cursor: pointer;
  font: inherit;
  font-size: 0.89rem;
  font-weight: 600;
  margin-top: 10px;
  padding: 4px 0;
}

.vao-nhom:hover { text-decoration: underline; }
.vao-nhom:focus-visible { outline: 3px solid var(--mau); outline-offset: 2px; }

.thanh-loc {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  margin: 0 0 14px;
}

.o-xep { align-items: center; display: flex; gap: 8px; }
.o-xep > span { color: var(--nhat); font-size: 0.86rem; white-space: nowrap; }

.o-xep select {
  background: var(--the);
  border: 1px solid var(--vien-dam);
  border-radius: 999px;
  color: var(--chu);
  font: inherit;
  font-size: 0.89rem;
  padding: 8px 12px;
}

.o-tim {
  align-items: center;
  background: var(--the);
  border: 1px solid var(--vien-dam);
  border-radius: 999px;
  color: var(--nhat);
  display: flex;
  flex: 1 1 17rem;
  gap: 9px;
  max-width: 24rem;
  padding: 0 15px;
}

.o-tim:focus-within { border-color: var(--mau); color: var(--mau); }

.o-tim input {
  background: none;
  border: 0;
  color: var(--chu);
  flex: 1;
  font: inherit;
  min-width: 0;
  outline: none;
  padding: 10px 0;
}

.loc-nhom { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  background: var(--the);
  border: 1px solid var(--vien-dam);
  border-radius: 999px;
  color: var(--chu);
  cursor: pointer;
  font: inherit;
  font-size: 0.89rem;
  font-weight: 600;
  padding: 7px 14px;
  transition: background 130ms, border-color 130ms, color 130ms;
}

.chip:hover { border-color: var(--mau); color: var(--mau); }
.chip:focus-visible { outline: 3px solid var(--mau); outline-offset: 2px; }

.chip--chon {
  background: linear-gradient(135deg, var(--mau), var(--mau-2));
  border-color: transparent;
  color: #fff;
}

.dem-ket-qua { margin: 0 0 14px; }

.luoi-mau {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.the-mau {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 16px;
  transition: border-color 140ms, box-shadow 140ms;
}

.the-mau:hover {
  border-color: var(--mau);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1);
}

/* Nhãn đuôi tệp: mỗi định dạng một màu để nhìn là biết tải về mở bằng gì */
.the-mau__dau { align-items: center; display: flex; gap: 7px; }

.nhan-moi {
  background: var(--luc-mo);
  border-radius: 6px;
  color: var(--luc);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
}

.the-mau__the { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.the-mau__the .the-nho { font-size: 0.75rem; padding: 3px 9px; }

.the-mau__duoi {
  align-self: flex-start;
  background: #f2f4f7;
  border-radius: 6px;
  color: var(--nhat);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
}

.duoi--docx, .duoi--doc  { background: #eff4ff; color: #2557d6; }
.duoi--xlsx, .duoi--xls  { background: #e9faf2; color: #07794a; }
.duoi--pdf               { background: #fef2f1; color: #c0271c; }

.the-mau__ten { color: var(--muc); font-size: 1.04rem; margin: 0; }
.the-mau__mota { color: var(--nhat); font-size: 0.9rem; margin: 0; }

.the-mau__chan {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}

/* Nút tải lấy màu của trang mẫu cho ăn nhập với dãy chip phía trên.
   Dùng màu đặc chứ không đổ dải — đầu nhạt của dải quá sáng, chữ trắng
   đặt lên đọc không rõ. */
.the-mau__chan .nut { padding: 8px 17px; }
.mau-vanban .nut--chinh { background: var(--mau); border-color: var(--mau); }
.mau-vanban .nut--chinh:hover { background: #854d0e; border-color: #854d0e; }

/* ---------------------------- Banner đối tác ------------------------ */

.tai-tro {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 16px;
  margin: 0 0 18px;
  overflow: hidden;
  position: relative;
}

/* vạch màu mép trên cho đồng bộ với thẻ công cụ ở trang chủ */
.tai-tro::before {
  background: linear-gradient(90deg, var(--mau), var(--mau-2));
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.tai-tro__nhan {
  color: var(--nhat);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 16px 22px 0;
  text-transform: uppercase;
}

.tai-tro__trong {
  display: grid;
  gap: 18px;
  grid-template-columns: auto 1fr auto;
  padding: 10px 22px 20px;
}

/* Logo của đối tác: để nguyên màu của họ, không lồng vào ô đổ dải màu của
   trang. Nền trắng và viền nhạt cho logo nổi trên nền thẻ. */
.tai-tro__logo {
  align-self: start;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 12px;
  display: block;
  height: auto;
  padding: 7px 9px;
  width: 68px;
}

.tai-tro__chu { min-width: 0; }
.tai-tro__chu h2 { color: var(--muc); font-size: 1.16rem; margin: 0 0 5px; }
.tai-tro__gioi { margin: 0 0 7px; }

.tai-tro__cham {
  border-left: 3px solid var(--mau-2);
  color: var(--nhat);
  font-style: italic;
  margin: 0 0 9px;
  padding-left: 11px;
}

.tai-tro__viec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.tai-tro__viec li {
  background: var(--mau-mo);
  border-radius: 999px;
  color: var(--mau);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 4px 11px;
}

.tai-tro__noi { color: var(--nhat); font-size: 0.86rem; margin: 0; }

.tai-tro__lienhe {
  align-content: start;
  display: grid;
  gap: 8px;
  min-width: 13rem;
}

.tai-tro__lienhe .nut { width: 100%; }

@media (max-width: 52rem) {
  .tai-tro__trong { grid-template-columns: auto 1fr; }
  .tai-tro__lienhe { grid-column: 1 / -1; min-width: 0; }
}

/* ---------------------------- Hộp xem trước ------------------------- */

.xem {
  background: var(--the);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.28);
  color: var(--chu);
  display: flex;
  flex-direction: column;
  height: 88vh;
  max-height: 88vh;
  max-width: 68rem;
  padding: 0;
  width: 94vw;
}

.xem::backdrop { background: rgba(16, 24, 40, 0.55); }
.xem:not([open]) { display: none; }

.xem__dau {
  align-items: center;
  border-bottom: 1px solid var(--vien);
  display: flex;
  flex: none;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 18px;
}

.xem__nhan {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.xem__nhan strong { color: var(--muc); overflow-wrap: anywhere; }

.xem__dong {
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--nhat);
  cursor: pointer;
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
  padding: 8px 11px;
}

.xem__dong:hover { background: #f2f4f7; color: var(--muc); }

.xem__than {
  background: #eef0f4;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

/* khung giấy Word bên trong hộp: bỏ giới hạn chiều cao của .khung-xem vì
   chính hộp thoại đã lo phần cuộn */
.xem__giay { max-height: none; overflow: visible; padding: 0; }

.xem__bang {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(16, 24, 40, 0.12);
  margin-bottom: 14px;
  overflow: auto;
  padding: 12px;
}

.bang-xem td { border: 0; }
.xem__sheet { color: var(--muc); font-size: 0.95rem; margin: 6px 0 8px; }

.xem__pdf {
  background: #fff;
  border: 0;
  border-radius: 8px;
  display: block;
  height: 100%;
  min-height: 60vh;
  width: 100%;
}

.xem__chan {
  align-items: center;
  border-top: 1px solid var(--vien);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 13px 18px;
}

.xem__chan .cham { flex: 1 1 16rem; }

.nut--nho { font-size: 0.92rem; padding: 8px 15px; }

.the-mau__nut { display: flex; flex: none; gap: 7px; }

.ten-bam {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.ten-bam:hover { color: var(--mau); text-decoration: underline; }
.ten-bam:focus-visible { outline: 3px solid var(--mau); outline-offset: 2px; }

@media (max-width: 46rem) {
  .xem { border-radius: 12px; height: 92vh; max-height: 92vh; width: 96vw; }
  .xem__than { padding: 10px; }
  .the-mau__chan { align-items: stretch; flex-direction: column; }
  .the-mau__nut { justify-content: flex-end; }
}

/* ---------------------------- Bảng ---------------------------------- */

.khoi {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 14px;
  margin-top: 26px;
  padding: 22px 24px;
}

.khoi h2 { color: var(--muc); font-size: 1.16rem; margin: 0 0 8px; }

/* -------------------- Khối nội dung dài cuối trang ------------------ *

   Gập lại bằng CHECKBOX THUẦN CSS, cố ý không dùng JavaScript:

   1. Google đọc được toàn bộ dù đang gập. Nội dung nằm sẵn trong HTML, chỉ bị
      CSS che — từ khi Google ưu tiên bản điện thoại thì phần gập/mở được tính
      trọn vẹn, không bị trừ điểm.
   2. JS lỗi hay tải chậm thì nội dung vẫn còn đó, chỉ là mở sẵn.
   3. Bấm được bằng bàn phím vì <label> gắn với <input>.

   ⚠ ĐỪNG đổi sang display:none hay height:0 cho phần thân — cả hai đều là
   dấu hiệu che giấu nội dung. max-height + overflow thì không. */

.khoi-seo { margin-top: 26px; }

.khoi-seo__than {
  max-height: 24rem;
  overflow: hidden;
  position: relative;
}

/* Dải mờ dần ở đáy cho biết còn nữa ở dưới.
   ⚠ Phải mờ về --the (nền của .khoi, màu trắng), KHÔNG phải --nen (nền trang,
   màu xám nhạt) — lấy nhầm là hiện một vệt xám vắt ngang giữa khối. */
.khoi-seo__than::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--the, #fff) 88%);
  bottom: 0;
  content: "";
  height: 7rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.khoi-seo__mo { display: none; }
.khoi-seo__mo:checked ~ .khoi-seo__than { max-height: none; }
.khoi-seo__mo:checked ~ .khoi-seo__than::after { display: none; }

.khoi-seo__nut {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 999px;
  color: var(--xanh);
  cursor: pointer;
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  margin: 14px auto 0;
  padding: 9px 22px;
  text-align: center;
  transition: background 140ms, border-color 140ms;
  width: -moz-fit-content;
  width: fit-content;
}

.khoi-seo__nut:hover { background: var(--mau-mo, #eef2ff); border-color: var(--xanh); }
.khoi-seo__nut::after { content: "Hướng dẫn ▾"; }
.khoi-seo__mo:checked ~ .khoi-seo__nut::after { content: "Thu gọn ▴"; }
.khoi-seo__mo:focus-visible ~ .khoi-seo__nut { outline: 3px solid #a9c2ff; outline-offset: 2px; }

.khoi-seo h2 { color: var(--muc); font-size: 1.3rem; margin: 26px 0 10px; }
.khoi-seo h2:first-child { margin-top: 0; }
.khoi-seo h3 { color: var(--muc); font-size: 1.03rem; margin: 20px 0 6px; }
.khoi-seo p { margin: 0 0 12px; }
.khoi-seo ul, .khoi-seo ol { margin: 0 0 14px; padding-left: 22px; }
.khoi-seo li { margin-bottom: 6px; }

.khoi-seo__anh {
  border: 1px solid var(--vien);
  border-radius: 12px;
  display: block;
  height: auto;
  margin: 4px 0 6px;
  max-width: 100%;
}

.khoi-seo figure { margin: 18px 0; }
.khoi-seo figcaption { color: var(--nhat); font-size: 0.86rem; margin-top: 6px; }

/* Câu hỏi thường gặp.

   Trước đây mỗi câu là một <details> gập lại. Trạng xem rồi bỏ: hàng dấu cộng
   xếp đều tăm tắp trông rất "máy làm". Nay để hiện thẳng, câu hỏi in đậm hơi
   to, câu trả lời ngay dưới - đọc lướt vẫn nhanh mà không có vẻ khuôn mẫu.
   Google bóc cặp hỏi-đáp từ h3 + p bình thường, không cần <details>. */
.hoi-dap { margin-top: 4px; }

.hoi-dap h3 {
  border-top: 1px solid var(--vien);
  color: var(--muc);
  font-size: 1.05rem;
  margin: 0;
  padding: 18px 0 7px;
}

.hoi-dap h3:first-child { border-top: 0; padding-top: 4px; }
.hoi-dap p { margin: 0 0 4px; }

.bang { border-collapse: collapse; margin: 14px 0; width: 100%; }
.bang th, .bang td { border-bottom: 1px solid var(--vien); padding: 10px; text-align: left; }
.bang th { color: var(--muc); font-size: 0.9rem; }

.tot { color: var(--luc); font-weight: 600; }
.kha { color: var(--vang); font-weight: 600; }
.te  { color: var(--do);   font-weight: 600; }

/* ---------------------------- Danh sách trang ----------------------- */

.ds-trang {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 18px;
}

.o-trang {
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.o-trang.bo-qua { opacity: 0.32; }
.o-trang canvas, .o-trang img { display: block; height: auto; width: 100%; }

/* Khung xoay bản thu nhỏ. Xoay 90/270 thì cạnh dài nằm ngang, phải bóp lại
   cho khỏi tràn ra ngoài ô. */
.o-trang__anh { transform-origin: center; transition: transform 160ms; }
.o-trang__anh.xoay-doc { transform-origin: center; }
.o-trang:has(.xoay-doc) { overflow: hidden; }

.o-trang__so {
  background: #f9fafb;
  border-top: 1px solid var(--vien);
  color: var(--nhat);
  font-size: 0.8rem;
  padding: 5px 8px;
  text-align: center;
}

.o-trang__nut {
  display: flex;
  gap: 4px;
  left: 6px;
  position: absolute;
  top: 6px;
}

.nut-nho {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--vien-dam);
  border-radius: 6px;
  color: var(--chu);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.78rem;
  height: 27px;
  justify-content: center;
  padding: 0 7px;
}

.nut-nho:hover { background: #fff; border-color: var(--xanh); color: var(--xanh); }

/* ---------------------------- Danh sách tệp ------------------------- */

.ds-tep { list-style: none; margin: 0; padding: 16px; }

.hang-tep {
  align-items: center;
  background: var(--the);
  border: 1px solid var(--vien);
  border-radius: 10px;
  cursor: grab;
  display: flex;
  gap: 12px;
  margin-bottom: 9px;
  padding: 11px 13px;
}

.hang-tep:active { cursor: grabbing; }

.hang-tep__so {
  align-items: center;
  background: var(--xanh-mo);
  border-radius: 7px;
  color: var(--xanh);
  display: inline-flex;
  flex: none;
  font-size: 0.85rem;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.hang-tep__tin { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hang-tep__tin strong { color: var(--muc); overflow-wrap: anywhere; }
.hang-tep__nut { display: flex; flex: none; gap: 4px; }

/* ---------------------------- Chân trang ---------------------------- */

.chan {
  border-top: 1px solid var(--vien);
  margin-top: 40px;
  padding: 22px 16px 34px;
}

.chan__trong {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 74rem;
}

.chan a { color: var(--nhat); font-size: 0.9rem; text-decoration: none; }
.chan a:hover { color: var(--xanh); text-decoration: underline; }

/* ---------------------------- Màn hình hẹp -------------------------- */

/* Điện thoại: BỎ HẲN ảnh banner (Trạng chốt 25/09/2026) — ép xuống bề ngang
   điện thoại thì chữ trong banner không đọc được, mà lại tốn 68 KB. Chỉ giữ
   dải câu thương hiệu, lúc đó nó chiếm trọn khối nên bỏ luôn viền. */
@media (max-width: 46rem) {
  .bang-hieu picture { display: none; }
  .bang-hieu { border: 0; }
  .bang-hieu__cau { font-size: 0.95rem; padding: 13px 14px; }
  /* chia đều các dòng cho khỏi rớt một chữ lẻ xuống cuối */
  .bang-hieu__cau span { text-wrap: balance; }
}

@media (max-width: 60rem) {
  .loi-gioi-thieu h1 { font-size: 1.6rem; }
  .tieu-de-cong-cu h1 { font-size: 1.44rem; }
  .lam-viec { grid-template-columns: 1fr; }
  .ben-trai { border-bottom: 1px solid var(--vien); border-right: 0; }
  .day-nut-duoi { margin-top: 4px; }
  .khung-xem { max-height: 66vh; }
  .menu { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; }

  /* Kho mẫu: bỏ cột trái, đưa nhóm lên thành hàng chip cuộn ngang */
  .kho-mau { grid-template-columns: 1fr; gap: 16px; }
  .kho-mau__ben { position: static; }
  .ds-nhom {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .ds-nhom li { flex: none; }
  .muc-nhom {
    background: var(--the);
    border: 1px solid var(--vien);
    border-radius: 999px;
    padding: 7px 13px;
    white-space: nowrap;
    width: auto;
  }
  .muc-nhom--chon { border-color: var(--mau); }
  .ds-the { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ds-the .the-nho { white-space: nowrap; }
  .o-xep { flex: 1 1 auto; justify-content: flex-end; }
  .luoi-mau { grid-template-columns: 1fr; }
}

/* ==========================================================================
   KHI IN — chỗ này tạo ra tệp PDF cho Word và Excel.
   docx-preview đã dựng sẵn tờ giấy đúng khổ và đúng lề, nên lề trang in phải
   để 0, nếu không sẽ cộng lề hai lần và tràn sang trang sau.
   ========================================================================== */

@media print {
  @page { size: A4; margin: 0; }

  html, body { background: #fff; margin: 0; padding: 0; }
  .giua { max-width: none; padding: 0; }
  main { padding: 0; }

  .dau, .chan, .ben-trai, .ten-tep, .khoi, .tieu-de-cong-cu,
  .o-tha, .dang-lam, .bao, .bang-hieu { display: none !important; }

  .lam-viec { border: 0; border-radius: 0; display: block; overflow: visible; }
  .ben-phai { background: none; display: block; }

  .khung-xem { max-height: none; overflow: visible; padding: 0; }

  /* app tự thu nhỏ bằng `zoom` cho vừa màn hình; khi in phải trả về 1 */
  .khung-xem .docx-wrapper { zoom: 1 !important; }
  .khung-xem .to-giay      { zoom: 1 !important; }

  .khung-xem .docx-wrapper > section.docx,
  .khung-xem .to-giay {
    box-shadow: none;
    break-after: page;
    margin: 0 auto;
  }

  .khung-xem .docx-wrapper > section.docx:last-child,
  .khung-xem .to-giay:last-child { break-after: auto; }
}

/* Mục lục đầu khối bài viết (27/09/2026, trang Word sang PDF trở đi).
   Bấm một dòng mục lục khi khối đang thu gọn thì mục đích bị che dưới
   max-height. :has(:target) mở khối ra khi địa chỉ có #mục, KHÔNG JavaScript. */
.khoi-seo .muc-luc {
  background: var(--nen, #f6f7f9);
  border: 1px solid var(--vien);
  border-radius: 12px;
  margin: 8px 0 18px;
  padding: 12px 18px 12px 40px;
}
.khoi-seo .muc-luc li { margin-bottom: 4px; }
.khoi-seo h2[id] { scroll-margin-top: 16px; }
.khoi-seo__than:has(:target) { max-height: none; }
.khoi-seo__than:has(:target)::after { display: none; }