/*
Theme Name: Hoang Tung AI
Theme URI: https://hoangtungai.com/
Author: Hoang Tung
Author URI: https://hoangtungai.com/
Description: Theme cá nhân cho Hoang Tung AI — trang chủ có hero 3D cuộn theo scroll, kèm bố cục blog đồng bộ. Bảng màu trắng / bạc / navy / beige, font Montserrat + Inter, hỗ trợ đầy đủ tiếng Việt.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoangtungai
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, blog, portfolio
*/



/* ═══════════════════════════════════════════════════════════════════════
   HOANG TUNG AI — white / silver / navy / beige
   ───────────────────────────────────────────────────────────────────────
   Mọi selector đều nằm dưới .hta-root và mọi class đều có tiền tố `hta-`
   để khi nhúng vào WordPress không đụng CSS của theme (và ngược lại).
   Đơn vị dùng px/clamp() thay vì rem để không phụ thuộc font-size gốc
   của theme.
   ═══════════════════════════════════════════════════════════════════════ */
#hta-root {
  /* ── Bảng màu ───────────────────────────────────────── */
  --hta-white:        #FFFFFF;   /* nền chính            — 60% */
  --hta-silver-light: #F4F4F5;   /* nền phụ, section xen kẽ */
  --hta-silver:       #D9D9D9;   /* border, divider, icon phụ */
  --hta-navy:         #0A1628;   /* heading, body text   — 30% */
  --hta-grey:         #6B7280;   /* mô tả, caption, ngày tháng */
  --hta-beige:        #D6C2A3;   /* CTA, highlight       — 10% */
  --hta-beige-dark:   #B99C6B;   /* hover state, đường nhấn */
  --hta-beige-ink:    #8A6F42;   /* beige đủ đậm để làm CHỮ trên nền trắng
                                    (4.7:1 — đạt WCAG AA); dùng cho eyebrow, label */

  /* Biến thể navy dùng cho nền tối (CTA band, footer) */
  --hta-navy-line:    #1E2C40;
  --hta-navy-muted:   #A7B0BD;

  /* ── Font ───────────────────────────────────────────── */
  --hta-font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --hta-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ── Layout ─────────────────────────────────────────── */
  --hta-container: 1160px;
  --hta-top-offset: 0px;         /* WordPress admin bar sẽ ghi đè giá trị này */

  font-family: var(--hta-font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--hta-navy);
  background: var(--hta-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;

  /* ── Phá container của theme WordPress ──────────────────────────────
     Theme thường bọc nội dung trang trong một khung max-width (900–1200px).
     Hai dòng dưới kéo khối này ra full chiều ngang màn hình, và tự động
     vô hiệu (= 0) khi phần tử cha vốn đã full width.
     --hta-vw do JS đặt = clientWidth (không tính scrollbar) để không sinh
     thanh cuộn ngang; 100vw chỉ là giá trị dự phòng trước khi JS chạy. */
  width: var(--hta-vw, 100vw);
  max-width: var(--hta-vw, 100vw);
  margin-left: calc(50% - var(--hta-vw, 100vw) / 2);
  margin-right: calc(50% - var(--hta-vw, 100vw) / 2);
}

@media (min-width: 900px) {
  #hta-root { font-size: 18px; }
}

/* ── Cứu position: sticky của hero ────────────────────────────────────
   Rất nhiều theme đặt `overflow-x: hidden` trên html/body để chặn tràn
   ngang. Điều đó biến phần tử thành scroll container và làm CHẾT
   position: sticky của hero (hero sẽ trượt đi thay vì ghim lại).
   `overflow-x: clip` vẫn cắt phần tràn y hệt nhưng KHÔNG tạo scroll
   container, nên sticky hoạt động bình thường.
   JS còn xử lý thêm các thẻ bọc trung gian của theme (.site, .content-area…). */
html:has(#hta-root),
body:has(#hta-root) {
  overflow-x: clip !important;
}


/* ── Reset chống CSS của theme ────────────────────────────────────────
   Phải khai báo TƯỜNG MINH từng thuộc tính, không được dựa vào kế thừa:
   một rule trực tiếp của theme (vd. `.entry-content p { font-size: 13px }`)
   luôn thắng giá trị kế thừa từ #hta-root, bất kể độ đặc hiệu bao nhiêu.
   Selector `#hta-root <tag>` = (1,0,0,1) nên thắng `.entry-content p` =
   (0,0,1,1) của theme, và vẫn thua các rule `#hta-root .hta-*` bên dưới
   (1,0,1,0) — tức là không phá style riêng của trang. */
#hta-root *,
#hta-root *::before,
#hta-root *::after { box-sizing: border-box; }

/* CHỈ reset các thẻ chữ. KHÔNG đưa div/section/article/header/footer/nav/
   main/span vào danh sách này.
   Lý do: reset đặt `margin/padding/background/border: 0` với độ đặc hiệu
   (1,0,0,1), thắng CSS block của WordPress (0,0,1,0). Nếu quét cả thẻ bọc
   thì mọi nội dung do WordPress sinh ra — block nhiều cột, group có nền,
   markup của page builder — đều bị bẹp thành một khối phẳng.
   Các thẻ bọc của trang này đều tự khai báo padding riêng nên không cần reset. */
#hta-root h1, #hta-root h2, #hta-root h3, #hta-root h4,
#hta-root p, #hta-root ul, #hta-root ol, #hta-root li,
#hta-root figure, #hta-root figcaption, #hta-root blockquote,
#hta-root a, #hta-root img {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-align: inherit;
  text-shadow: none;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  float: none;
  min-width: 0;
  max-width: none;
  text-decoration: none;
  list-style: none;
  quotes: none;
}
#hta-root blockquote::before,
#hta-root blockquote::after,
#hta-root q::before,
#hta-root q::after { content: none; }

#hta-root img { max-width: 100%; height: auto; display: block; }

#hta-root ::selection { background: var(--hta-beige); color: var(--hta-navy); }

