/* =========================================================
   HOC LAI XE SG - KIEN THUC HOC LAI XE (CAM NANG) - giao diện 2026
   Muc tieu: dong bo cam giac voi trang chu, dep - ro - de doc,
   khong can CSS ngoai (chi dung menu/footer share).
   Phạm vi: chỉ áp dụng cho giao diện Cẩm nang.
   ========================================================= */

.hlx-cam-nang-wp{
  /* He thong mau & nhịp theo trang chu */
  --hlx-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --hlx-text: #0f172a;         /* than xam den (khong den tuyet doi) */
  --hlx-muted: #64748b;        /* xam mo */
  --hlx-border: #e2e8f0;       /* vien nhat */
  --hlx-bg: #ffffff;
  --hlx-soft: #f8fafc;

  --hlx-brand: #f5c400;        /* vang chu dao */
  --hlx-brand-2: #ffd84d;      /* vang sang */
  --hlx-brand-3: #fff3b0;      /* vang nhat */
  --hlx-accent: #0ea5e9;       /* xanh nhat de nhan (khong xanh den) */
  --hlx-accent-2: #22c55e;     /* xanh la nhat (phu) */

  --hlx-radius: 14px;
  --hlx-radius-lg: 20px;

  --hlx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --hlx-shadow-md: 0 10px 22px rgba(15, 23, 42, .10);
  --hlx-shadow-lg: 0 18px 55px rgba(15, 23, 42, .16);

  --hlx-container: 1180px;
}

/* Nền tảng */
.hlx-cam-nang-wp body,
body.hlx-cam-nang-wp .tc-main{
  font-family: var(--hlx-font);
  color: var(--hlx-text);
}

body.hlx-cam-nang-wp .tc-main{
  font-size: 18px;
  line-height: 1.7;
  background: var(--hlx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Khung */
body.hlx-cam-nang-wp .tc-main .hlx-container.tc-wrap{
  max-width: var(--hlx-container);
  margin: 0 auto;
  padding: 0 16px;
}

/* Khoảng cách khối */
body.hlx-cam-nang-wp .tc-main .tc-section{
  padding: 56px 0;
}
@media (max-width: 768px){
  body.hlx-cam-nang-wp .tc-main .tc-section{ padding: 34px 0; }
}

/* Khung khối */
body.hlx-cam-nang-wp .tc-main .tc-panel{
  border: 1px solid var(--hlx-border);
  border-radius: var(--hlx-radius-lg);
  background: var(--hlx-bg);
  box-shadow: var(--hlx-shadow-sm);
  overflow: hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-panel + .tc-panel{
  margin-top: 18px;
}

/* Phần đầu */
body.hlx-cam-nang-wp .tc-main .tc-panel-head{
  padding: 26px 26px 0;
}
body.hlx-cam-nang-wp .tc-main .tc-panel-body{
  padding: 22px 26px 26px;
}
@media (max-width: 768px){
  body.hlx-cam-nang-wp .tc-main .tc-panel-head{ padding: 18px 16px 0; }
  body.hlx-cam-nang-wp .tc-main .tc-panel-body{ padding: 14px 16px 16px; }
}

/* Tiêu đề */
body.hlx-cam-nang-wp .tc-main .tc-title{
  margin: 0;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--hlx-text);
}
body.hlx-cam-nang-wp .tc-main .tc-sub{
  margin: 10px 0 0;
  color: var(--hlx-muted);
  font-size: 16px;
}

/* Khối mở đầu */
body.hlx-cam-nang-wp .tc-main .tc-hero{
  padding: 0;
  border: 1px solid var(--hlx-border);
  border-radius: var(--hlx-radius-lg);
  background:
    radial-gradient(1200px 420px at 12% 8%, rgba(245,196,0,.30), transparent 60%),
    radial-gradient(900px 380px at 92% 30%, rgba(14,165,233,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f8fafc 100%);
  box-shadow: var(--hlx-shadow-md);
  overflow: hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-hero-inner{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  padding: 34px 26px;
  align-items: center;
}
@media (max-width: 980px){
  body.hlx-cam-nang-wp .tc-main .tc-hero-inner{
    grid-template-columns: 1fr;
    padding: 22px 16px;
  }
}

/* Nhãn nhỏ */
body.hlx-cam-nang-wp .tc-main .tc-hero-kicker span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245,196,0,.18);
  border: 1px solid rgba(245,196,0,.35);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #854d0e;
}

/* H1 */
body.hlx-cam-nang-wp .tc-main .tc-hero h1{
  margin: 14px 0 0;
  font-size: clamp(26px, 4.3vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 950;
  color: var(--hlx-text);
  text-shadow: none !important;
}
body.hlx-cam-nang-wp .tc-main .tc-hero p{
  margin: 14px 0 0;
  color: var(--hlx-muted);
  font-size: 17px;
}
body.hlx-cam-nang-wp .tc-main .tc-hero strong{
  color: var(--hlx-text);
  font-weight: 800;
}

/* Khối mở đầu media */
body.hlx-cam-nang-wp .tc-main .tc-hero-media{
  border-radius: var(--hlx-radius-lg);
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: var(--hlx-shadow-sm);
  overflow: hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-hero-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Nút bấm */
body.hlx-cam-nang-wp .tc-main .tc-hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
body.hlx-cam-nang-wp .tc-main .tc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  user-select: none;
  border: 1px solid transparent;
}
body.hlx-cam-nang-wp .tc-main .tc-btn:focus{ outline: 3px solid rgba(14,165,233,.28); outline-offset: 2px; }

body.hlx-cam-nang-wp .tc-main .tc-btn-primary{
  background: linear-gradient(180deg, var(--hlx-brand-2), var(--hlx-brand));
  color: #111827;
  border-color: rgba(0,0,0,.10);
  box-shadow: var(--hlx-shadow-sm);
}
body.hlx-cam-nang-wp .tc-main .tc-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--hlx-shadow-md);
  filter: saturate(1.02);
}

body.hlx-cam-nang-wp .tc-main .tc-btn-ghost{
  background: rgba(255,255,255,.85);
  border-color: var(--hlx-border);
  color: var(--hlx-text);
}
body.hlx-cam-nang-wp .tc-main .tc-btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: var(--hlx-shadow-sm);
}

