/* ==========================================================================
   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; }

/* ---------------------- Bảy màu của bảy công cụ ---------------------- */

/* 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; }

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

.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: 7px;
  padding: 7px 13px;
  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; }
}

/* ---------------------------- 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; }

.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; }
}