/* =========================================================
   CNSG MARKETING ONLINE — DESIGN TOKENS
   Xanh la CNSG lam mau chu dao: rung sau cho nen dark,
   xanh la ruc cho hanh dong, giay am cho nen sang.
   Signature: duong "growth pulse" ve dan trong hero, gan
   voi loi hua "marketing do luong duoc ket qua".
   ========================================================= */
:root{
  --forest-950: #07211a;
  --forest-900: #0b3324;
  --forest-800: #114430;
  --brand-600:  #1c9a52;
  --brand-500:  #2ab765;
  --brand-100:  #e3f3e7;
  --amber-500:  #e7a13c;
  --paper:      #f6f8f3;
  --paper-dim:  #eef2ea;
  --ink:        #0d1f17;
  --ink-soft:   #43554c;
  --line:       #dde5da;
  --white:      #ffffff;

  --font-display: 'Be Vietnam Pro', 'Inter', sans-serif;
  --font-body: 'Inter', 'Be Vietnam Pro', sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .5em; line-height:1.15; color: var(--forest-950); letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }

:focus-visible{
  outline: 2.5px solid var(--brand-600);
  outline-offset: 3px;
}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
}
.skip-link.screen-reader-text:focus{
  position:fixed !important; top:10px; left:10px; width:auto; height:auto; clip:auto;
  background: var(--forest-950); color:#fff; padding:12px 20px; border-radius:8px; z-index:999;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: clamp(56px, 9vw, 116px) 0; }
.section--tight{ padding: clamp(40px, 6vw, 72px) 0; }
.section--dark{ background: var(--forest-950); color: #dce9e0; }
.section--dark h2, .section--dark h3{ color: #fff; }
.section--paper-dim{ background: var(--paper-dim); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--brand-600); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background: var(--brand-600); display:inline-block; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head p{ color: var(--ink-soft); font-size: 1.08rem; }
.section--dark .section-head p{ color:#a9c2b3; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; border-radius: 100px; font-weight:700; font-size:.98rem;
  border: 1.5px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--brand-600); color:#fff; }
.btn--primary:hover{ background: var(--forest-900); }
.btn--ghost{ border-color: rgba(13,31,23,.22); color: var(--ink); }
.btn--ghost:hover{ border-color: var(--brand-600); color: var(--brand-600); }
.btn--on-dark{ border-color: rgba(255,255,255,.35); color:#fff; }
.btn--on-dark:hover{ border-color:#fff; }
.btn--amber{ background: var(--amber-500); color: var(--forest-950); }
.btn--amber:hover{ background:#f2b458; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(246,248,243,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:20px;
  font-size: 13.5px; padding: 8px 0; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.topbar a{ display:inline-flex; align-items:center; gap:6px; }
.topbar .topbar__hotline{ color: var(--forest-950); font-weight:700; }
.topbar .topbar__hotline strong{ color: var(--brand-600); }

.masthead{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
/* Logo that (WordPress custom-logo) — chan kich thuoc de khong bi vo/gian anh */
.brand .custom-logo-link{ display:flex; align-items:center; }
.brand img.custom-logo,
.brand__logo-img{
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display:block;
}
.footer-brand .brand img.custom-logo{ height:40px; filter: brightness(0) invert(1); }
.brand__logo-text{
  font-family: var(--font-display); font-weight:800; font-size:1.05rem; color: var(--forest-950);
  line-height:1.15;
}
.brand__logo-text span{ display:block; font-family: var(--font-body); font-weight:500; font-size:.72rem; color: var(--brand-600); letter-spacing:.06em; text-transform:uppercase; }

.primary-nav ul{ display:flex; align-items:center; gap: 30px; }
.primary-nav a{ font-weight:600; font-size:.96rem; color: var(--ink); position:relative; padding: 4px 0; }
.primary-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--brand-600); transition: width .2s ease; }
.primary-nav a:hover::after, .primary-nav .current-menu-item a::after{ width:100%; }

.masthead__cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; }

@media (max-width: 900px){
  .primary-nav{ display:none; }
  .masthead{ position:relative; }
  .masthead__cta .btn--ghost{ display:none; }
  .masthead__cta .btn--primary{ padding: 11px 18px; font-size:.9rem; }
  .nav-toggle{
    display:flex; width:42px; height:42px; border-radius:10px; border:1.5px solid var(--line);
    align-items:center; justify-content:center; background:none; flex:none;
  }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:4px; }
  .primary-nav a{ display:block; width:100%; padding:10px 0; }
}

@media (max-width: 560px){
  .topbar{ flex-wrap:wrap; justify-content:center; gap:8px 16px; text-align:center; font-size:12.5px; }
  .topbar a[href^="mailto"]{ display:none; } /* uu tien Zalo + hotline tren man hinh rat nho */
  .masthead{ gap:12px; }
  .brand__logo-text{ font-size:.92rem; }
  .brand img.custom-logo, .brand__logo-img{ height:36px; max-width:150px; }
  /* An nut "Nhan bao gia" tren man hinh nho de khong bi chat, van con Hotline o topbar + nut Goi trong nav-toggle */
  .masthead__cta{ display:none; }
}

/* =========================================================
   HERO + GROWTH PULSE (signature element)
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding: clamp(56px,9vw,110px) 0 clamp(40px,6vw,70px); }
.hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero h1{ font-size: clamp(2.3rem, 4.3vw, 3.4rem); }
.hero h1 em{ font-style:normal; color: var(--brand-600); }
.hero__lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 520px; margin-bottom: 30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 34px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap: 22px 34px; padding-top: 22px; border-top:1px solid var(--line); }
.hero__trust div{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--forest-950); }
.hero__trust span{ display:block; font-family: var(--font-body); font-weight:500; font-size:.82rem; color: var(--ink-soft); }

.pulse{ position:relative; }
.pulse svg{ width:100%; height:auto; overflow:visible; }
.pulse__line{
  fill:none; stroke: var(--brand-600); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: draw 2.6s cubic-bezier(.22,.9,.28,1) forwards .3s;
}
.pulse__area{ opacity:0; animation: fade-in .9s ease forwards 1.9s; }
.pulse__dot{ opacity:0; transform-origin:center; animation: pop-in .5s ease forwards; }
.pulse__dot:nth-of-type(1){ animation-delay: .9s; }
.pulse__dot:nth-of-type(2){ animation-delay: 1.5s; }
.pulse__dot:nth-of-type(3){ animation-delay: 2.3s; }
.pulse__tag{ opacity:0; animation: fade-in .5s ease forwards; font-family: var(--font-body); font-weight:700; }
.pulse__tag:nth-of-type(1){ animation-delay: 1s; }
.pulse text.pulse__tag:nth-of-type(2){ animation-delay: 1.6s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }
@keyframes pop-in{ to{ opacity:1; transform: scale(1); } }
.pulse__dot{ transform: scale(0); }

@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__trust{ gap:18px 26px; }
  .pulse{ max-width:420px; margin:0 auto; }
}
@media (max-width: 480px){
  .hero{ padding-top: 36px; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .hero__trust{ justify-content:space-between; }
  .hero__trust div{ font-size:1.2rem; }
}

/* =========================================================
   LOGO STRIP
   ========================================================= */
.logostrip{ padding: 26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logostrip__row{ display:flex; align-items:center; gap: 20px; flex-wrap:wrap; justify-content:space-between; }
.logostrip__label{ font-size:.85rem; color: var(--ink-soft); font-weight:600; white-space:nowrap; }
.logostrip__marks{ display:flex; gap: 34px; flex-wrap:wrap; align-items:center; opacity:.75; }
.logostrip__marks span{ font-family: var(--font-display); font-weight:700; color: var(--ink-soft); font-size:1rem; }

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 30px 26px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ border-color: var(--brand-600); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11,51,36,.35); }
.service-card__num{ font-family: var(--font-display); font-weight:800; font-size:.85rem; color: var(--brand-600); margin-bottom:16px; display:block; }
.service-card h3{ font-size:1.15rem; margin-bottom:10px; }
.service-card p{ color: var(--ink-soft); font-size:.96rem; margin-bottom:16px; }
.service-card__link{ font-weight:700; font-size:.92rem; color: var(--forest-950); display:inline-flex; align-items:center; gap:6px; }
.service-card__link svg{ width:14px; height:14px; transition: transform .2s ease; }
.service-card:hover .service-card__link svg{ transform: translateX(4px); }

@media (max-width: 980px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .services-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   PROCESS (real sequence -> numbering justified)
   ========================================================= */
.process{ position:relative; }
.process-track{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; position:relative; }
.process-track::before{
  content:""; position:absolute; top:29px; left:6%; right:6%; height:1px;
  background: repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 16px);
}
.process-step{ position:relative; }
.process-step__index{
  width:58px; height:58px; border-radius:50%; background: var(--forest-950); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;
  font-size:1.05rem; margin-bottom:20px; position:relative; z-index:2;
}
.process-step h3{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ color: var(--ink-soft); font-size:.93rem; }

@media (max-width: 900px){
  .process-track{ grid-template-columns: 1fr 1fr; row-gap:36px; }
  .process-track::before{ display:none; }
}
@media (max-width: 560px){ .process-track{ grid-template-columns: 1fr; } }

/* =========================================================
   WHY / STATS
   ========================================================= */
.why-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:center; }
.why-list li{ display:flex; gap:16px; padding: 18px 0; border-top:1px solid rgba(255,255,255,.12); }
.why-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.why-list .chk{
  flex:none; width:30px; height:30px; border-radius:50%; background: var(--brand-600);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.why-list h4{ color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:4px; }
.why-list p{ color:#a9c2b3; font-size:.93rem; margin:0; }

.stat-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-card{
  background: var(--forest-900); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius-md);
  padding: 26px 22px;
}
.stat-card b{ display:block; font-family: var(--font-display); font-size:2.1rem; color: var(--amber-500); }
.stat-card span{ font-size:.88rem; color:#a9c2b3; }

@media (max-width: 900px){ .why-grid{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .stat-cards{ grid-template-columns:1fr; } }

/* =========================================================
   PACKAGES / PRICING
   ========================================================= */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items:stretch; }
.price-card{
  background:#fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 28px; display:flex; flex-direction:column;
}
.price-card--feat{ border-color: var(--brand-600); box-shadow: 0 24px 50px -28px rgba(28,154,82,.5); position:relative; }
.price-card--feat::before{
  content:"PHO BIEN NHAT"; position:absolute; top:-13px; left:28px; background: var(--brand-600); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; padding:6px 12px; border-radius:100px;
}
.price-card h3{ font-size:1.1rem; }
.price-card .price{ font-family: var(--font-display); font-weight:800; font-size:1.9rem; color: var(--forest-950); margin: 6px 0 4px; }
.price-card .price span{ font-size:.85rem; font-weight:500; color: var(--ink-soft); }
.price-card p.desc{ color: var(--ink-soft); font-size:.92rem; margin-bottom:22px; }
.price-card ul{ margin-bottom:26px; flex:1; }
.price-card ul li{ display:flex; gap:10px; padding:8px 0; font-size:.92rem; color: var(--ink); border-top:1px solid var(--line); }
.price-card ul li:first-child{ border-top:none; }
.price-card ul li svg{ flex:none; width:16px; height:16px; color: var(--brand-600); margin-top:3px; }

@media (max-width: 980px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

/* =========================================================
   TESTIMONIAL / CTA BAND
   ========================================================= */
.cta-band{
  background: linear-gradient(120deg, var(--forest-950), var(--forest-800));
  border-radius: var(--radius-lg); padding: clamp(36px,6vw,64px); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size: clamp(1.5rem,3vw,2rem); max-width:560px; margin-bottom:10px; }
.cta-band p{ color:#a9c2b3; max-width:520px; }
.cta-band__actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width: 560px){
  .cta-band__actions{ width:100%; flex-direction:column; }
  .cta-band__actions .btn{ width:100%; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list details{
  border-top:1px solid var(--line); padding: 18px 0;
}
.faq-list details:last-child{ border-bottom:1px solid var(--line); }
.faq-list summary{
  cursor:pointer; font-family: var(--font-display); font-weight:700; font-size:1.02rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:1.5rem; color: var(--brand-600); font-weight:400; }
.faq-list details[open] summary::after{ content:"\2212"; }
.faq-list .faq-a{ color: var(--ink-soft); padding-top:12px; max-width:680px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 50px; }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 30px; }
.contact-card + .contact-card{ margin-top:18px; }
.contact-card .lbl{ font-size:.8rem; color: var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.contact-card .val{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--brand-600); }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-grid .full{ grid-column: 1 / -1; }
.field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background:#fff; font-size:.96rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brand-600); }
@media (max-width: 760px){ .contact-grid, .form-grid{ grid-template-columns:1fr; } }

/* Thong bao ket qua gui form */
.form-notice{
  padding: 14px 18px; border-radius: var(--radius-sm); font-size:.92rem; font-weight:600; margin-bottom:18px;
}
.form-notice--ok{ background: var(--brand-100); color: var(--forest-900); border:1px solid var(--brand-600); }
.form-notice--err{ background:#fdeceb; color:#9a2f24; border:1px solid #e8a49c; }

/* Captcha toan hoc don gian */
.captcha-row label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; }
.captcha-row input{ max-width:160px; }

/* Honeypot: an khoi nguoi that, bot (doc HTML) van thay va thuong se dien vao */
.hp-field{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }

/* =========================================================
   FOOTER — luon co dinh 4 cot tren desktop:
   [Thuong hieu] [Dich vu] [Cong ty] [Lien he]
   ========================================================= */
.site-footer{ background: var(--forest-950); color:#a9c2b3; padding-top: 68px; }

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px 48px;
  padding-bottom: 46px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-brand .brand{ display:inline-flex; }
.footer-brand .brand__logo-text{ color:#fff; }
.footer-brand p{ font-size:.92rem; line-height:1.65; margin-top:16px; max-width:300px; color:#a9c2b3; }

.footer-col h4{
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:.92rem;
  margin-bottom:18px; text-transform:uppercase; letter-spacing:.05em;
  position:relative; padding-bottom:12px;
}
.footer-col h4::after{
  content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background: var(--brand-600);
}
.footer-col ul{ display:flex; flex-direction:column; gap:2px; }
.footer-col li{ padding: 7px 0; font-size:.9rem; line-height:1.5; border-top:1px solid rgba(255,255,255,.06); }
.footer-col li:first-child{ border-top:none; padding-top:0; }
.footer-col a{ color:#a9c2b3; transition: color .15s ease, padding-left .15s ease; display:inline-block; }
.footer-col a:hover{ color:#fff; padding-left:3px; }

.social-row{ display:flex; gap:10px; margin-top:20px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; transition: background .15s ease, border-color .15s ease, transform .15s ease;
  overflow:hidden;
}
.social-row a:hover{ background: var(--brand-600); border-color: var(--brand-600); transform: translateY(-2px); }
.social-row a.social-row__zalo{ border-color: rgba(255,255,255,.18); }
.social-row a.social-row__zalo:hover{ background:none; border-color: #0068FF; }
.social-row a.social-row__zalo svg{ width:20px; height:20px; border-radius:5px; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding: 22px 0;
  font-size:.82rem; flex-wrap:wrap; gap:10px; color:#7f9689;
}
.footer-bottom a{ color:#a9c2b3; }
.footer-bottom a:hover{ color:#fff; }

/* Tablet: thuong hieu chiem het hang, 2 cot link con lai chia deu ben duoi */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:36px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-brand p{ max-width:460px; }
}

/* Mobile: xep doc toan bo cho de doc */
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap:30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* =========================================================
   FLOATING HOTLINE (mobile)
   ========================================================= */
.float-hotline{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:58px; height:58px; border-radius:50%; background: var(--brand-600); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px rgba(11,51,36,.5);
}
.float-hotline::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--brand-600);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Generic content pages (page.php) */
.entry-content{ max-width: 780px; margin: 0 auto; }
.entry-content h2{ margin-top:1.4em; }
.entry-content ul{ list-style: disc; padding-left:1.3em; margin-bottom:1em; }
.entry-content ul li{ padding:4px 0; }
.page-hero{ background: var(--forest-950); color:#fff; padding: 64px 0 54px; }
.page-hero h1{ color:#fff; margin-bottom:8px; }
.breadcrumb{ font-size:.85rem; color:#a9c2b3; margin-bottom:14px; }
.breadcrumb a:hover{ color:#fff; }

/* =========================================================
   BLOG / TIN TUC
   ========================================================= */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11,51,36,.35); border-color: var(--brand-600); }
.blog-card__thumb{ position:relative; display:block; aspect-ratio: 16/10.4; background: var(--paper-dim); overflow:hidden; }
.blog-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.blog-card:hover .blog-card__thumb img{ transform: scale(1.05); }
.blog-card__thumb-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background: var(--brand-100); }
.blog-card__cat{
  position:absolute; top:12px; left:12px; background: rgba(11,51,36,.85); color:#fff; font-size:.72rem; font-weight:700;
  padding: 5px 12px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em;
}
.blog-card__body{ padding: 20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.blog-card__meta{ display:flex; gap:8px; font-size:.78rem; color: var(--ink-soft); margin-bottom:8px; }
.blog-card h3{ font-size:1.08rem; margin-bottom:8px; line-height:1.35; }
.blog-card h3 a{ color: var(--forest-950); }
.blog-card h3 a:hover{ color: var(--brand-600); }
.blog-card p{ color: var(--ink-soft); font-size:.92rem; margin-bottom:14px; flex:1; }
.blog-card__link{ font-weight:700; font-size:.88rem; color: var(--brand-600); display:inline-flex; align-items:center; gap:6px; }
.blog-card__link svg{ width:14px; height:14px; transition: transform .2s ease; }
.blog-card:hover .blog-card__link svg{ transform: translateX(4px); }

@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } }

.cat-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 34px; }
.cat-filter a{
  padding: 9px 18px; border-radius:100px; border:1.5px solid var(--line); font-size:.88rem; font-weight:600;
  color: var(--ink-soft);
}
.cat-filter a:hover, .cat-filter a.is-active{ border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-100); }

.pagination-row{ margin-top: 40px; display:flex; justify-content:center; gap:10px; }
.pagination-row .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px;
  border-radius: var(--radius-sm); border:1px solid var(--line); font-weight:600; font-size:.9rem; color: var(--ink);
}
.pagination-row .page-numbers.current, .pagination-row .page-numbers:hover{ background: var(--brand-600); border-color: var(--brand-600); color:#fff; }

/* Post layout: main column + sidebar */
.post-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 50px; align-items:start; }
.post-layout--archive{ grid-template-columns: 1fr 300px; }
@media (max-width: 900px){ .post-layout, .post-layout--archive{ grid-template-columns: 1fr; } }

.page-hero--post .post-cat-badge{
  display:inline-block; background: var(--brand-600); color:#fff; font-size:.75rem; font-weight:700;
  padding:5px 14px; border-radius:100px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.04em;
}
.page-hero--post h1{ font-size: clamp(1.6rem, 3.4vw, 2.3rem); max-width:800px; }
.post-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:.85rem; color:#a9c2b3; }

.post-cover{ border-radius: var(--radius-md); overflow:hidden; margin-bottom: 26px; }
.post-cover img{ width:100%; height:auto; display:block; }

.share-rail{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.share-rail__label{ font-size:.82rem; font-weight:700; color: var(--ink-soft); margin-right:4px; }
.share-rail a, .share-rail button{
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center;
  justify-content:center; color: var(--ink-soft); background:#fff;
}
.share-rail a:hover, .share-rail button:hover{ border-color: var(--brand-600); color: var(--brand-600); }
.share-rail a.share-rail__zalo{ overflow:hidden; padding:0; }
.share-rail a.share-rail__zalo:hover{ border-color:#0068FF; }
.share-rail a.share-rail__zalo svg{ width:20px; height:20px; border-radius:5px; }

.post-main .entry-content{ max-width:none; margin:0; font-size:1.05rem; }
.post-main .entry-content h2{ font-size:1.5rem; }
.post-main .entry-content h3{ font-size:1.2rem; }
.post-main .entry-content img{ border-radius: var(--radius-sm); }
.post-main .entry-content blockquote{
  border-left:3px solid var(--brand-600); padding:4px 0 4px 20px; margin:24px 0; color: var(--ink-soft); font-style:italic;
}
.post-main .entry-content a{ color: var(--brand-600); text-decoration:underline; text-underline-offset:3px; }

.post-tags{ display:flex; gap:10px; flex-wrap:wrap; margin: 28px 0; }
.post-tags a{ font-size:.82rem; background: var(--paper-dim); padding:6px 14px; border-radius:100px; color: var(--ink-soft); }
.post-tags a:hover{ background: var(--brand-100); color: var(--brand-600); }

.cta-band--inline{ margin: 40px 0; }

.author-box{
  display:flex; gap:16px; align-items:flex-start; background: var(--paper-dim); border-radius: var(--radius-md);
  padding: 22px; margin: 34px 0;
}
.author-box img{ border-radius:50%; flex:none; }
.author-box__name{ font-family: var(--font-display); font-weight:700; margin-bottom:6px; }
.author-box p{ color: var(--ink-soft); font-size:.92rem; margin:0; }

.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top: 30px; }
.post-nav__item{
  border:1px solid var(--line); border-radius: var(--radius-sm); padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.post-nav__item span{ font-size:.78rem; color: var(--ink-soft); font-weight:700; }
.post-nav__item--next{ text-align:right; align-items:flex-end; grid-column:2; }
.post-nav__item:hover{ border-color: var(--brand-600); }
@media (max-width:560px){ .post-nav{ grid-template-columns:1fr; } .post-nav__item--next{ grid-column:1; align-items:flex-start; text-align:left; } }

/* Sidebar cards */
.post-sidebar{ display:flex; flex-direction:column; gap:18px; position:sticky; top:90px; }
.side-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:22px; }
.side-card--cta{ background: var(--brand-100); border-color: var(--brand-600); }
.side-card--dark{ background: var(--forest-950); border-color: var(--forest-950); color:#a9c2b3; }
.side-card--dark .side-card__title{ color:#fff; }
.side-card__title{ font-size:1rem; margin-bottom:12px; }
.side-list li{ border-top:1px solid var(--line); }
.side-list li:first-child{ border-top:none; }
.side-list a{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:.92rem; color: var(--ink); }
.side-list a:hover{ color: var(--brand-600); }
.side-list a span{ font-size:.78rem; color: var(--ink-soft); background: var(--paper-dim); padding:2px 8px; border-radius:100px; }
.side-list--posts li{ border-top:1px solid var(--line); padding:10px 0; }
.side-list--posts li:first-child{ border-top:none; }
.side-list--posts a{ display:flex; gap:12px; align-items:center; }
.side-list--posts img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; }
.side-list--posts span{ font-size:.88rem; font-weight:600; line-height:1.35; color: var(--ink); }

/* Map */
.map-embed{ border-radius: var(--radius-md); overflow:hidden; margin-top: 44px; border:1px solid var(--line); }
.map-embed iframe{ display:block; filter: grayscale(15%); }