body.hlx-cam-nang-wp .tc-main .tc-btn-soft{
  background: rgba(14,165,233,.10);
  border-color: rgba(14,165,233,.20);
  color: #075985;
}
body.hlx-cam-nang-wp .tc-main .tc-btn-soft:hover{
  transform: translateY(-1px);
  box-shadow: var(--hlx-shadow-sm);
}

/* Lưới */
body.hlx-cam-nang-wp .tc-main .tc-grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
body.hlx-cam-nang-wp .tc-main .tc-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
body.hlx-cam-nang-wp .tc-main .tc-steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 980px){
  body.hlx-cam-nang-wp .tc-main .tc-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.hlx-cam-nang-wp .tc-main .tc-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  body.hlx-cam-nang-wp .tc-main .tc-grid-4,
  body.hlx-cam-nang-wp .tc-main .tc-grid-3,
  body.hlx-cam-nang-wp .tc-main .tc-steps{ grid-template-columns: 1fr; }
}

/* Thẻ nội dung */
body.hlx-cam-nang-wp .tc-main .tc-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--hlx-border);
  border-radius: var(--hlx-radius);
  padding: 16px 16px 14px;
  box-shadow: var(--hlx-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.hlx-cam-nang-wp .tc-main .tc-card h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
body.hlx-cam-nang-wp .tc-main .tc-card p{
  margin: 10px 0 0;
  color: var(--hlx-muted);
  font-size: 15px;
}
body.hlx-cam-nang-wp .tc-main .tc-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--hlx-shadow-md);
  border-color: rgba(14,165,233,.28);
}

/* Biểu tượng */
body.hlx-cam-nang-wp .tc-main .tc-ico{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,196,0,.18);
  border: 1px solid rgba(245,196,0,.30);
  color: #854d0e;
  margin-bottom: 10px;
  overflow: hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-ico svg{ width: 22px; height: 22px; }
body.hlx-cam-nang-wp .tc-main .tc-ico img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Liên kết trong thẻ */
body.hlx-cam-nang-wp .tc-main .tc-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 900;
  font-size: 14px;
  color: #0369a1;
  text-decoration: none;
}
body.hlx-cam-nang-wp .tc-main .tc-link:hover{
  text-decoration: underline;
}

/* Liên hệ nhanh: gọn hơn */
body.hlx-cam-nang-wp .tc-main .tc-hero-quick .tc-btn{
  padding: 11px 14px;
}

/* Canh neo khi có thanh dính */
body.hlx-cam-nang-wp .tc-main section[id]{ scroll-margin-top: 90px; }

/* Giới hạn độ dài đoạn */
body.hlx-cam-nang-wp .tc-main .tc-panel-body p{ max-width: 70ch; }


/* ====== KHUNG GIAO DIỆN 2026 – TRẮNG SÁNG (BƠM TỪ PROMPT) ======
   - Áp dụng CHỈ cho theme Cẩm nang (body.hlx-cam-nang-wp .tc-main)
   - Không ảnh hưởng menu/footer dùng chung
============================================================== */