#hta-root .hta-container {
  max-width: var(--hta-container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}


/* ── Nhãn nhỏ in hoa (thay cho font mono trước đây) ───── */
#hta-root .hta-eyebrow,
#hta-root .hta-service-label,
#hta-root .hta-timeline-year,
#hta-root .hta-portfolio-tag,
#hta-root .hta-photo-caption,
#hta-root .hta-section-cta-note,
#hta-root .hta-quote footer,
#hta-root .hta-footer-name,
#hta-root .hta-footer-tag,
#hta-root .hta-footer-copy,
#hta-root .hta-nav-brand,
#hta-root .hta-scroll-hint {
  font-family: var(--hta-font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

#hta-root .hta-eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--hta-beige-ink);
  margin-bottom: 16px;
}


/* ── Ô vuông nhận diện thương hiệu ────────────────────── */
#hta-root .hta-mark {
  width: 12px;
  height: 12px;
  background: var(--hta-beige);
  border: 1px solid var(--hta-beige-dark);
  display: inline-block;
  flex: none;
}


/* ═══════════ Load bar ═══════════ */
#hta-root .hta-loadbar {
  position: fixed;
  top: var(--hta-top-offset);
  left: 0;
  height: 3px;
  width: 0;
  background: var(--hta-beige-dark);
  z-index: 200;
  transition: width 0.25s ease, opacity 0.5s ease 0.3s;
}
#hta-root .hta-loadbar.is-done { opacity: 0; }


/* ═══════════ Nav ═══════════ */
#hta-root .hta-nav {
  position: fixed;
  top: var(--hta-top-offset);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 18px 32px;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
#hta-root .hta-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hta-silver);
  padding: 12px 32px;
}
#hta-root .hta-nav-brand {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hta-navy);
}
#hta-root .hta-nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
#hta-root .hta-nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--hta-grey);
  transition: color 0.2s ease;
}
#hta-root .hta-nav-links a:hover { color: var(--hta-navy); }


/* ═══════════ Buttons ═══════════ */
#hta-root .hta-btn {
  display: inline-block;
  font-family: var(--hta-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
#hta-root .hta-btn:active { transform: translateY(1px); }


/* CTA chính — beige, đây là 10% điểm nhấn của bảng màu */
#hta-root .hta-btn--solid {
  background: var(--hta-beige);
  color: var(--hta-navy);
  border-color: var(--hta-beige);
}
#hta-root .hta-btn--solid:hover {
  background: var(--hta-beige-ink);
  border-color: var(--hta-beige-ink);
  color: var(--hta-white);
}


/* CTA trên nền navy */
#hta-root .hta-btn--accent {
  background: var(--hta-beige);
  color: var(--hta-navy);
  border-color: var(--hta-beige);
}
#hta-root .hta-btn--accent:hover {
  background: var(--hta-white);
  border-color: var(--hta-white);
}

#hta-root .hta-nav-cta { padding: 11px 22px; font-size: 15px; }


/* ═══════════ Hero scrub ═══════════ */
#hta-root .hta-scrub-track {
  height: 460vh;
  position: relative;
  background: var(--hta-silver-light);
}
#hta-root .hta-scrub-stage {
  position: sticky;
  /* --hta-top-offset > 0 khi có header cố định của theme (hoặc admin bar):
     hero ghim bên dưới header thay vì bị header che mất phần đầu. */
  top: var(--hta-top-offset);
  height: calc(100vh - var(--hta-top-offset));
  height: calc(100svh - var(--hta-top-offset));
  overflow: hidden;
}
#hta-root .hta-scrub-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}


/* Lớp phủ trắng nhẹ ở mép trên/dưới: giữ nav và scroll-hint đọc được,
   đồng thời làm dịu nền bạc của video. */
#hta-root .hta-stage-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0) 16%),
    linear-gradient(to top,    rgba(255,255,255,0.72) 0%, rgba(255,255,255,0) 20%);
}


/* Quầng trắng phía sau chữ ở các stage — bật/tắt bằng JS theo tiến độ cuộn */
#hta-root .hta-stage-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(58% 46% at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0) 100%);
  transition: opacity 0.2s linear;
}

#hta-root .hta-stage-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
#hta-root .hta-stage-copy--1 {
  justify-content: flex-start;
  padding-top: 15vh;
  padding-top: 15svh;
}


/* Thẻ nền trắng mờ — bảo đảm chữ navy luôn tương phản mạnh trên nền
   bạc/trắng của video 3D. */
#hta-root .hta-hero-card {
  max-width: 860px;
  padding: 38px 44px 42px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hta-silver);
  border-top: 4px solid var(--hta-beige);
  box-shadow: 0 24px 60px -34px rgba(10, 22, 40, 0.4);
}
#hta-root .hta-hero-card--tight { padding: 30px 40px 34px; }

/* ── Màn đầu (stage 1): chữ lớn, không nền ────────────────────────────
   Thay vì phủ panel trắng, dùng cỡ chữ rất lớn + quầng sáng trắng mềm quanh
   nét chữ. Nét Montserrat 800 ở cỡ này rất dày nên navy trên nền bạc/trắng
   đã tương phản mạnh; quầng sáng chỉ để dự phòng khi chữ đè lên chi tiết
   tối của video (khớp cửa, cánh tay robot). Cách này giữ nguyên hình 3D. */
#hta-root .hta-hero-bare {
  max-width: 1120px;
  text-align: center;
}
#hta-root .hta-stage-copy--1 .hta-hero-title {
  /* ~2× cỡ cũ (clamp 32→52px). Giữ min nhỏ hơn 2× để "for Real Business"
     không tràn ngang trên điện thoại. */
  font-size: clamp(40px, 9vw, 104px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.95),
    0 0 52px rgba(255, 255, 255, 0.85),
    0 2px 4px rgba(255, 255, 255, 0.9);
}
#hta-root .hta-eyebrow--hero {
  font-size: clamp(14px, 2.3vw, 21px);
  letter-spacing: 0.26em;
  margin-bottom: 24px;
  /* Nâng riêng nhãn này lên 10px, nới khoảng cách với dòng title bên dưới.
     Dùng transform (không phải margin) để chỉ nhãn dịch lên, còn title và
     dòng mô tả giữ nguyên vị trí. */
  transform: translateY(-10px);
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.95),
    0 0 34px rgba(255, 255, 255, 0.85);
}
#hta-root .hta-stage-copy--1 .hta-hero-sub {
  margin-top: 28px;
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--hta-navy);
  max-width: 760px;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.95),
    0 0 32px rgba(255, 255, 255, 0.85);
}

