/*
Theme Name: TNH — Ứng dụng AI
Theme URI: https://trannguyenhoan.com
Description: Hệ thống thiết kế riêng cho trannguyenhoan.com — bám đúng bảng màu AgentX (nền tối, xanh electric, đỏ). Nền GeneratePress + GenerateBlocks.
Author: Trần Nguyên Hoàn
Template: generatepress
Version: 3.0.0
Text Domain: tnh
*/

/* ============================================================
   0. FONT TỰ HOST
   ============================================================ */
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/be-vietnam-pro-400.woff2') format('woff2'); }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/be-vietnam-pro-600.woff2') format('woff2'); }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/be-vietnam-pro-700.woff2') format('woff2'); }

/* ============================================================
   1. BẢNG MÀU — lấy đúng từ trang AgentX gốc
   ============================================================ */
:root {
  /* Nền tối */
  --nen-tham:  #080C16;
  --nen-toi-2: #0C1322;
  --navy:      #0F1A30;
  --bang:      #101A2E;

  /* Xanh electric — màu nhấn chính */
  --xanh:      #2BB7FF;
  --xanh-nhat: #86D6FF;
  --xanh-dam:  #0C68A9;
  --xanh-doc:  linear-gradient(100deg,#86D6FF,#2BB7FF 55%,#1593E6);

  /* Đỏ — dành cho nút hành động chính */
  --do:        #E11D2A;
  --do-dam:    #C8141B;
  --do-doc:    linear-gradient(180deg,#F33,#C8141B);

  /* Điểm xuyết */
  --vang:      #F5A623;
  --vang-doc:  linear-gradient(135deg,#F5A623,#E0901A);
  --xanh-la:   #1FA95B;

  /* Chữ trên nền tối */
  --chu-toi:   #C6D0E2;
  --dau-toi:   #EEF4FF;
  --mo-toi:    #8a95ab;

  /* Nền sáng và chữ trên nền sáng */
  --sang:      #F3F6FC;
  --sang-2:    #EAF0FA;
  --sang-vien: #E2E8F3;
  --muc:       #13203A;
  --muc-mo:    #5b6678;
  --trang:     #FFFFFF;

  --vien-toi:  rgba(255,255,255,.10);
  --vien-xanh: rgba(43,183,255,.35);

  /* Kiểu chữ */
  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ma: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --co-chu: 17px;
  --cao-dong: 1.72;

  /* Bề ngang */
  --khung: 1240px;
  --khung-bai: 760px;

  /* Khoảng cách */
  --kc-2:8px; --kc-3:12px; --kc-4:16px; --kc-5:24px;
  --kc-6:32px; --kc-7:48px; --kc-8:64px; --kc-9:96px;

  /* Bo góc — theo trang gốc */
  --goc-nho: 9px;
  --goc:     16px;
  --goc-to:  22px;
  --goc-vien:999px;

  /* Bóng có màu — đặc trưng trang gốc */
  --bong-s: 0 16px 34px -18px rgba(0,0,0,.7);
  --bong-w: 0 28px 56px -28px rgba(20,40,80,.28);
  --bong-do: 0 14px 30px -12px rgba(225,29,42,.55);
  --bong-do-to: 0 24px 44px -14px rgba(225,29,42,.65);
  --bong-xanh: 0 30px 60px -28px rgba(43,183,255,.4);

  --chuyen: .18s cubic-bezier(.4,0,.2,1);
}
@media (min-width:769px) { :root { --co-chu:18px; } }

/* ============================================================
   2. NỀN CHUNG — mặc định là nền tối
   ============================================================ */
html { font-size: var(--co-chu); }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--cao-dong);
  color: var(--chu-toi);
  background: var(--nen-tham);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.grid-container { max-width: var(--khung); padding-left: var(--kc-4); padding-right: var(--kc-4); }
@media (min-width:769px) { .grid-container { padding-left: var(--kc-6); padding-right: var(--kc-6); } }
/* Trang trong: .inside-article da co le riêng — bo le cua .grid-container de khong cong don */
body:not(.home) .site-content > .grid-container { padding-left: 0; padding-right: 0; }
/* Nhung phai giu mot chut le o mep man hinh hep */
@media (max-width:768px) {
  body:not(.home) .site-content > .grid-container { padding-left: var(--kc-3); padding-right: var(--kc-3); }
  .single-post .inside-article, body:not(.home).page .inside-article { padding: var(--kc-5) var(--kc-4); }
  .tnh-tru-hero .grid-container { padding-left: var(--kc-4); padding-right: var(--kc-4); }
}
.site-content { background: var(--nen-tham); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font);
  color: var(--dau-toi);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem,4.8vw,3.2rem); margin-bottom:.4em; }
h2 { font-size: clamp(1.55rem,3.1vw,2.1rem); margin:2em 0 .6em; }
h3 { font-size: clamp(1.22rem,2.1vw,1.45rem); margin:1.7em 0 .5em; }
h4 { font-size:1.12rem; margin:1.4em 0 .45em; }

a { color: var(--xanh); text-decoration:none; }
a:hover { color: var(--xanh-nhat); }
.entry-content a { text-decoration: underline; text-underline-offset:3px; text-decoration-thickness:1px; }

::selection { background: var(--xanh); color: var(--navy); }

/* Nhãn nhỏ — "eyebrow" như trang gốc */
.tnh-nhan-nho {
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.76rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color: var(--xanh);
}
.tnh-nhan-nho::before {
  content:''; width:22px; height:2px; background: var(--xanh); border-radius:2px;
}

.tnh-dau-khoi { margin-bottom: var(--kc-7); max-width:760px; }
.tnh-dau-khoi h2 { margin-top:0; margin-bottom:.3em; }
.tnh-dau-khoi p { color: var(--mo-toi); margin-bottom:0; font-size:1.06em; }

/* Khối nền sáng xen kẽ — .lt của trang gốc */
.tnh-khoi--sang { background: var(--sang); color: var(--muc); }
.tnh-khoi--sang h1,.tnh-khoi--sang h2,.tnh-khoi--sang h3,.tnh-khoi--sang h4 { color: var(--muc); }
.tnh-khoi--sang .tnh-dau-khoi p { color: var(--muc-mo); }
.tnh-khoi--sang .tnh-nhan-nho { color: var(--xanh-dam); }
.tnh-khoi--sang .tnh-nhan-nho::before { background: var(--xanh-dam); }

/* ============================================================
   3. NÚT BẤM
   ============================================================ */