/* Nền + biến thiết kế (scope theo body class) */
body.hlx-cam-nang-wp .tc-main{
  /* Màu nền & chữ */
  --nen: #ffffff;
  --nen-phu: #f7fafc;
  --chu: #0f172a;
  --chu-phu: #475569;
  --vien: rgba(15, 23, 42, .10);
  --vien-dam: rgba(15, 23, 42, .16);

  /* Màu chủ đạo */
  --xanh-la: #16a34a;
  --xanh-la-dam: #0f7a36;
  --vang: #f7c948;
  --vang-dam: #d9a51c;
  --do: #ef4444;
  --do-dam: #c81e1e;

  /* Bóng mềm */
  --bong-1: 0 8px 24px rgba(15, 23, 42, .08);
  --bong-2: 0 16px 40px rgba(15, 23, 42, .10);
  --bong-3: 0 24px 64px rgba(15, 23, 42, .12);

  /* Bo góc */
  --bo-1: 12px;
  --bo-2: 16px;
  --bo-3: 22px;

  /* Khoảng cách */
  --k-1: 6px;
  --k-2: 10px;
  --k-3: 14px;
  --k-4: 18px;
  --k-5: 24px;
  --k-6: 32px;
  --k-7: 44px;
  --k-8: 64px;

  /* Cỡ chữ co giãn */
  --c-co-ban: clamp(15px, 0.95vw + 12px, 17px);
  --c-h1: clamp(30px, 2.6vw + 18px, 46px);
  --c-h2: clamp(22px, 1.6vw + 14px, 30px);
  --c-h3: clamp(18px, 1.0vw + 12px, 22px);

  /* Tốc độ chuyển */
  --nhanh: 160ms;
  --vua: 220ms;

  font-size: var(--c-co-ban);
  line-height: 1.65;
  color: var(--chu);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(247, 201, 72, .16), transparent 55%),
    radial-gradient(900px 500px at 95% 0%, rgba(22, 163, 74, .12), transparent 55%),
    linear-gradient(#fff, #fff);
  letter-spacing: .1px;
}

/* Reset nhẹ trong phạm vi Cẩm nang */
body.hlx-cam-nang-wp .tc-main img,
body.hlx-cam-nang-wp .tc-main svg,
body.hlx-cam-nang-wp .tc-main video{
  display:block;
  max-width:100%;
  height:auto;
}

/* Tiêu đề + đoạn văn */
body.hlx-cam-nang-wp .tc-main h1,
body.hlx-cam-nang-wp .tc-main h2,
body.hlx-cam-nang-wp .tc-main h3{
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--k-4) 0;
  text-wrap: balance;
  color: var(--chu);
}
body.hlx-cam-nang-wp .tc-main h1{ font-size: var(--c-h1); }
body.hlx-cam-nang-wp .tc-main h2{ font-size: var(--c-h2); }
body.hlx-cam-nang-wp .tc-main h3{ font-size: var(--c-h3); }
body.hlx-cam-nang-wp .tc-main p{ margin: 0 0 var(--k-4) 0; color: var(--chu-phu); }
body.hlx-cam-nang-wp .tc-main strong{ color: var(--chu); }

/* Focus rõ */
body.hlx-cam-nang-wp .tc-main :where(a, button, input, textarea, select):focus-visible{
  outline: 3px solid rgba(247, 201, 72, .65);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Khung căn giữa (đồng bộ trang chủ) */
body.hlx-cam-nang-wp .tc-main .tc-wrap{
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* Section spacing */
body.hlx-cam-nang-wp .tc-main .tc-section{
  padding: var(--k-8) 0;
}
body.hlx-cam-nang-wp .tc-main .tc-section.tc-panel{
  padding: 0; /* panel tự có padding */
}

/* Thẻ/panel */
body.hlx-cam-nang-wp .tc-main .tc-panel{
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--vien);
  border-radius: var(--bo-3);
  box-shadow: var(--bong-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-panel-head{
  padding: var(--k-6) var(--k-6) var(--k-4);
}
body.hlx-cam-nang-wp .tc-main .tc-panel-body{
  padding: 0 var(--k-6) var(--k-6);
}
@media (max-width: 900px){
  body.hlx-cam-nang-wp .tc-main .tc-panel-head{ padding: var(--k-5) var(--k-5) var(--k-3); }
  body.hlx-cam-nang-wp .tc-main .tc-panel-body{ padding: 0 var(--k-5) var(--k-5); }
}

/* Tiêu đề có gạch nhấn */
body.hlx-cam-nang-wp .tc-main .tc-title{
  display:inline-block;
  position:relative;
  padding-bottom: 8px;
}
body.hlx-cam-nang-wp .tc-main .tc-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:56%;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(247,201,72,1), rgba(22,163,74,1));
  opacity:.95;
}

/* Lưới */
body.hlx-cam-nang-wp .tc-main .tc-grid-3,
body.hlx-cam-nang-wp .tc-main .tc-grid-4{
  display:grid;
  gap: var(--k-5);
}
body.hlx-cam-nang-wp .tc-main .tc-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.hlx-cam-nang-wp .tc-main .tc-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px){
  body.hlx-cam-nang-wp .tc-main .tc-grid-3,
  body.hlx-cam-nang-wp .tc-main .tc-grid-4{ grid-template-columns: 1fr; }
}