#hta-root .hta-hero-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hta-navy);
}
#hta-root .hta-hero-sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--hta-grey);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

#hta-root .hta-hero-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
#hta-root .hta-hero-points li {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 34px);
  line-height: 1.25;
  color: var(--hta-navy);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hta-silver);
  border-left: 5px solid var(--hta-beige);
  padding: 12px 28px;
  box-shadow: 0 18px 44px -30px rgba(10, 22, 40, 0.45);
}

#hta-root .hta-stage3-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  /* Cùng cỡ với các dòng ở màn cuộn trước đó (.hta-hero-points li) */
  font-size: clamp(18px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--hta-navy);
}

#hta-root .hta-scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--hta-grey);
  transition: opacity 0.4s ease;
  white-space: nowrap;
  text-align: center;
}
#hta-root .hta-scroll-hint-line {
  width: 1px;
  height: 44px;
  background: var(--hta-silver);
  position: relative;
  overflow: hidden;
}
#hta-root .hta-scroll-hint-line::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--hta-beige-dark);
  animation: hta-hint-drop 1.6s ease-in-out infinite;
}
@keyframes hta-hint-drop {
  to { top: 100%; }
}


/* Chuyển tiếp mềm từ hero xuống section đầu tiên (nền trắng) */
#hta-root .hta-stage-endfade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--hta-white) 85%);
  opacity: 0;
  pointer-events: none;
}


/* ═══════════ Sections ═══════════ */
#hta-root .hta-section {
  padding: 120px 0;
  background: var(--hta-white);
}
#hta-root .hta-section--alt { background: var(--hta-silver-light); }

#hta-root .hta-section-head {
  margin-bottom: 68px;
  max-width: 760px;
}
/* Cho tiêu đề dài nằm trên 1 dòng ở desktop.
   "Hoang Tung AI - AI Automation for Real Business" cần ~940px ở cỡ 36px,
   vượt khung 760px mặc định. Ở màn hẹp thì clamp() giảm cỡ chữ và câu tự
   xuống dòng như bình thường. */
#hta-root .hta-section-head--wide { max-width: 1120px; }
#hta-root .hta-section-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hta-navy);
}
#hta-root .hta-section-desc {
  margin-top: 20px;
  color: var(--hta-grey);
  font-size: 17px;
  max-width: 640px;
}


/* ═══════════ About ═══════════ */
#hta-root .hta-about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 70px;
  align-items: start;
}
#hta-root .hta-about-photo {
  position: relative;
  background: var(--hta-silver-light);
  border: 1px solid var(--hta-silver);
  padding: 28px 28px 0;
}
#hta-root .hta-about-photo::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 4px;
  background: var(--hta-beige);
}
#hta-root .hta-about-photo img { width: 100%; }
#hta-root .hta-photo-caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--hta-grey);
  border-top: 1px solid var(--hta-silver);
  margin: 0 -28px;
  padding: 14px 0 14px 28px;
  background: var(--hta-white);
}
#hta-root .hta-about-text p {
  margin-bottom: 20px;
  color: var(--hta-grey);
}
#hta-root .hta-about-text p:last-child { margin-bottom: 0; }
#hta-root .hta-lead {
  color: var(--hta-navy) !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
#hta-root .hta-credo {
  color: var(--hta-navy) !important;
  font-weight: 500;
  border-left: 4px solid var(--hta-beige);
  padding-left: 20px;
}


/* ═══════════ Services ═══════════ */
#hta-root .hta-service-list { border-top: 1px solid var(--hta-silver); }
#hta-root .hta-service {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 52px 0;
  border-bottom: 1px solid var(--hta-silver);
}
#hta-root .hta-service-label {
  font-size: 12px;
  color: var(--hta-beige-ink);
  padding-top: 8px;
}
#hta-root .hta-service-body h3 {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.35;
  margin-bottom: 14px;
  color: var(--hta-navy);
}
#hta-root .hta-service-body p {
  color: var(--hta-grey);
  max-width: 680px;
}
#hta-root .hta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
#hta-root .hta-tags li {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border: 1px solid var(--hta-silver);
  color: var(--hta-grey);
  background: var(--hta-silver-light);
  border-radius: 2px;
}
#hta-root .hta-section--alt .hta-tags li { background: var(--hta-white); }

#hta-root .hta-section-cta {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
#hta-root .hta-section-cta-note {
  font-size: 12px;
  color: var(--hta-grey);
}


/* ═══════════ Timeline ═══════════ */
#hta-root .hta-timeline {
  border-left: 1px solid var(--hta-silver);
  margin-left: 6px;
}
#hta-root .hta-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 36px;
  padding: 0 0 54px 44px;
}
#hta-root .hta-timeline-item:last-child { padding-bottom: 0; }
#hta-root .hta-timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 9px;
  width: 11px;
  height: 11px;
  background: var(--hta-beige);
  border: 1px solid var(--hta-beige-dark);
}
#hta-root .hta-timeline-year {
  font-size: 13px;
  color: var(--hta-grey);
  padding-top: 4px;
}
#hta-root .hta-timeline-body h3 {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--hta-navy);
}
#hta-root .hta-timeline-body p {
  color: var(--hta-grey);
  max-width: 660px;
}