.tnh-nut {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9em 1.9em;
  font-family: var(--font); font-size:.97rem; font-weight:700; line-height:1.2;
  border-radius: var(--goc-vien);
  border:0; cursor:pointer; text-decoration:none !important;
  background: var(--do-doc); color:#fff !important;
  box-shadow: var(--bong-do);
  transition: transform var(--chuyen), box-shadow var(--chuyen), filter var(--chuyen);
}
.tnh-nut:hover { transform: translateY(-2px); box-shadow: var(--bong-do-to); color:#fff !important; }
.tnh-nut--xanh { background: var(--xanh-doc); color: var(--navy) !important; box-shadow: var(--bong-xanh); }
.tnh-nut--xanh:hover { color: var(--navy) !important; filter:brightness(1.06); }
.tnh-nut--vien {
  background: transparent; color: var(--dau-toi) !important;
  border:1.5px solid var(--vien-xanh); box-shadow:none;
}
.tnh-nut--vien:hover { border-color: var(--xanh); background: rgba(43,183,255,.08); color: var(--xanh) !important; }
.tnh-khoi--sang .tnh-nut--vien { color: var(--muc) !important; border-color: var(--sang-vien); }
.tnh-khoi--sang .tnh-nut--vien:hover { border-color: var(--xanh-dam); color: var(--xanh-dam) !important; }
.tnh-nut--nho { padding:.6em 1.25em; font-size:.89rem; }

/* ============================================================
   4. ĐẦU TRANG
   ============================================================ */
.site-header {
  background: var(--navy);
  border-bottom:1px solid var(--vien-toi);
}
.site-header .inside-header { padding-top: var(--kc-4); padding-bottom: var(--kc-4); }
.site-branding .main-title { font-size:1.28rem; font-weight:800; letter-spacing:-.02em; margin:0; }
.site-branding .main-title a { color: var(--dau-toi); }
.site-branding .main-title a:hover { color: var(--xanh); }
.site-description { font-size:.79rem; color: var(--mo-toi); margin:3px 0 0; }

.main-navigation, .main-navigation .main-nav ul { background: transparent; }
.main-navigation .main-nav > ul > li > a {
  font-weight:600; font-size:.94rem; color: var(--chu-toi);
  padding-left:.85em; padding-right:.85em;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a { color: var(--xanh); }
.main-navigation .main-nav ul li.tnh-cta-menu > a {
  background: var(--do-doc); color:#fff; border-radius: var(--goc-vien);
  margin-left: var(--kc-3); padding:.6em 1.25em; box-shadow: var(--bong-do);
}
.main-navigation .main-nav ul li.tnh-cta-menu > a:hover { color:#fff; transform: translateY(-1px); }
.main-navigation ul ul {
  background: var(--bang); border:1px solid var(--vien-toi);
  border-radius: var(--goc-nho); box-shadow: var(--bong-s); overflow:hidden;
}
.main-navigation ul ul li a { font-size:.9rem; color: var(--chu-toi); }
.menu-toggle, .main-navigation .menu-toggle { color: var(--dau-toi); }

/* ============================================================
   5. HERO
   ============================================================ */
.tnh-hero {
  background:
    radial-gradient(ellipse 70% 60% at 76% 18%, rgba(43,183,255,.20), transparent 62%),
    radial-gradient(ellipse 55% 50% at 8% 92%, rgba(225,29,42,.14), transparent 60%),
    var(--nen-tham);
  padding: clamp(3rem,7vw,5.5rem) 0;
  border-bottom:1px solid var(--vien-toi);
}
.tnh-hero__luoi { display:grid; gap: var(--kc-7); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px) { .tnh-hero__luoi { grid-template-columns:1.32fr .68fr; gap: var(--kc-8); } }
.tnh-hero .tnh-nhan-nho { margin-bottom: var(--kc-4); }
.tnh-hero h1 {
  margin:0 0 var(--kc-4);
  font-size: clamp(2.1rem,5.2vw,3.5rem); line-height:1.1;
}
.tnh-hero h1 em {
  font-style:normal;
  background: var(--xanh-doc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tnh-hero__mo-ta {
  color: var(--chu-toi); font-size: clamp(1.02rem,1.7vw,1.19rem);
  line-height:1.62; max-width:34em; margin:0 0 var(--kc-6);
}
.tnh-hero__nut { display:flex; flex-wrap:wrap; gap: var(--kc-4); }

/* Khung ảnh chân dung — viền phát sáng như trang gốc */
.tnh-hero__anh { position:relative; isolation:isolate; }
.tnh-hero__anh img,
.tnh-hero__anh .wp-block-image img {
  width:100%; height:auto; display:block;
  border-radius: var(--goc-to);
  border:1px solid var(--vien-xanh);
  box-shadow: var(--bong-xanh);
}
.tnh-hero__anh::after {
  content:''; position:absolute; inset:-14px -14px 22px -14px; z-index:-1;
  background: radial-gradient(ellipse at center, rgba(43,183,255,.22), transparent 68%);
  border-radius: var(--goc-to);
}
.tnh-hero__anh--trong {
  aspect-ratio:4/5; border-radius: var(--goc-to);
  border:1px dashed var(--vien-xanh);
  display:flex; align-items:center; justify-content:center;
  color: var(--mo-toi); font-size:.88rem; text-align:center; padding: var(--kc-5);
}
.tnh-hero__so {
  display:flex; flex-wrap:wrap; gap: var(--kc-7);
  margin-top: var(--kc-7); padding-top: var(--kc-5);
  border-top:1px solid var(--vien-toi);
}
.tnh-hero .tnh-hero__so strong { display:block; font-size:1.6rem; color: var(--dau-toi); font-weight:800; line-height:1.2; }
.tnh-hero__so span { font-size:.85rem; color: var(--mo-toi); }

/* ============================================================
   6. KHỐI TRANG
   ============================================================ */
.tnh-khoi { padding: clamp(3rem,6.5vw,5.5rem) 0; }
.tnh-khoi--dip { background: var(--nen-toi-2); }

/* ============================================================
   7. BA TRỤ CỘT
   ============================================================ */
.tnh-tru-luoi { display:grid; gap: var(--kc-5); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.tnh-tru-the {
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background: var(--bang); border:1px solid var(--vien-toi);
  border-radius: var(--goc); padding: var(--kc-6);
  text-decoration:none !important; color:inherit;
  transition: border-color var(--chuyen), box-shadow var(--chuyen), transform var(--chuyen);
}
.tnh-tru-the::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--xanh-doc); transform:scaleX(0); transform-origin:left;
  transition:transform var(--chuyen);
}
.tnh-tru-the:hover { border-color: var(--vien-xanh); box-shadow: var(--bong-xanh); transform:translateY(-3px); }
.tnh-tru-the:hover::before { transform:scaleX(1); }
.tnh-tru-the__so {
  font-family: var(--font-ma); font-size:.82rem; font-weight:700;
  color: var(--xanh); letter-spacing:.08em; margin-bottom: var(--kc-4);
}
.tnh-tru-the h3 { margin:0 0 var(--kc-3); font-size:1.35rem; color: var(--dau-toi); }
.tnh-tru-the p { color: var(--mo-toi); font-size:.97rem; line-height:1.62; margin:0 0 var(--kc-5); flex:1; }
.tnh-tru-the__di { font-weight:700; font-size:.93rem; color: var(--xanh); }

.tnh-khoi--sang .tnh-tru-the { background: var(--trang); border-color: var(--sang-vien); }
.tnh-khoi--sang .tnh-tru-the h3 { color: var(--muc); }
.tnh-khoi--sang .tnh-tru-the p { color: var(--muc-mo); }
.tnh-khoi--sang .tnh-tru-the__so,
.tnh-khoi--sang .tnh-tru-the__di { color: var(--xanh-dam); }
.tnh-khoi--sang .tnh-tru-the:hover { box-shadow: var(--bong-w); }

/* ============================================================
   8. THẺ BÀI VIẾT
   ============================================================ */
.tnh-bai-luoi { display:grid; gap: var(--kc-5); grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); }
.tnh-the-bai {
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--bang); border:1px solid var(--vien-toi);
  border-radius: var(--goc);
  transition: border-color var(--chuyen), box-shadow var(--chuyen), transform var(--chuyen);
}
.tnh-the-bai:hover { border-color: var(--vien-xanh); box-shadow: var(--bong-s); transform:translateY(-2px); }
.tnh-the-bai__anh { display:block; aspect-ratio:16/9; background: var(--navy); overflow:hidden; }
.tnh-the-bai__anh img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.tnh-the-bai:hover .tnh-the-bai__anh img { transform:scale(1.04); }
.tnh-the-bai__than { padding: var(--kc-5); display:flex; flex-direction:column; flex:1; }
.tnh-the-bai__nhan { font-size:.73rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--xanh); margin-bottom: var(--kc-3); }
.tnh-the-bai__ten { font-size:1.08rem; line-height:1.4; margin:0 0 var(--kc-3); font-weight:700; }
.tnh-the-bai__ten a { color: var(--dau-toi); }
.tnh-the-bai__ten a:hover { color: var(--xanh); }
.tnh-the-bai__tom { font-size:.93rem; color: var(--mo-toi); line-height:1.6; margin:0 0 var(--kc-4); }
.tnh-the-bai__chan {
  margin-top:auto; padding-top: var(--kc-3); font-size:.82rem; color: var(--mo-toi);
  display:flex; gap:.6em; align-items:center; border-top:1px solid var(--vien-toi);
}
.tnh-khoi--sang .tnh-the-bai { background: var(--trang); border-color: var(--sang-vien); }
.tnh-khoi--sang .tnh-the-bai__ten a { color: var(--muc); }
.tnh-khoi--sang .tnh-the-bai__tom,
.tnh-khoi--sang .tnh-the-bai__chan { color: var(--muc-mo); }
.tnh-khoi--sang .tnh-the-bai__nhan { color: var(--xanh-dam); }
.tnh-khoi--sang .tnh-the-bai__chan { border-top-color: var(--sang-vien); }

/* ============================================================
   9. BÀI VIẾT — thẻ sáng đặt trên nền tối để đọc dài không mỏi
   ============================================================ */
.single-post .site-content,
body:not(.home).page .site-content { padding-top: var(--kc-7); padding-bottom: var(--kc-8); }

.single-post .inside-article,
body:not(.home).page .inside-article {
  background: var(--trang); color: var(--muc);
  border-radius: var(--goc); padding: clamp(1.6rem,4vw,3.2rem);
  box-shadow: var(--bong-s);
}
.single-post .inside-article h1,
.single-post .inside-article h2,
.single-post .inside-article h3,
.single-post .inside-article h4,
body:not(.home) .inside-article h1, body:not(.home) .inside-article h2,
body:not(.home) .inside-article h3, body:not(.home) .inside-article h4 { color: var(--muc); }
.single-post .entry-content,
body:not(.home) .entry-content { color: var(--muc); }
.single-post .entry-content a,
body:not(.home) .entry-content a { color: var(--xanh-dam); }

/* Trang chủ chạy nền tối toàn phần — không đóng khung trắng, không đổi màu chữ */
.home .inside-article,
.home .entry-content { background:transparent; box-shadow:none; padding:0; color: var(--chu-toi); }
.home .site-content { padding:0; }
/* Khối nền sáng nằm trong trang chủ vẫn giữ chữ tối để đọc được */
.home .tnh-khoi--sang,
.home .tnh-khoi--sang p { color: var(--muc); }
.home .tnh-khoi--sang h1,.home .tnh-khoi--sang h2,
.home .tnh-khoi--sang h3,.home .tnh-khoi--sang h4 { color: var(--muc); }
.home .tnh-khoi--sang .tnh-dau-khoi p { color: var(--muc-mo); }

.tnh-breadcrumb { font-size:.86rem; color: var(--muc-mo); margin-bottom: var(--kc-5); }
.tnh-breadcrumb a { color: var(--muc-mo); }
.tnh-breadcrumb a:hover { color: var(--xanh-dam); text-decoration:underline; }
.tnh-breadcrumb span[aria-hidden] { margin:0 .45em; color: var(--sang-vien); }

.tnh-dau-bai { margin-bottom: var(--kc-6); }
.tnh-dau-bai .tnh-nhan-nho { color: var(--xanh-dam); margin-bottom: var(--kc-3); }
.tnh-dau-bai .tnh-nhan-nho::before { background: var(--xanh-dam); }
.tnh-dau-bai .tnh-nhan-nho a { color:inherit; }
.tnh-mo-ta-bai { font-size:1.14em; color: var(--muc-mo); line-height:1.6; margin-bottom: var(--kc-5); }
.tnh-thong-tin-bai {
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em .9em;
  font-size:.88rem; color: var(--muc-mo);
  padding-top: var(--kc-4); border-top:1px solid var(--sang-vien);
}
.tnh-thong-tin-bai strong { color: var(--muc); font-weight:700; }
.tnh-thong-tin-bai .tnh-cham { color: var(--sang-vien); }

.single-post .entry-content > * { max-width: var(--khung-bai); }
.entry-content p { margin-bottom:1.45em; }
.entry-content ul,.entry-content ol { margin-bottom:1.45em; padding-left:1.35em; }
.entry-content li { margin-bottom:.45em; }
.entry-content li::marker { color: var(--xanh-dam); }
body:not(.home) .entry-content strong { color: var(--muc); font-weight:700; }
.entry-content img,.entry-content video { border-radius: var(--goc-nho); height:auto; max-width:100%; }
.entry-content figcaption { font-size:.86rem; color: var(--muc-mo); text-align:center; margin-top:.55em; }
.entry-content hr { border:0; border-top:1px solid var(--sang-vien); margin: var(--kc-7) 0; }

blockquote {
  border-left:3px solid var(--do); margin: var(--kc-6) 0;
  padding:.2em 0 .2em var(--kc-5);
}
blockquote p { font-size:1.1em; color: var(--muc); line-height:1.6; }
blockquote cite { display:block; font-size:.88rem; color: var(--muc-mo); font-style:normal; margin-top:.6em; }

.entry-content table { width:100%; border-collapse:collapse; margin: var(--kc-6) 0; font-size:.95em; }
.entry-content th { background: var(--navy); color: var(--dau-toi); text-align:left; padding:.8em 1em; font-weight:700; font-size:.92em; }
.entry-content td { padding:.8em 1em; border-bottom:1px solid var(--sang-vien); vertical-align:top; }
.entry-content tbody tr:nth-child(even) td { background: var(--sang); }
.tnh-bang-cuon { overflow-x:auto; -webkit-overflow-scrolling:touch; margin: var(--kc-6) 0; max-width: var(--khung-bai); }
.tnh-bang-cuon table { margin:0; }

.entry-content pre {
  background: var(--navy); color: var(--chu-toi);
  padding: var(--kc-5); border-radius: var(--goc-nho);
  overflow-x:auto; font-family: var(--font-ma); font-size:.87em; line-height:1.62;
}
.entry-content :not(pre) > code {
  background: var(--sang-2); color: var(--xanh-dam);
  padding:.15em .45em; border-radius:5px;
  font-family: var(--font-ma); font-size:.89em; border:1px solid var(--sang-vien);
}

/* ============================================================
   10. HAI CỘT — mục lục dính bên trái
   ============================================================ */
@media (min-width:1120px) {
  .single-post .inside-article {
    display:grid; grid-template-columns:248px minmax(0,1fr);
    column-gap: var(--kc-8); align-items:start;
  }
  .single-post .inside-article > .tnh-breadcrumb,
  .single-post .inside-article > .tnh-dau-bai,
  .single-post .inside-article > .post-image,
  .single-post .inside-article > .tnh-tac-gia,
  .single-post .inside-article > .tnh-lien-quan,
  .single-post .inside-article > .tnh-loi-moi-cuoi { grid-column:1 / -1; }
  .single-post .inside-article > .tnh-muc-luc {
    grid-column:1; position:sticky; top: var(--kc-5);
    max-height:calc(100vh - 4rem); overflow-y:auto;
  }
  .single-post .inside-article > .entry-content { grid-column:2; }
  .single-post .entry-content > * { max-width:100%; }
}

/* ============================================================
   11. MỤC LỤC
   ============================================================ */
.tnh-muc-luc {
  background: var(--sang); border:1px solid var(--sang-vien);
  border-radius: var(--goc-nho); padding: var(--kc-5); margin-bottom: var(--kc-6);
}
.tnh-muc-luc__nut {
  display:flex; align-items:center; justify-content:space-between; gap: var(--kc-3);
  width:100%; background:none; border:0; padding:0; cursor:pointer;
  font-family: var(--font); font-size:.78rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color: var(--xanh-dam);
  margin-bottom: var(--kc-4);
}
.tnh-muc-luc__nut svg { transition:transform var(--chuyen); flex-shrink:0; }
.tnh-muc-luc[data-dong="1"] .tnh-muc-luc__nut svg { transform:rotate(-90deg); }
.tnh-muc-luc[data-dong="1"] ol { display:none; }
.tnh-muc-luc ol { list-style:none; margin:0; padding:0; counter-reset:ml; }
.tnh-muc-luc li { counter-increment:ml; position:relative; padding-left:1.85em; margin-bottom:.42em; line-height:1.45; }
.tnh-muc-luc li::before { content:counter(ml) "."; position:absolute; left:0; color: var(--xanh-dam); font-weight:800; font-size:.85em; }
.tnh-muc-luc li.tnh-muc-con { padding-left:3em; font-size:.93em; }
.tnh-muc-luc li.tnh-muc-con::before { content:""; left:1.9em; width:8px; height:1px; background: var(--muc-mo); top:.75em; }
.tnh-muc-luc a { color: var(--muc-mo); font-size:.91rem; }
.tnh-muc-luc a:hover { color: var(--xanh-dam); text-decoration:underline; }
.tnh-muc-luc a.dang-xem { color: var(--muc); font-weight:700; }

/* ============================================================
   12. THÀNH PHẦN TRONG BÀI
   ============================================================ */
.tnh-y-chinh {
  background: var(--sang); border:1px solid var(--sang-vien);
  border-left:3px solid var(--xanh-dam); border-radius:0 var(--goc-nho) var(--goc-nho) 0;
  padding: var(--kc-5) var(--kc-6); margin:0 0 var(--kc-6); max-width: var(--khung-bai);
}
.tnh-y-chinh__nhan { display:block; font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--xanh-dam); margin-bottom: var(--kc-3); }
.tnh-y-chinh ul { margin:0; padding-left:1.2em; }
.tnh-y-chinh li { margin-bottom:.4em; }
.tnh-y-chinh p:last-child,.tnh-y-chinh ul:last-child { margin-bottom:0; }