/* Card */
body.hlx-cam-nang-wp .tc-main .tc-card{
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--vien);
  border-radius: var(--bo-2);
  box-shadow: var(--bong-1);
  padding: var(--k-5);
  transition: transform var(--nhanh) ease, box-shadow var(--nhanh) ease, border-color var(--vua) ease;
}
body.hlx-cam-nang-wp .tc-main .tc-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--bong-2);
  border-color: var(--vien-dam);
}

/* Nút */
body.hlx-cam-nang-wp .tc-main .tc-btn{
  appearance:none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform var(--nhanh) ease, box-shadow var(--nhanh) ease, background var(--vua) ease, border-color var(--vua) ease;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
  user-select:none;
}
body.hlx-cam-nang-wp .tc-main .tc-btn:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}
body.hlx-cam-nang-wp .tc-main .tc-btn-primary{
  background: linear-gradient(180deg, rgba(247,201,72,1), rgba(217,165,28,1));
  color: #1f2937;
}
body.hlx-cam-nang-wp .tc-main .tc-btn-soft{
  background: linear-gradient(180deg, rgba(22,163,74,1), rgba(15,122,54,1));
  color: #ffffff;
}
body.hlx-cam-nang-wp .tc-main .tc-btn-ghost{
  background: rgba(255,255,255,.82);
  border-color: var(--vien-dam);
  color: var(--chu);
  box-shadow: none;
}
body.hlx-cam-nang-wp .tc-main .tc-btn-ghost:hover{ box-shadow: var(--bong-1); }

/* Link */
body.hlx-cam-nang-wp .tc-main .tc-link{
  font-weight: 800;
  color: var(--xanh-la-dam);
  text-decoration: none;
}
body.hlx-cam-nang-wp .tc-main .tc-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* HERO: làm “đã” hơn + đúng trắng sáng */
body.hlx-cam-nang-wp .tc-main .tc-hero{
  border: 1px solid var(--vien);
  border-radius: var(--bo-3);
  background:
    radial-gradient(1200px 520px at 12% 10%, rgba(247,201,72,.22), transparent 60%),
    radial-gradient(900px 480px at 92% 25%, rgba(22,163,74,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 45%, var(--nen-phu) 100%);
  box-shadow: var(--bong-2);
  overflow:hidden;
}
body.hlx-cam-nang-wp .tc-main .tc-hero-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--k-6);
  padding: var(--k-8) var(--k-6);
  align-items:center;
}
@media (max-width: 980px){
  body.hlx-cam-nang-wp .tc-main .tc-hero-inner{ grid-template-columns: 1fr; padding: var(--k-6) var(--k-5); }
}
body.hlx-cam-nang-wp .tc-main .tc-hero-media img{
  border-radius: var(--bo-3);
  border: 1px solid var(--vien);
  box-shadow: var(--bong-1);
}

/* Kicker */
body.hlx-cam-nang-wp .tc-main .tc-hero-kicker span{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--vien);
  background: rgba(247, 201, 72, .16);
  color: var(--chu);
  font-weight: 800;
}

/* Steps */
body.hlx-cam-nang-wp .tc-main .tc-steps{
  display:grid;
  gap: var(--k-4);
}
body.hlx-cam-nang-wp .tc-main .tc-steps .tc-card{
  padding: var(--k-4) var(--k-5);
}

/* Giới hạn chiều dài đoạn dài */
body.hlx-cam-nang-wp .tc-main .tc-sub{
  max-width: 72ch;
}

/* Tối ưu chuyển động */
@media (prefers-reduced-motion: reduce){
  body.hlx-cam-nang-wp .tc-main *{ transition: none !important; scroll-behavior: auto !important; }
}


/* ===== MODAL (Video / Hình ảnh) ===== */
html.tc-modal-open,
html.tc-modal-open body{
  overflow: hidden;
}