/* ═══════════ Portfolio ═══════════ */
#hta-root .hta-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#hta-root .hta-portfolio-card {
  border: 1px solid var(--hta-silver);
  background: var(--hta-white);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#hta-root .hta-portfolio-card:hover {
  transform: translateY(-5px);
  border-color: var(--hta-beige);
  box-shadow: 0 20px 44px -26px rgba(10, 22, 40, 0.3);
}
#hta-root .hta-portfolio-glyph {
  width: 14px;
  height: 14px;
  background: var(--hta-beige);
  border: 1px solid var(--hta-beige-dark);
  margin-bottom: 10px;
  transition: transform 0.25s ease;
}
#hta-root .hta-portfolio-card:hover .hta-portfolio-glyph { transform: rotate(45deg); }
#hta-root .hta-portfolio-card h3 {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--hta-navy);
}
#hta-root .hta-portfolio-card p {
  color: var(--hta-grey);
  font-size: 16px;
  flex: 1;
}
#hta-root .hta-portfolio-tag {
  font-size: 11px;
  color: var(--hta-grey);
}


/* ═══════════ Quotes ═══════════ */
#hta-root .hta-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#hta-root .hta-quote {
  background: var(--hta-silver-light);
  border: 1px solid var(--hta-silver);
  border-top: 3px solid var(--hta-beige);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#hta-root .hta-quote p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--hta-navy);
  flex: 1;
}
#hta-root .hta-quote footer {
  font-size: 12px;
  color: var(--hta-grey);
}


/* ═══════════ CTA band ═══════════ */
#hta-root .hta-cta-band {
  background: var(--hta-navy);
  color: var(--hta-white);
  padding: 120px 0;
  text-align: center;
}
#hta-root .hta-eyebrow--light { color: var(--hta-beige); }
#hta-root .hta-cta-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 36px);
  line-height: 1.25;
  max-width: 900px;
  margin: 0 auto;
  color: var(--hta-white);
}
#hta-root .hta-cta-sub {
  color: var(--hta-navy-muted);
  max-width: 760px;
  margin: 24px auto 38px;
  font-size: 17px;
}


/* ═══════════ Footer ═══════════ */
#hta-root .hta-footer {
  background: var(--hta-navy);
  color: var(--hta-white);
  border-top: 1px solid var(--hta-navy-line);
  padding: 44px 0;
}
#hta-root .hta-footer-grid {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
#hta-root .hta-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
#hta-root .hta-footer-name {
  font-size: 14px;
  letter-spacing: 0.16em;
}
#hta-root .hta-footer-tag {
  color: var(--hta-navy-muted);
  font-size: 11px;
  margin-top: 2px;
}
#hta-root .hta-footer-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  flex-wrap: wrap;
}
#hta-root .hta-footer-links a {
  text-decoration: none;
  font-size: 15px;
  color: var(--hta-navy-muted);
  transition: color 0.2s ease;
}
#hta-root .hta-footer-links a:hover { color: var(--hta-beige); }
#hta-root .hta-footer-copy {
  color: var(--hta-navy-muted);
  font-size: 11px;
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   Nút liên hệ nổi (Zalo + Messenger)
   ───────────────────────────────────────────────────────────────────────
   Ghim cố định góc dưới phải, luôn thấy dù cuộn lên hay xuống.
   position: fixed vẫn neo theo viewport dù nằm trong #hta-root, vì
   #hta-root chỉ có position: relative — chỉ transform/filter/perspective
   mới phá được fixed.
   ═══════════════════════════════════════════════════════════════════════ */
#hta-root .hta-contact-dock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 190;              /* trên nav (100), dưới loadbar (200) */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#hta-root .hta-contact-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 22px -6px rgba(10, 22, 40, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#hta-root .hta-contact-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px -8px rgba(10, 22, 40, 0.5);
}
#hta-root .hta-contact-btn:active { transform: translateY(-1px) scale(1.02); }

#hta-root .hta-contact-btn svg {
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
  z-index: 1;
}

#hta-root .hta-contact-btn--zalo { background: #0068FF; }
#hta-root .hta-contact-btn--messenger {
  background: linear-gradient(205deg, #00B2FF 0%, #006AFF 45%, #A033FF 75%, #FF5280 100%);
}

/* Vòng sóng lan toả — để mắt bắt được nút mà không gây khó chịu.
   Hai nút lệch pha nhau nên nhịp không trùng. */
#hta-root .hta-contact-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0.55;
  animation: hta-contact-ping 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
#hta-root .hta-contact-btn:nth-child(2)::before { animation-delay: 1.4s; }

@keyframes hta-contact-ping {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* Nhãn hiện khi rê chuột */
#hta-root .hta-contact-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: var(--hta-navy);
  color: var(--hta-white);
  padding: 9px 15px;
  border-radius: 3px;
  font-family: var(--hta-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#hta-root .hta-contact-label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--hta-navy);
}
#hta-root .hta-contact-btn:hover .hta-contact-label,
#hta-root .hta-contact-btn:focus-visible .hta-contact-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 720px) {
  #hta-root .hta-contact-dock { right: 14px; bottom: 14px; gap: 12px; }
  #hta-root .hta-contact-btn { width: 50px; height: 50px; }
  #hta-root .hta-contact-btn svg { width: 30px; height: 30px; }
  /* Trên điện thoại nhãn dễ che nội dung, và không có chuột để rê */
  #hta-root .hta-contact-label { display: none; }
}

/* ═══════════ Reveal on scroll ═══════════ */
#hta-root .hta-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#hta-root .hta-reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ═══════════ Focus ═══════════ */
#hta-root a:focus-visible,
#hta-root .hta-btn:focus-visible {
  outline: 2px solid var(--hta-beige-dark);
  outline-offset: 3px;
}