.tnh-tra-loi-nhanh {
  background: linear-gradient(180deg, rgba(43,183,255,.10), rgba(43,183,255,.04));
  border:1px solid var(--vien-xanh); border-left:3px solid var(--xanh);
  padding: var(--kc-5) var(--kc-6); border-radius:0 var(--goc-nho) var(--goc-nho) 0;
  margin:0 0 var(--kc-6); max-width: var(--khung-bai);
}
.tnh-tra-loi-nhanh .tnh-nhan-nho { color: var(--xanh-dam); margin-bottom: var(--kc-2); }
.tnh-tra-loi-nhanh .tnh-nhan-nho::before { background: var(--xanh-dam); }
.tnh-tra-loi-nhanh p:last-child { margin-bottom:0; }

.tnh-hop {
  padding: var(--kc-5) var(--kc-6); border-radius: var(--goc-nho);
  margin: var(--kc-6) 0; max-width: var(--khung-bai);
  border:1px solid var(--sang-vien); border-left-width:3px;
}
.tnh-hop__nhan { display:flex; align-items:center; gap:.5em; font-weight:800; font-size:.93rem; margin-bottom: var(--kc-3); color: var(--muc); }
.tnh-hop p:last-child,.tnh-hop ul:last-child { margin-bottom:0; }
.tnh-hop--meo   { background:#F1F8FE; border-color:#D3E7F8; border-left-color: var(--xanh-dam); }
.tnh-hop--luu-y { background: var(--sang); border-left-color: var(--muc-mo); }
.tnh-hop--canh  { background:#FEF8EC; border-color:#F5E3C0; border-left-color: var(--vang); }
.tnh-hop--nguy  { background:#FEF2F3; border-color:#F8D6D8; border-left-color: var(--do); }
.tnh-hop--nguy .tnh-hop__nhan { color: var(--do-dam); }
.tnh-hop--kinh-nghiem { background:#F0FAF4; border-color:#CFEBDB; border-left-color: var(--xanh-la); }
.tnh-hop--kinh-nghiem .tnh-hop__nhan { color:#14663A; }

.tnh-cac-buoc { counter-reset:bc; margin: var(--kc-6) 0; max-width: var(--khung-bai); padding:0; list-style:none; }
.tnh-cac-buoc > li {
  counter-increment:bc; position:relative;
  padding-left:3.1em; padding-bottom: var(--kc-5); margin-bottom:0;
  border-left:1px solid var(--sang-vien); margin-left:1.1em;
}
.tnh-cac-buoc > li:last-child { border-left-color:transparent; padding-bottom:0; }
.tnh-cac-buoc > li::before {
  content:counter(bc); position:absolute; left:-1.1em; top:0;
  width:2.2em; height:2.2em; border-radius:50%;
  background: var(--xanh-doc); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800;
}

/* ============================================================
   13. HỘP CÂU LỆNH
   ============================================================ */
.tnh-cau-lenh {
  border:1px solid var(--vien-toi); border-radius: var(--goc-nho);
  overflow:hidden; margin: var(--kc-6) 0; max-width: var(--khung-bai);
  background: var(--navy); box-shadow: var(--bong-s);
}
.tnh-cau-lenh__dau {
  display:flex; align-items:center; justify-content:space-between; gap: var(--kc-4);
  background: var(--bang); color: var(--dau-toi);
  padding:.7em var(--kc-5); border-bottom:1px solid var(--vien-toi);
}
.tnh-cau-lenh__ten {
  font-size:.79rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5em; min-width:0; color: var(--xanh);
}
.tnh-cau-lenh__ten span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnh-cau-lenh__chep {
  display:inline-flex; align-items:center; gap:.4em;
  background: rgba(43,183,255,.14); color: var(--xanh);
  border:1px solid var(--vien-xanh); border-radius: var(--goc-vien);
  padding:.42em .95em; font-size:.8rem; font-weight:700;
  cursor:pointer; flex-shrink:0; font-family: var(--font);
  transition: background var(--chuyen);
}
.tnh-cau-lenh__chep:hover { background: rgba(43,183,255,.26); }
.tnh-cau-lenh__chep[data-xong="1"] { background: var(--xanh-la); border-color: var(--xanh-la); color:#fff; }
.tnh-cau-lenh__than {
  margin:0; padding: var(--kc-5);
  font-family: var(--font-ma); font-size:.875rem; line-height:1.68;
  color: var(--chu-toi); background: var(--navy);
  white-space:pre-wrap; word-wrap:break-word;
  max-height:26em; overflow-y:auto;
}
.tnh-cau-lenh__chan {
  padding:.65em var(--kc-5); border-top:1px solid var(--vien-toi);
  font-size:.8rem; color: var(--mo-toi); background: var(--bang);
}

/* ============================================================
   14. LỜI MỜI
   ============================================================ */
.tnh-loi-moi {
  background:
    radial-gradient(ellipse 70% 100% at 88% 0%, rgba(43,183,255,.22), transparent 62%),
    var(--navy);
  border:1px solid var(--vien-xanh);
  border-radius: var(--goc); padding: var(--kc-6) var(--kc-7);
  margin: var(--kc-7) 0; max-width: var(--khung-bai);
}
.tnh-loi-moi .tnh-nhan-nho { color: var(--xanh); margin-bottom: var(--kc-3); }
.tnh-loi-moi h3 { color: var(--dau-toi); margin:0 0 var(--kc-3); font-size:1.35rem; }
.tnh-loi-moi p { color: var(--chu-toi); margin:0 0 var(--kc-5); font-size:.99rem; }

/* ============================================================
   15. HỘP TÁC GIẢ
   ============================================================ */
.tnh-tac-gia {
  display:grid; gap: var(--kc-5); grid-template-columns:auto 1fr; align-items:start;
  background: var(--sang); border:1px solid var(--sang-vien);
  border-radius: var(--goc); padding: var(--kc-6);
  margin-top: var(--kc-8); max-width: var(--khung-bai);
}
.tnh-tac-gia img { border-radius:50%; display:block; border:2px solid var(--xanh); }
.tnh-tac-gia__ten { font-weight:800; color: var(--muc); font-size:1.14rem; margin-bottom:.18em; }
.tnh-tac-gia__vai { font-size:.84rem; color: var(--xanh-dam); font-weight:700; margin-bottom: var(--kc-3); }
.tnh-tac-gia__mo-ta { font-size:.95rem; color: var(--muc-mo); line-height:1.62; margin-bottom: var(--kc-3); }
.tnh-tac-gia__lien-ket { display:flex; flex-wrap:wrap; gap: var(--kc-4); font-size:.89rem; font-weight:700; }
.tnh-tac-gia__lien-ket a { color: var(--xanh-dam); }

/* ============================================================
   16. BÀI LIÊN QUAN
   ============================================================ */
.tnh-lien-quan { margin-top: var(--kc-8); }
.tnh-lien-quan > h2 {
  font-size:1.42rem; margin:0 0 var(--kc-5); padding-bottom: var(--kc-3);
  border-bottom:3px solid var(--do); display:inline-block; color: var(--muc);
}
.single-post .tnh-lien-quan .tnh-the-bai { background: var(--trang); border-color: var(--sang-vien); }
.single-post .tnh-lien-quan .tnh-the-bai__ten a { color: var(--muc); }
.single-post .tnh-lien-quan .tnh-the-bai__tom,
.single-post .tnh-lien-quan .tnh-the-bai__chan { color: var(--muc-mo); }
.single-post .tnh-lien-quan .tnh-the-bai__nhan { color: var(--xanh-dam); }
.single-post .tnh-lien-quan .tnh-the-bai__chan { border-top-color: var(--sang-vien); }

/* ============================================================
   17. TRANG TRỤ CỘT
   ============================================================ */
.tnh-tru-hero {
  background:
    radial-gradient(ellipse 70% 80% at 84% 16%, rgba(43,183,255,.20), transparent 62%),
    var(--nen-tham);
  padding: clamp(2.8rem,5.5vw,4.5rem) 0;
  border-bottom:1px solid var(--vien-toi);
  margin: calc(-1 * var(--kc-7)) 0 var(--kc-7);
}
.tnh-tru-hero h1 { color: var(--dau-toi); max-width:17em; margin-bottom: var(--kc-4); }
.tnh-tru-hero__mo-ta { color: var(--chu-toi); font-size:1.12em; line-height:1.6; max-width:42em; margin:0; }

.tnh-chu-de-luoi { display:grid; gap: var(--kc-4); grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.tnh-chu-de {
  border:1px solid var(--sang-vien); border-radius: var(--goc-nho);
  padding: var(--kc-5); background: var(--sang); text-decoration:none !important; color:inherit;
  transition:border-color var(--chuyen), box-shadow var(--chuyen), transform var(--chuyen); display:block;
}
.tnh-chu-de:hover { border-color: var(--xanh); box-shadow: var(--bong-w); transform:translateY(-2px); }
.tnh-chu-de h3 { font-size:1.06rem; margin:0 0 var(--kc-2); color: var(--muc); }
.tnh-chu-de p { font-size:.9rem; color: var(--muc-mo); margin:0; line-height:1.55; }

.tnh-hoi-dap { max-width: var(--khung-bai); }
.tnh-hoi-dap details { border-bottom:1px solid var(--sang-vien); padding: var(--kc-4) 0; }
.tnh-hoi-dap summary {
  font-weight:700; font-size:1.03rem; color: var(--muc); cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap: var(--kc-4);
}
.tnh-hoi-dap summary::-webkit-details-marker { display:none; }
.tnh-hoi-dap summary::after { content:'+'; font-size:1.45rem; font-weight:400; color: var(--xanh-dam); flex-shrink:0; line-height:1; }
.tnh-hoi-dap details[open] summary::after { content:'−'; }
.tnh-hoi-dap details > div { padding-top: var(--kc-3); color: var(--muc-mo); font-size:.97rem; }
.tnh-hoi-dap details > div p:last-child { margin-bottom:0; }

/* ============================================================
   18. CASE STUDY
   ============================================================ */
.tnh-cs-so {
  display:grid; gap: var(--kc-4); grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background: var(--navy); border:1px solid var(--vien-xanh);
  border-radius: var(--goc); padding: var(--kc-6); margin:0 0 var(--kc-6); max-width: var(--khung-bai);
}
.tnh-cs-so div { text-align:center; }
.tnh-cs-so strong {
  display:block; font-size:1.95rem; font-weight:800; line-height:1.15;
  background: var(--xanh-doc); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tnh-cs-so span { font-size:.84rem; color: var(--mo-toi); }

.tnh-truoc-sau { display:grid; gap: var(--kc-4); grid-template-columns:1fr; margin: var(--kc-6) 0; max-width: var(--khung-bai); }
@media (min-width:700px) { .tnh-truoc-sau { grid-template-columns:1fr 1fr; } }
.tnh-truoc-sau > div { border:1px solid var(--sang-vien); border-radius: var(--goc-nho); padding: var(--kc-5); }
.tnh-truoc-sau > div:first-child { background: var(--sang); }
.tnh-truoc-sau > div:last-child { background:#F1F8FE; border-color:#D3E7F8; }
.tnh-truoc-sau h4 { margin:0 0 var(--kc-3); font-size:.84rem; letter-spacing:.09em; text-transform:uppercase; color: var(--muc-mo); }
.tnh-truoc-sau > div:last-child h4 { color: var(--xanh-dam); }

/* ============================================================
   19. TÀI NGUYÊN
   ============================================================ */
.tnh-tn-luoi { display:grid; gap: var(--kc-5); grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); }
.tnh-tn-the {
  display:flex; flex-direction:column;
  border:1px solid var(--vien-toi); border-radius: var(--goc);
  padding: var(--kc-6); background: var(--bang);
  transition:border-color var(--chuyen), box-shadow var(--chuyen), transform var(--chuyen);
}
.tnh-tn-the:hover { border-color: var(--vien-xanh); box-shadow: var(--bong-xanh); transform:translateY(-2px); }
.tnh-tn-the__loai { font-size:.73rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--vang); margin-bottom: var(--kc-3); }
.tnh-tn-the h3 { font-size:1.14rem; margin:0 0 var(--kc-3); color: var(--dau-toi); }
.tnh-tn-the p { font-size:.93rem; color: var(--mo-toi); line-height:1.6; margin:0 0 var(--kc-5); flex:1; }
.tnh-khoi--sang .tnh-tn-the { background: var(--trang); border-color: var(--sang-vien); }
.tnh-khoi--sang .tnh-tn-the h3 { color: var(--muc); }
.tnh-khoi--sang .tnh-tn-the p { color: var(--muc-mo); }

/* ============================================================
   20. ĐĂNG KÝ
   ============================================================ */
.tnh-dang-ky {
  background:
    radial-gradient(ellipse 60% 100% at 86% 0%, rgba(43,183,255,.24), transparent 60%),
    var(--navy);
  border:1px solid var(--vien-xanh);
  border-radius: var(--goc-to); padding: clamp(2rem,4.5vw,3.5rem);
  display:grid; gap: var(--kc-6); grid-template-columns:1fr; align-items:center;
}
@media (min-width:860px) { .tnh-dang-ky { grid-template-columns:1.18fr 1fr; gap: var(--kc-8); } }
.tnh-dang-ky h2 { color: var(--dau-toi); margin:0 0 var(--kc-3); font-size:clamp(1.45rem,2.6vw,1.95rem); }
.tnh-dang-ky p { color: var(--chu-toi); margin:0; font-size:1rem; }

/* ============================================================
   21. CHÂN TRANG
   ============================================================ */
.site-footer { background: var(--nen-toi-2); color: var(--mo-toi); border-top:1px solid var(--vien-toi); }
.site-footer a { color: var(--chu-toi); }
.site-footer a:hover { color: var(--xanh); }
.tnh-chan { display:grid; gap: var(--kc-7); grid-template-columns:1fr; padding: clamp(2.5rem,5vw,4rem) 0 var(--kc-6); }
@media (min-width:780px) { .tnh-chan { grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.tnh-chan__ten { font-size:1.18rem; font-weight:800; color: var(--dau-toi); margin-bottom: var(--kc-3); }
.tnh-chan__dinh-vi { font-size:.93rem; line-height:1.62; max-width:30em; }
.tnh-chan__tieu-de { color: var(--dau-toi); font-size:.79rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin:0 0 var(--kc-4); }
.tnh-chan ul { list-style:none; margin:0; padding:0; }
.tnh-chan li { margin-bottom:.55em; font-size:.93rem; }
.site-info { border-top:1px solid var(--vien-toi); font-size:.87rem; padding: var(--kc-5) 0; color: var(--mo-toi); }

/* Đầu trang danh sách bài */
.tnh-dau-trang-blog { margin-bottom: var(--kc-7); max-width:760px; }
.tnh-dau-trang-blog h1 { color: var(--muc); margin-bottom: var(--kc-3); }
.tnh-dau-trang-blog p { color: var(--muc-mo); }

/* ============================================================
   22. ĐIỆN THOẠI
   ============================================================ */
@media (max-width:768px) {
  :root { --cao-dong:1.68; }
  h2 { margin-top:1.75em; }
  .tnh-tac-gia { grid-template-columns:1fr; }
  .tnh-tac-gia img { width:64px; height:64px; }
  .tnh-loi-moi { padding: var(--kc-6) var(--kc-5); }
  .tnh-hero__so { gap: var(--kc-6); }
  .tnh-hero__so strong { font-size:1.35rem; }
  .entry-content th,.entry-content td { padding:.6em .7em; }
  .tnh-cau-lenh__dau { flex-wrap:wrap; gap: var(--kc-3); }
  .tnh-cs-so { padding: var(--kc-5); }
  .tnh-nut { min-height:46px; }
}
@media (pointer:coarse), (max-width:768px) {
  .tnh-cau-lenh__chep { min-height:44px; padding:.5em 1.05em; }
  .tnh-chan li a, .tnh-muc-luc a, .tnh-breadcrumb a {
    display:inline-block; min-height:44px; line-height:44px;
  }
  .tnh-chan li { margin-bottom:0; }
  .tnh-muc-luc li { margin-bottom:0; }
  .tnh-muc-luc__nut { min-height:44px; }
  .tnh-hoi-dap summary { min-height:44px; align-items:center; }
}

html,body { overflow-x:clip; max-width:100%; }
.entry-content > * { max-width:100%; }
img,video,iframe,table { max-width:100%; }

/* ============================================================
   23. TIẾP CẬN
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--xanh); outline-offset:2px; border-radius:4px;
}
.tnh-bo-qua {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background: var(--do); color:#fff !important; padding:.85em 1.3em;
  border-radius:0 0 var(--goc-nho) 0; font-weight:700;
}
.tnh-bo-qua:focus { left:0; }
.tnh-an-nhin { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   24. IN GIẤY
   ============================================================ */
@media print {
  .site-header,.site-footer,.tnh-muc-luc,.tnh-loi-moi,.tnh-lien-quan,.tnh-cau-lenh__chep { display:none !important; }
  body { font-size:12pt; color:#000; background:#fff; }
  .single-post .inside-article { display:block !important; box-shadow:none; padding:0; }
}

/* ============================================================
   25. TRANG "TRẦN NGUYÊN HOÀN LÀ AI"
   ============================================================ */
.tnh-gt-hero {
  display:grid; gap: var(--kc-6); grid-template-columns:1fr;
  align-items:center; margin-bottom: var(--kc-7);
  padding-bottom: var(--kc-6); border-bottom:1px solid var(--sang-vien);
}
@media (min-width:720px) { .tnh-gt-hero { grid-template-columns:280px 1fr; gap: var(--kc-8); } }
.tnh-gt-hero__anh img {
  width:100%; height:auto; display:block; border-radius: var(--goc);
  border:2px solid var(--xanh); box-shadow: var(--bong-xanh);
}
@media (max-width:719px) { .tnh-gt-hero__anh { max-width:160px; } }
.tnh-gt-hero h1 { margin:0 0 var(--kc-4); }
.tnh-gt-hero__mo-ta { font-size:1.15em; color: var(--muc-mo); line-height:1.6; margin:0; }


/* ============================================================
   26. VA LOI LUOI CUNG CUA WORDPRESS
   ============================================================ */
/* WordPress dat cung 3 cot, chi co luoi cuu duoi 600px.
   Dai 601-768px moi cot con ~160px — chu bi ep thanh cot dung. */
@media (max-width: 900px) {
  .wp-block-post-template.is-layout-grid,
  .wp-block-query .wp-block-post-template {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

/* Chan trang cua GeneratePress: bo vien kep va le cung 40px */
.tnh-chan-tnh + .site-info .inside-site-info { padding-left:0; padding-right:0; }
.site-info { border-top:0; }


/* ============================================================
   27. VA XUNG DOT MAU CHU — dat cuoi file de de len luat cu
   Goc re: luat `body:not(.home) … { color: var(--muc) }` viet qua rong,
   quet ca vao nhung khoi CO Y de nen toi.
   ============================================================ */

/* --- Khoi nen TOI nam trong trang co nen sang --- */
.tnh-loi-moi h1, .tnh-loi-moi h2, .tnh-loi-moi h3, .tnh-loi-moi h4,
.tnh-dang-ky h1, .tnh-dang-ky h2, .tnh-dang-ky h3,
.tnh-tru-hero h1, .tnh-tru-hero h2,
.tnh-dau-trang-blog h1,
.tnh-cs-so strong { color: var(--dau-toi); }

.tnh-loi-moi p, .tnh-dang-ky p,
.tnh-tru-hero__mo-ta, .tnh-dau-trang-blog p { color: var(--chu-toi); }

.tnh-cau-lenh__than, .tnh-cau-lenh__than code { color: var(--chu-toi); }
.tnh-cau-lenh__ten { color: var(--xanh); }
.tnh-cau-lenh__chan { color: var(--mo-toi); }

/* --- The bai tren nen SANG: chu phai toi lai --- */
.tnh-khoi--sang .wp-block-post-excerpt,
.tnh-khoi--sang .wp-block-post-excerpt p,
body:not(.home) .wp-block-post-excerpt,
body:not(.home) .wp-block-post-excerpt p { color: var(--muc-mo); }

.tnh-khoi--sang .wp-block-post-title a,
.tnh-khoi--sang .taxonomy-category a,
body:not(.home) .wp-block-post-title a,
body:not(.home) .taxonomy-category a,
body:not(.home) .author-name,
body:not(.home) .author-name a,
body:not(.home) .entry-meta a { color: var(--xanh-dam); }

body:not(.home) .wp-block-post-title a { color: var(--muc); }
body:not(.home) .wp-block-post-title a:hover { color: var(--xanh-dam); }

/* Nhan vang tren the trang: dam lai cho du tuong phan */
.tnh-khoi--sang .tnh-tn-the__loai,
body:not(.home) .tnh-tn-the__loai { color: #9A5A08; }

/* Nut "Chep" sau khi bam: dam mau xanh la cho du tuong phan */
.tnh-cau-lenh__chep[data-xong="1"] { background:#157A42; border-color:#157A42; }

/* Dau / trong duong dan phan cap: dam lai cho nhin thay */
.tnh-breadcrumb span[aria-hidden] { color: var(--muc-mo); opacity:.55; }

/* Nut do: dam dai mau lai cho chu trang du tuong phan */
.tnh-nut { background: linear-gradient(180deg,#DF2027,#C8141B); }

/* --- Nhom the xep bang div: bo dau cham danh sach neu doi sang ul --- */
.tnh-tru-luoi, .tnh-tn-luoi, .tnh-chu-de-luoi, .tnh-hero__so, .tnh-bai-luoi {
  list-style: none; padding-left: 0; margin-left: 0;
}

/* Khi <a> duoc boc trong <li>: li thanh o luoi, cho <a> gian het o
   de cac the van cao bang nhau y het luc con dung div. */
.tnh-tru-luoi > li, .tnh-chu-de-luoi > li { display: flex; }
.tnh-tru-luoi > li > .tnh-tru-the,
.tnh-chu-de-luoi > li > .tnh-chu-de { flex: 1 1 auto; }

/* .entry-content ul { padding-left: 1.35em } o tren manh hon (0,2,0) nen
   luat go dau cham o tren thua. Nhac lai voi do manh cao hon de cac nhom
   the nay khong bi thut vao 1.35em so voi luc con dung div. */
.entry-content ul.tnh-tru-luoi,
.entry-content ul.tnh-tn-luoi,
.entry-content ul.tnh-chu-de-luoi,
.entry-content ul.tnh-hero__so,
.entry-content ul.tnh-bai-luoi {
  list-style: none; padding-left: 0; margin-left: 0;
}


/* ============================================================
   28. CHOT MAU CHU TREN KHOI NEN TOI
   Dung !important co chu dich: nhung khoi nay LUON co nen toi,
   du dat o bat ky dau — trong khoi sang, trong bai viet, hay tren
   trang chu. Khong the de luat theo ngu canh quyet dinh mau chu.
   ============================================================ */
.tnh-loi-moi, .tnh-loi-moi *,
.tnh-dang-ky, .tnh-dang-ky *,
.tnh-tru-hero, .tnh-tru-hero *,
.tnh-cs-so, .tnh-cs-so * { color: var(--chu-toi) !important; }

.tnh-loi-moi h1, .tnh-loi-moi h2, .tnh-loi-moi h3, .tnh-loi-moi h4,
.tnh-dang-ky h1, .tnh-dang-ky h2, .tnh-dang-ky h3,
.tnh-tru-hero h1, .tnh-tru-hero h2 { color: var(--dau-toi) !important; }

.tnh-loi-moi .tnh-nhan-nho, .tnh-tru-hero .tnh-nhan-nho { color: var(--xanh) !important; }
.tnh-cs-so strong { color: var(--xanh-nhat) !important; }

/* Nut ben trong cac khoi do van phai la chu trang tren nen do */
.tnh-loi-moi .tnh-nut, .tnh-dang-ky .tnh-nut,
.tnh-loi-moi .tnh-nut *, .tnh-dang-ky .tnh-nut * { color: #fff !important; }

/* Duong dan phan cap tren hero toi */
.tnh-tru-hero .tnh-breadcrumb a { color: rgba(255,255,255,.82) !important; }
.tnh-tru-hero .tnh-breadcrumb span[aria-hidden] { color: rgba(255,255,255,.4) !important; }

/* ============================================================
   29. KHOI SO DO — hinh vector giai thich
   ============================================================ */
.tnh-so-do {
	margin: var(--kc-6) 0;
	padding: var(--kc-4);
	background: #fff;
	border: 1px solid #dfe6f2;
	border-radius: var(--goc);
	box-shadow: 0 1px 2px rgba(19,32,58,.05);
}
.tnh-so-do img,
.tnh-so-do svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.tnh-so-do figcaption {
	margin-top: var(--kc-3);
	padding-top: var(--kc-3);
	border-top: 1px solid #edf1f8;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--muc-mo);
	text-align: left;
}
.tnh-so-do figcaption b { color: var(--muc); font-weight: 700; }

/* Tren nen toi (khoi hero, khoi loi moi) */
.tnh-tru-hero .tnh-so-do,
.tnh-loi-moi .tnh-so-do {
	background: rgba(255,255,255,.04);
	border-color: rgba(134,214,255,.22);
	box-shadow: none;
}
.tnh-tru-hero .tnh-so-do figcaption,
.tnh-loi-moi .tnh-so-do figcaption {
	border-top-color: rgba(134,214,255,.16);
	color: var(--chu-toi) !important;
}

@media (max-width: 600px) {
	.tnh-so-do { padding: var(--kc-3); }
	.tnh-so-do figcaption { font-size: .88rem; }
}

/* 29b. Nang do manh — luat dong 402 (.entry-content figcaption) co cung
   do manh 0,2,0 voi .tnh-so-do figcaption. Hien tai thang nho nam sau,
   nhung do la thang nho MAY MAN. Them tien to de thang chac. */
.entry-content .tnh-so-do figcaption {
	font-size: .93rem;
	text-align: left;
	color: var(--muc-mo);
	margin-top: var(--kc-3);
}
.entry-content .tnh-so-do img { border-radius: 0; }

/* ============================================================
   30. THANH MOI TREN CUNG — tro toi buoi Zoom mien phi
   ============================================================ */
.tnh-thanh-tren {
	/* Nen phai DU TOI thi chu trang moi doc duoc.
	   Ban dau dung #1593E6 -> #2BB7FF, do ra tuong phan 3,31 (duoi muc 4,5).
	   Ha sac do xuong cho dat chuan. */
	background: linear-gradient(100deg, #06375C, #08507F 55%, #0A6199);
	color: #fff;
	font-size: .92rem;
	line-height: 1.4;
}
.tnh-thanh-tren a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	flex-wrap: wrap;
	max-width: var(--khung);
	margin: 0 auto;
	padding: .62em var(--kc-4);
	color: #fff !important;
	text-decoration: none;
	text-align: center;
}
.tnh-thanh-tren a:hover { background: rgba(255,255,255,.09); }
.tnh-thanh-tren strong { font-weight: 800; letter-spacing: .01em; }
.tnh-thanh-tren span   { opacity: .93; }
.tnh-thanh-tren em {
	font-style: normal;
	font-weight: 700;
	border-bottom: 2px solid rgba(255,255,255,.55);
	white-space: nowrap;
}

@media (max-width: 860px) {
	.tnh-thanh-tren { font-size: .86rem; }
	.tnh-thanh-tren span { display: none; }  /* dien thoai: bo cau dai, giu y chinh */
	.tnh-thanh-tren a { padding: .55em var(--kc-3); gap: .5em; }
}