.tc-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  padding: 18px;
  height: 100dvh;
}

.tc-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, .72);
  backdrop-filter: blur(8px);
}

.tc-modal-dialog{
  position: relative;
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.55);
}

.tc-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 28px;
  line-height: 44px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.tc-modal-media{
  width: 100%;
  background: rgba(0,0,0,.06);
}

.tc-modal-iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.tc-modal-img{
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  background: rgba(0,0,0,.03);
}


/* ===== MODAL bản mới (đặt tên __ để dùng chung ở trang chủ) ===== */
.tc-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, .72);
  backdrop-filter: blur(8px);
}
.tc-modal__dialog{
  position: relative;
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border-radius: 22px;
  background: #0b1220;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}
.tc-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.tc-modal__body{ padding: 0; }

/* Video theo tỉ lệ 16:9 */
.tc-modal__ratio{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}
.tc-modal__ratio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Ảnh: căn giữa đúng chuẩn (không dính góc) */
.tc-modal__imgwrap{
  width: 100%;
  height: 82vh;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.tc-modal__img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  display:block;
  background:#000;
}


.tc-modal-footer{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.tc-modal-watch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(13, 62, 115, .10);
  border: 1px solid rgba(13, 62, 115, .18);
  font-weight: 700;
  text-decoration: none;
}

.tc-modal-caption{
  font-weight: 700;
  opacity: .88;
}

/* ===== Gallery thumb chuẩn 16:9 & giãn khoảng cách ===== */
.tc-photos .tc-grid-3{
  gap: 22px;
}

.tc-photo-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
}

/* ====== FIX: căn giữa modal đúng chuẩn (không dính lên trên) ====== */
.tc-modal.is-open{ display:flex !important; align-items:center !important; justify-content:center !important; }
.tc-modal__dialog{ margin: 0 !important; max-height: calc(100dvh - 36px) !important; }
.tc-modal__imgwrap{ display:flex !important; align-items:center !important; justify-content:center !important; }

@media (max-width: 860px){
  .tc-modal{ padding: 12px; }
  .tc-modal-dialog{ width: 98vw; border-radius: 18px; }
  .tc-modal-close{ width: 40px; height: 40px; line-height: 40px; border-radius: 12px; }
}

/* ===== Tiêu đề trang (page.php) gọn, giống phong cách trang chủ ===== */
.tc-page-head{ margin-bottom: 14px; }
.tc-page-title{
  margin: 6px 0 10px;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.tc-page-bar{
  height: 4px;
  width: 140px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5c84b, #2bb673);
}

/* ===== Fix tiêu đề + nút ở khối Video/Hình ảnh trên mobile (tránh bóp chữ) ===== */
@media (max-width: 760px){
  .tc-page-title{ font-size: 28px; }

  .tc-media-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .tc-media-actions{
    width: 100%;
    justify-content: flex-start;
  }
  .tc-title-sm{
    font-size: clamp(20px, 6.2vw, 26px);
    line-height: 1.15;
  }
}


/* =========================================================
   FIX MODAL ẢNH (v26) - CHỐT 1 NGUỒN CSS + CĂN GIỮA CHUẨN MOBILE
   Lý do: trước đây CSS modal bị trùng giữa cam-nang-index.css và cam-nang-style.css,
   khiến modal bị kéo sát lên trên hoặc không hiện do bị ghi đè.
========================================================= */
#tc-modal.tc-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  padding: 18px;
  height: 100dvh;
}
#tc-modal.tc-modal.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#tc-modal .tc-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, .72);
  backdrop-filter: blur(8px);
}
#tc-modal .tc-modal__dialog{
  position: relative;
  margin: 0 !important;
  width: min(1100px, 96vw);
  max-height: 92dvh;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.55);
}
#tc-modal .tc-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 28px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

#tc-modal .tc-modal__close:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

#tc-modal .tc-modal__close:active{
  transform: translateY(0);
}
#tc-modal .tc-modal__body{
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tc-modal .tc-modal__imgwrap{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  max-height: calc(92dvh - 28px);
}
#tc-modal .tc-modal__img{
  display:block;
  width: auto;
  max-width: 100%;
  max-height: calc(92dvh - 28px);
  object-fit: contain;
  background: rgba(0,0,0,.03);
  border-radius: 14px;
}
@media (max-width: 540px){
  #tc-modal.tc-modal{ padding: 10px; }
  #tc-modal .tc-modal__body{ padding: 10px; }
  #tc-modal .tc-modal__dialog{ width: calc(100vw - 20px); border-radius: 18px; }
}