/* ═══════════ Responsive ═══════════ */
@media (max-width: 960px) {
  #hta-root .hta-about-grid { grid-template-columns: 1fr; gap: 44px; }
  #hta-root .hta-about-photo { max-width: 380px; }
  #hta-root .hta-portfolio-grid,
#hta-root .hta-quote-grid { grid-template-columns: 1fr; }
  #hta-root .hta-service { grid-template-columns: 1fr; gap: 12px; padding: 42px 0; }
  #hta-root .hta-timeline-item { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; }
  #hta-root .hta-section { padding: 88px 0; }
  #hta-root .hta-cta-band { padding: 88px 0; }
  #hta-root .hta-section-head { margin-bottom: 48px; }
}

@media (max-width: 720px) {
  #hta-root .hta-nav { padding: 14px 20px; gap: 16px; }
  #hta-root .hta-nav.is-scrolled { padding: 12px 20px; }
  #hta-root .hta-nav-links { display: none; }
  #hta-root .hta-nav-cta { margin-left: auto; }
  #hta-root .hta-scrub-track { height: 380vh; }
  #hta-root .hta-hero-card { padding: 26px 22px 30px; }
  #hta-root .hta-hero-card--tight { padding: 22px 20px 26px; }
  #hta-root .hta-hero-points { gap: 12px; }
  #hta-root .hta-hero-points li { padding: 10px 18px; }
  #hta-root .hta-footer-grid { flex-direction: column; align-items: flex-start; gap: 20px; }
  #hta-root .hta-footer-links { margin-left: 0; gap: 18px; }
  #hta-root .hta-br-desktop { display: none; }
}


/* ═══════════ Reduced motion ═══════════ */
@media (prefers-reduced-motion: reduce) {
  #hta-root .hta-reveal { opacity: 1; transform: none; transition: none; }
  #hta-root .hta-scroll-hint-line::after { animation: none; }
  /* Tắt vòng sóng, nhưng giữ nút — đây là chức năng, không phải trang trí */
  #hta-root .hta-contact-btn::before { animation: none; opacity: 0; }
  #hta-root .hta-contact-btn { transition: none; }
  #hta-root .hta-scrub-track { height: auto; }
  #hta-root .hta-scrub-stage { position: relative; height: auto; }
  #hta-root .hta-scrub-canvas { position: relative; height: 62vh; }
  #hta-root .hta-stage-copy {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 40px 24px;
  }
  #hta-root .hta-stage-copy--1 { padding-top: 100px; }
  #hta-root .hta-scroll-hint,
#hta-root .hta-stage-endfade,
#hta-root .hta-stage-scrim,
#hta-root .hta-stage-glow { display: none; }
  
  /* Không còn lớp phủ nên nav cần nền cố định để đọc được trên ảnh */
#hta-root .hta-nav {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 var(--hta-silver);
  }
}


/* ═══════════ Công tắc dùng khi nhúng vào WordPress ═══════════
   Website WordPress có sẵn đã có header/footer riêng. Đặt attribute trên
   thẻ #hta-root để ẩn header/footer của trang này, KHÔNG cần xoá markup:

     <div class="hta-root" id="hta-root" data-hta-nav="off" data-hta-footer="off" ...>

   Nếu theme có header cố định (sticky/fixed), khai báo thêm chiều cao của nó
   để hero ghim bên dưới header:

     style="--hta-top-offset: 64px"
*/
#hta-root[data-hta-nav="off"] .hta-nav { display: none; }
#hta-root[data-hta-footer="off"] .hta-footer { display: none; }

/* ═══════════ WordPress: bù chiều cao admin bar ═══════════ */
body.admin-bar #hta-root { --hta-top-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #hta-root { --hta-top-offset: 46px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HOANG TUNG AI — phần dành cho theme WordPress
   ───────────────────────────────────────────────────────────────────────
   Bổ sung cho css/style.css: trang trong (bài viết, chuyên mục, trang tĩnh,
   tìm kiếm, 404, bình luận).

   Lưu ý quan trọng về .hta-prose:
   Reset ở style.css đã xoá sạch margin / list-style / border của mọi thẻ
   trong #hta-root — cần thiết để không dính CSS theme khi nhúng, nhưng nội
   dung bài viết do WordPress sinh ra thì LẠI CẦN những thứ đó. Vì vậy
   .hta-prose khôi phục lại typography bình thường. Độ đặc hiệu
   `#hta-root .hta-prose p` (1,0,1,1) thắng reset `#hta-root p` (1,0,0,1).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ Huỷ thủ thuật full-bleed ═══════════
   style.css kéo #hta-root ra full chiều ngang bằng
   `width: var(--hta-vw, 100vw)` — cần thiết khi DÁN khối này vào theme khác
   (phải phá container max-width của theme đó).
   Trong theme này #hta-root đã là thẻ bọc cấp cao nhất, không có gì để phá.
   Giữ nguyên sẽ hỏng: giá trị dự phòng 100vw tính cả bề rộng scrollbar, mà
   --hta-vw chỉ được JS đặt ở trang chủ (nơi duy nhất nạp main.js) → mọi
   trang blog sẽ dư ~15px và sinh thanh cuộn ngang.
   File này nối SAU style.css nên cùng độ đặc hiệu, khai báo sau thắng. */
#hta-root {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ═══════════ Nav ở trang trong ═══════════
   Trang chủ có hero nên nav trong suốt rồi mới đặc dần khi cuộn.
   Trang trong không có hero → nav phải đặc ngay từ đầu, và nội dung phải
   được đẩy xuống vì nav dùng position: fixed. */
#hta-root.hta-root--inner .hta-nav {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hta-silver);
}
#hta-root.hta-root--inner .hta-site-main {
  padding-top: 78px; /* chiều cao nav */
}
@media (max-width: 720px) {
  #hta-root.hta-root--inner .hta-site-main { padding-top: 70px; }
}

/* Menu do wp_nav_menu() sinh ra là <nav class="hta-nav-links"><ul><li><a>.
   Reset ở style.css đã xoá list-style/margin nên chỉ cần dựng lại hàng ngang. */
#hta-root .hta-nav-links ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#hta-root .hta-nav-links li { margin: 0; }
#hta-root .hta-nav-links .current-menu-item > a,
#hta-root .hta-nav-links .current_page_item > a,
#hta-root .hta-nav-links .current-post-ancestor > a,
#hta-root .hta-nav-links .current-menu-parent > a {
  color: var(--hta-navy);
}
/* Logo tuỳ chỉnh (nếu người dùng đặt trong Customizer) */
#hta-root .hta-nav-brand .custom-logo-link { display: block; line-height: 0; }
#hta-root .hta-nav-brand .custom-logo { max-height: 40px; width: auto; }

/* ═══════════ Đầu trang trong ═══════════ */
#hta-root .hta-page-head {
  background: var(--hta-silver-light);
  border-bottom: 1px solid var(--hta-silver);
  padding: 72px 0 64px;
}
/* Căn giữa: khung 820px nằm trong container 1160px, không có margin auto thì
   nó dạt hẳn sang trái và chừa một mảng trống lớn bên phải — nhìn như trang
   bị vỡ thành hai cột. */
/* Cùng bề rộng với .hta-prose để mép trái tiêu đề thẳng hàng với mép trái
   nội dung bên dưới. */
#hta-root .hta-page-head-inner { max-width: 760px; margin: 0 auto; }
#hta-root .hta-page-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hta-navy);
}
#hta-root .hta-page-lead {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--hta-grey);
  max-width: 680px;
}

/* ═══════════ Meta bài viết ═══════════ */
#hta-root .hta-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hta-grey);
}
#hta-root .hta-post-meta a { color: var(--hta-beige-ink); }
#hta-root .hta-post-meta a:hover { color: var(--hta-navy); }
#hta-root .hta-post-meta-sep { color: var(--hta-silver); }

#hta-root .hta-cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--hta-beige);
  background: var(--hta-white);
  color: var(--hta-beige-ink);
  border-radius: 2px;
}
#hta-root .hta-cat-pill:hover {
  background: var(--hta-beige);
  color: var(--hta-navy);
}

/* ═══════════ Ảnh đại diện bài viết ═══════════ */
#hta-root .hta-featured {
  margin: 0 auto 56px;
  max-width: 900px;
  border: 1px solid var(--hta-silver);
  background: var(--hta-silver-light);
}
#hta-root .hta-featured img { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   .hta-prose — nội dung bài viết / trang do WordPress sinh ra
   ═══════════════════════════════════════════════════════════════════════ */
#hta-root .hta-prose {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.8;
  color: var(--hta-navy);
}
@media (max-width: 720px) {
  #hta-root .hta-prose { font-size: 17px; }
}

/* Giãn cách dọc giữa các khối. KHÔNG được khai báo `margin: 0` ở các rule
   bên dưới — `.hta-prose p` (1,0,1,1) đặc hiệu hơn `.hta-prose > * + *`
   (1,0,1,0) nên sẽ xoá mất khoảng cách này. Margin đã được reset về 0 sẵn. */
#hta-root .hta-prose > * + * { margin-top: 28px; }

#hta-root .hta-prose p {
  color: var(--hta-navy);
  font-size: inherit;
  line-height: inherit;
}

#hta-root .hta-prose h2,
#hta-root .hta-prose h3,
#hta-root .hta-prose h4 {
  font-family: var(--hta-font-head);
  color: var(--hta-navy);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
#hta-root .hta-prose h2 {
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 56px;
  padding-top: 4px;
}
#hta-root .hta-prose h3 {
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 24px);
  margin-top: 44px;
}
#hta-root .hta-prose h4 {
  font-weight: 700;
  font-size: 19px;
  margin-top: 36px;
}
/* Tiêu đề đầu tiên không cần khoảng trống lớn phía trên */
#hta-root .hta-prose > h2:first-child,
#hta-root .hta-prose > h3:first-child,
#hta-root .hta-prose > h4:first-child { margin-top: 0; }

#hta-root .hta-prose a {
  color: var(--hta-navy);
  text-decoration: underline;
  text-decoration-color: var(--hta-beige-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
#hta-root .hta-prose a:hover {
  color: var(--hta-beige-ink);
  text-decoration-color: var(--hta-beige-ink);
}

#hta-root .hta-prose strong,
#hta-root .hta-prose b { font-weight: 700; color: var(--hta-navy); }
#hta-root .hta-prose em,
#hta-root .hta-prose i { font-style: italic; }

/* Danh sách — reset ở style.css đã xoá bullet, khôi phục tại đây.
   Phải đặt list-style TRỰC TIẾP lên <li>: reset có rule `#hta-root li`
   (1,0,0,1) với `list-style: none`, mà rule trực tiếp luôn thắng giá trị
   kế thừa từ <ul> — đặt trên <ul> thôi thì bullet vẫn không hiện. */
#hta-root .hta-prose ul,
#hta-root .hta-prose ol {
  padding-left: 26px;
}
#hta-root .hta-prose ul > li { list-style: disc outside; }
#hta-root .hta-prose ol > li { list-style: decimal outside; }
#hta-root .hta-prose ul ul > li { list-style: circle outside; }
#hta-root .hta-prose li {
  margin-bottom: 12px;
  padding-left: 6px;
  color: var(--hta-navy);
  font-size: inherit;
  line-height: inherit;
}
#hta-root .hta-prose li:last-child { margin-bottom: 0; }
#hta-root .hta-prose li::marker { color: var(--hta-beige-dark); }
#hta-root .hta-prose li > ul,
#hta-root .hta-prose li > ol { margin-top: 12px; }

#hta-root .hta-prose blockquote {
  border-left: 4px solid var(--hta-beige);
  background: var(--hta-silver-light);
  padding: 24px 28px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--hta-navy);
}
#hta-root .hta-prose blockquote p { font-size: inherit; }
#hta-root .hta-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hta-grey);
}

#hta-root .hta-prose img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--hta-silver);
}
#hta-root .hta-prose figure { margin: 0; }
#hta-root .hta-prose figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hta-grey);
  text-align: center;
}

#hta-root .hta-prose hr {
  border: 0;
  border-top: 1px solid var(--hta-silver);
  margin: 52px 0;
}

#hta-root .hta-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--hta-silver-light);
  border: 1px solid var(--hta-silver);
  border-radius: 3px;
  padding: 2px 6px;
}
#hta-root .hta-prose pre {
  background: var(--hta-navy);
  color: #E6EAF0;
  padding: 22px 24px;
  border-radius: 3px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.65;
}
#hta-root .hta-prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Bảng — cho phép cuộn ngang thay vì phá vỡ layout */
#hta-root .hta-prose .hta-table-scroll { overflow-x: auto; }
#hta-root .hta-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
#hta-root .hta-prose th,
#hta-root .hta-prose td {
  border: 1px solid var(--hta-silver);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
#hta-root .hta-prose th {
  background: var(--hta-silver-light);
  font-weight: 700;
  font-family: var(--hta-font-head);
}

/* ── Block của WordPress ──────────────────────────────────────────────
   Nội dung trang/bài do trình soạn thảo block sinh ra. Chỉ khai báo những
   thứ reset đã lỡ xoá hoặc cần khớp với hệ thiết kế — phần còn lại để CSS
   lõi của WordPress (wp-block-library) lo. */

/* Nhiều cột: gộp về 1 cột trên điện thoại cho dễ đọc */
#hta-root .hta-prose .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}
#hta-root .hta-prose .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 720px) {
  #hta-root .hta-prose .wp-block-column { flex-basis: 100% !important; }
}

/* Group / Cover: giữ lại nền và khoảng đệm người dùng đặt trong trình soạn thảo */
#hta-root .hta-prose .wp-block-group.has-background,
#hta-root .hta-prose .wp-block-cover { padding: 28px; }
#hta-root .hta-prose .wp-block-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  position: relative;
}

/* Nút của block editor — cho khớp nút beige của theme */
#hta-root .hta-prose .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#hta-root .hta-prose .wp-block-button__link {
  display: inline-block;
  background: var(--hta-beige);
  color: var(--hta-navy);
  border: 1px solid var(--hta-beige);
  border-radius: 2px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
#hta-root .hta-prose .wp-block-button__link:hover {
  background: var(--hta-beige-ink);
  border-color: var(--hta-beige-ink);
  color: var(--hta-white);
}
#hta-root .hta-prose .wp-block-button.is-style-outline .wp-block-button__link {
  background: none;
  color: var(--hta-navy);
  border-color: var(--hta-navy);
}

#hta-root .hta-prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--hta-silver);
  margin: 52px auto;
}
#hta-root .hta-prose .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#hta-root .hta-prose .wp-block-embed iframe,
#hta-root .hta-prose iframe { max-width: 100%; border: 0; }
#hta-root .hta-prose .wp-block-image { margin: 0; }

/* ── Căn lề của block ───────────────────────────────────────────────── */
#hta-root .hta-prose .alignleft { float: left; margin: 6px 28px 20px 0; }
#hta-root .hta-prose .alignright { float: right; margin: 6px 0 20px 28px; }
#hta-root .hta-prose .aligncenter { margin-left: auto; margin-right: auto; }
/* .hta-prose rộng 760px và đã căn giữa, nên nới đều hai bên bằng margin âm */
#hta-root .hta-prose .alignwide {
  width: auto;
  max-width: 1060px;
  margin-left: -150px;
  margin-right: -150px;
}
#hta-root .hta-prose .alignfull { max-width: none; }
#hta-root .hta-prose .wp-caption { max-width: 100%; }
#hta-root .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 1080px) {
  /* Hết chỗ để nới ra hai bên — trả về đúng bề rộng cột chữ */
  #hta-root .hta-prose .alignwide {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 600px) {
  #hta-root .hta-prose .alignleft,
  #hta-root .hta-prose .alignright { float: none; margin: 0 auto; }
}

/* ═══════════ Chân bài viết ═══════════ */
#hta-root .hta-post-footer {
  max-width: 760px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hta-silver);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
#hta-root .hta-tag-link {
  font-size: 13px;
  padding: 6px 13px;
  border: 1px solid var(--hta-silver);
  color: var(--hta-grey);
  background: var(--hta-silver-light);
  border-radius: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
#hta-root .hta-tag-link:hover { border-color: var(--hta-beige); color: var(--hta-navy); }

/* Điều hướng bài trước / bài sau */
#hta-root .hta-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin-top: 48px;
}
#hta-root .hta-post-nav-link {
  border: 1px solid var(--hta-silver);
  padding: 22px 24px;
  display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
#hta-root .hta-post-nav-link:hover { border-color: var(--hta-beige); transform: translateY(-3px); }
#hta-root .hta-post-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hta-beige-ink);
  display: block;
  margin-bottom: 8px;
}
#hta-root .hta-post-nav-title {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--hta-navy);
}
#hta-root .hta-post-nav--next { text-align: right; }
@media (max-width: 720px) {
  #hta-root .hta-post-nav { grid-template-columns: 1fr; }
  #hta-root .hta-post-nav--next { text-align: left; }
}

/* ═══════════ Lưới bài viết (chuyên mục, tìm kiếm) ═══════════ */
#hta-root .hta-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) { #hta-root .hta-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #hta-root .hta-post-grid { grid-template-columns: 1fr; } }

#hta-root .hta-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hta-silver);
  background: var(--hta-white);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#hta-root .hta-card:hover {
  transform: translateY(-5px);
  border-color: var(--hta-beige);
  box-shadow: 0 20px 44px -26px rgba(10, 22, 40, 0.3);
}
#hta-root .hta-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hta-silver-light);
  border-bottom: 1px solid var(--hta-silver);
}
#hta-root .hta-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
#hta-root .hta-card:hover .hta-card-thumb img { transform: scale(1.04); }
#hta-root .hta-card-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
#hta-root .hta-card-thumb--empty::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--hta-beige);
  border: 1px solid var(--hta-beige-dark);
}
#hta-root .hta-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
#hta-root .hta-card-date {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hta-grey);
}
#hta-root .hta-card-title {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--hta-navy);
}
#hta-root .hta-card:hover .hta-card-title { color: var(--hta-beige-ink); }
#hta-root .hta-card-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: var(--hta-grey);
  flex: 1;
}
#hta-root .hta-card-more {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hta-beige-ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
#hta-root .hta-card-more:hover,
#hta-root .hta-card-more:focus-visible {
  color: var(--hta-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ═══════════ Phân trang ═══════════ */
#hta-root .hta-pagination {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}
#hta-root .hta-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#hta-root .hta-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hta-silver);
  font-size: 15px;
  font-weight: 500;
  color: var(--hta-grey);
  background: var(--hta-white);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
#hta-root .hta-pagination .page-numbers:hover {
  border-color: var(--hta-beige);
  color: var(--hta-navy);
}
#hta-root .hta-pagination .page-numbers.current {
  background: var(--hta-beige);
  border-color: var(--hta-beige);
  color: var(--hta-navy);
}
#hta-root .hta-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ═══════════ Ô tìm kiếm ═══════════ */
#hta-root .hta-searchform {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin-top: 26px;
}
#hta-root .hta-searchform input[type="search"] {
  flex: 1;
  font-family: var(--hta-font-body);
  font-size: 16px;
  color: var(--hta-navy);
  background: var(--hta-white);
  border: 1px solid var(--hta-silver);
  border-radius: 2px;
  padding: 13px 16px;
  min-width: 0;
}
#hta-root .hta-searchform input[type="search"]:focus {
  outline: 2px solid var(--hta-beige-dark);
  outline-offset: 1px;
  border-color: var(--hta-beige-dark);
}
#hta-root .hta-searchform button {
  font-family: var(--hta-font-body);
  font-weight: 500;
  font-size: 15px;
  padding: 13px 24px;
  border: 1px solid var(--hta-beige);
  border-radius: 2px;
  background: var(--hta-beige);
  color: var(--hta-navy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
#hta-root .hta-searchform button:hover {
  background: var(--hta-beige-ink);
  border-color: var(--hta-beige-ink);
  color: var(--hta-white);
}

/* ═══════════ Bình luận ═══════════ */
#hta-root .hta-comments {
  max-width: 760px;
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--hta-silver);
}
#hta-root .hta-comments-title {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: 24px;
  color: var(--hta-navy);
  margin-bottom: 32px;
}
#hta-root .hta-comments ol.comment-list,
#hta-root .hta-comments ol.children {
  list-style: none;
  padding: 0;
  margin: 0;
}
#hta-root .hta-comments ol.children { padding-left: 28px; margin-top: 22px; }
#hta-root .hta-comments li.comment { margin-bottom: 26px; }
#hta-root .hta-comments .comment-body {
  border: 1px solid var(--hta-silver);
  background: var(--hta-silver-light);
  padding: 22px 24px;
}
#hta-root .hta-comments .comment-author {
  font-weight: 500;
  color: var(--hta-navy);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#hta-root .hta-comments .comment-author img { border-radius: 50%; }
#hta-root .hta-comments .comment-metadata {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hta-grey);
  margin: 6px 0 12px;
}
#hta-root .hta-comments .comment-content p { margin-bottom: 14px; line-height: 1.7; }
#hta-root .hta-comments .comment-content p:last-child { margin-bottom: 0; }
#hta-root .hta-comments .reply a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hta-beige-ink);
}

#hta-root .hta-comments .comment-respond { margin-top: 40px; }
#hta-root .hta-comments .comment-reply-title {
  font-family: var(--hta-font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--hta-navy);
  margin-bottom: 18px;
}
#hta-root .hta-comments label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hta-grey);
  margin-bottom: 7px;
}
#hta-root .hta-comments input[type="text"],
#hta-root .hta-comments input[type="email"],
#hta-root .hta-comments input[type="url"],
#hta-root .hta-comments textarea {
  width: 100%;
  font-family: var(--hta-font-body);
  font-size: 16px;
  color: var(--hta-navy);
  background: var(--hta-white);
  border: 1px solid var(--hta-silver);
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
#hta-root .hta-comments textarea { min-height: 150px; resize: vertical; }
#hta-root .hta-comments input:focus,
#hta-root .hta-comments textarea:focus {
  outline: 2px solid var(--hta-beige-dark);
  outline-offset: 1px;
  border-color: var(--hta-beige-dark);
}
#hta-root .hta-comments input[type="submit"] {
  font-family: var(--hta-font-body);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 30px;
  border: 1px solid var(--hta-beige);
  border-radius: 2px;
  background: var(--hta-beige);
  color: var(--hta-navy);
  cursor: pointer;
  width: auto;
  transition: background 0.2s ease, color 0.2s ease;
}
#hta-root .hta-comments input[type="submit"]:hover {
  background: var(--hta-beige-ink);
  border-color: var(--hta-beige-ink);
  color: var(--hta-white);
}
#hta-root .hta-comments .comment-notes,
#hta-root .hta-comments .logged-in-as {
  font-size: 14px;
  color: var(--hta-grey);
  margin-bottom: 20px;
}

/* ═══════════ Trạng thái rỗng / 404 ═══════════ */
#hta-root .hta-empty {
  max-width: 640px;
  padding: 20px 0 10px;
}
#hta-root .hta-empty p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--hta-grey);
  margin-bottom: 26px;
}
#hta-root .hta-404-code {
  font-family: var(--hta-font-head);
  font-weight: 800;
  font-size: clamp(72px, 14vw, 150px);
  line-height: 1;
  color: var(--hta-silver);
  margin-bottom: 12px;
}

/* ═══════════ Bỏ qua tới nội dung (a11y) ═══════════ */
#hta-root .hta-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--hta-navy);
  color: var(--hta-white);
  padding: 14px 22px;
  font-size: 15px;
}
#hta-root .hta-skip-link:focus {
  left: 12px;
  top: 12px;
}