/*
Theme Name: HDCTax
Theme URI: https://hdctax.com
Author: HDCTax Tech Team
Author URI: https://hdctax.com
Description: Modern Block Theme for HDCTax - Chuyên gia Kế toán, Thuế & Tư vấn Tài chính ứng dụng AI
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: hdctax
*/

/* ============================================================
   MỤC LỤC STYLE.CSS:
   1. BIẾN VÀ THÀNH PHẦN NỀN TẢNG (TOKENS & RESET)
   2. HEADER & FOOTER
   3. PATTERNS (CÁC KHỐI GIAO DIỆN & TIỆN ÍCH DỰNG SẴN)
   4. TEMPLATES (BÀI VIẾT, CHUYÊN MỤC, GUTENBERG)
   ============================================================ */


/* ============================================================
   1. BIẾN VÀ THÀNH PHẦN NỀN TẢNG (TOKENS & RESET)
   ============================================================ */

:root {
  /* Cầu nối từ theme.json */
  --hdc-bg:            var(--wp--preset--color--bg, #FFFFFF);
  --hdc-bg-soft:       var(--wp--preset--color--bg-soft, #F8FAFC);
  --hdc-bg-tint:       var(--wp--preset--color--bg-tint, #F0FDF4);
  --hdc-dark:          var(--wp--preset--color--dark, #0B4635);
  --hdc-dark-deep:     var(--wp--preset--color--dark-deep, #05281E);
  --hdc-dark-surface:  var(--wp--preset--color--dark-surface, #115743);

  --hdc-ink:           var(--wp--preset--color--ink, #0F172A);
  --hdc-body:          var(--wp--preset--color--body, #334155);
  --hdc-muted:         var(--wp--preset--color--muted, #64748B);

  --hdc-accent:        var(--wp--preset--color--accent, #F37021);
  --hdc-accent-text:   var(--wp--preset--color--accent-text, #C24E07);
  --hdc-accent-light:  var(--wp--preset--color--accent-light, #FF944D);

  --hdc-primary:       var(--wp--preset--color--primary, #0B4635);
  --hdc-primary-light: var(--wp--preset--color--primary-light, #22C55E);

  --hdc-on-dark:       var(--wp--preset--color--on-dark, #F8FAFC);
  --hdc-on-dark-muted: var(--wp--preset--color--on-dark-muted, #94A3B8);

  --hdc-line:          var(--wp--preset--color--line, #E2E8F0);
  --hdc-line-dark:     var(--wp--preset--color--line-dark, #174D3D);

  --hdc-error:         var(--wp--preset--color--error, #DC2626);
  --hdc-warning:       var(--wp--preset--color--warning, #D97706);
  --hdc-success:       var(--wp--preset--color--success, #16A34A);

  /* Fonts & Weights (Khai trực tiếp do WP không có preset weight) */
  --hdc-font-display:  var(--wp--preset--font-family--display, 'Plus Jakarta Sans', system-ui, sans-serif);
  --hdc-font-body:     var(--wp--preset--font-family--body, 'Inter', system-ui, sans-serif);
  --hdc-font-mono:     var(--wp--preset--font-family--mono, monospace);

  --hdc-weight-normal:   400;
  --hdc-weight-medium:   500;
  --hdc-weight-semibold: 600;
  --hdc-weight-bold:     700;
  --hdc-weight-extrabold:800;

  /* Thang chữ */
  --hdc-text-hero:     clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --hdc-text-h1:       clamp(1.875rem, 1.35rem + 2.25vw, 3.25rem);
  --hdc-text-h2:       clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --hdc-text-h3:       clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);
  --hdc-text-h4:       clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --hdc-text-lead:     clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --hdc-text-body:     1.0625rem;
  --hdc-text-small:    0.9375rem;
  --hdc-text-caption:  0.8125rem;
  --hdc-text-eyebrow:  0.75rem;

  /* Chiều cao dòng */
  --hdc-leading-tight: 1.2;
  --hdc-leading-head:  1.28;
  --hdc-leading-lead:  1.6;
  --hdc-leading-body:  1.75;

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

  --hdc-section-sm: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --hdc-section:    clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --hdc-section-lg: clamp(5.5rem, 3.5rem + 8vw, 10rem);

  /* Bề rộng */
  --hdc-width-text:    720px;
  --hdc-width-content: 1140px;
  --hdc-width-wide:    1360px;
  --hdc-gutter: clamp(16px, 4vw, 48px);

  /* Bo góc & Đổ bóng */
  --hdc-radius-sm:    6px;
  --hdc-radius:       12px;
  --hdc-radius-lg:    18px;
  --hdc-radius-full:  9999px;

  --hdc-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --hdc-shadow:       0 4px 12px -2px rgba(11, 70, 53, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --hdc-shadow-md:    0 12px 24px -4px rgba(11, 70, 53, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  --hdc-shadow-lg:    0 24px 38px -6px rgba(11, 70, 53, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
  --hdc-shadow-orange:0 8px 20px -2px rgba(243, 112, 33, 0.35);

  --hdc-dur:          0.3s;
  --hdc-dur-fast:     0.15s;
  --hdc-dur-slow:     0.5s;
  --hdc-ease:         cubic-bezier(0.16, 1, 0.3, 1);

  --hdc-header-h:     80px;
}

/* Quy tắc nền tảng */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  font-family: var(--hdc-font-body);
  font-size: 16px;
  line-height: var(--hdc-leading-body);
  color: var(--hdc-body);
  background-color: var(--hdc-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Typography chuẩn */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hdc-font-display);
  color: var(--hdc-ink);
  line-height: var(--hdc-leading-head);
  font-weight: var(--hdc-weight-bold);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--hdc-text-h1); }
h2 { font-size: var(--hdc-text-h2); }
h3 { font-size: var(--hdc-text-h3); }
h4 { font-size: var(--hdc-text-h4); }

p {
  margin-bottom: var(--hdc-space-4);
  font-size: var(--hdc-text-body);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--hdc-accent-text);
  text-decoration: none;
  transition: color var(--hdc-dur-fast) var(--hdc-ease);
}

a:hover {
  color: var(--hdc-primary);
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}


/* ============================================================
   2. HEADER & FOOTER
   ============================================================ */

/* Skip Link */
.hdc-skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  background: var(--hdc-accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--hdc-radius-sm);
  z-index: 9999;
  font-weight: var(--hdc-weight-semibold);
  transition: top var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-skip-link:focus {
  top: 20px;
}

/* Header cố định */
.hdc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hdc-header-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background-color var(--hdc-dur) var(--hdc-ease),
              box-shadow var(--hdc-dur) var(--hdc-ease),
              border-color var(--hdc-dur) var(--hdc-ease),
              backdrop-filter var(--hdc-dur) var(--hdc-ease);
  border-bottom: 1px solid transparent;
}

.hdc-header-inner {
  width: 100%;
  max-width: var(--hdc-width-wide);
  margin: 0 auto;
  padding: 0 var(--hdc-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hdc-space-6);
}

.hdc-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.hdc-brand-logo img {
  height: 46px;
  width: auto;
  max-height: 46px;
  object-fit: contain;
}

/* Hiển thị logo mặc định trên nền sáng */
.hdc-logo-colored {
  display: block;
}
.hdc-logo-white {
  display: none;
}

/* Header trên trang có Hero tối (Mặc định khi chưa cuộn) */
body:has(.hdc-hero-dark) .hdc-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body:has(.hdc-hero-dark) .hdc-header:not(.is-scrolled) .hdc-nav-link {
  color: rgba(255, 255, 255, 0.9);
}
body:has(.hdc-hero-dark) .hdc-header:not(.is-scrolled) .hdc-nav-link:hover {
  color: var(--hdc-accent-light);
}
body:has(.hdc-hero-dark) .hdc-header:not(.is-scrolled) .hdc-logo-colored {
  display: none;
}
body:has(.hdc-hero-dark) .hdc-header:not(.is-scrolled) .hdc-logo-white {
  display: block;
}

/* Header khi cuộn trang (Header luôn có nền sáng mờ) */
.hdc-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hdc-line);
  box-shadow: var(--hdc-shadow-sm);
}
.hdc-header.is-scrolled .hdc-nav-link {
  color: var(--hdc-ink);
}
.hdc-header.is-scrolled .hdc-nav-link:hover {
  color: var(--hdc-accent);
}
.hdc-header.is-scrolled .hdc-logo-colored {
  display: block;
}
.hdc-header.is-scrolled .hdc-logo-white {
  display: none;
}

/* Menu điều hướng */
.hdc-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--hdc-space-6);
}

.hdc-nav-item {
  position: relative;
}

.hdc-nav-link {
  font-family: var(--hdc-font-display);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  transition: color var(--hdc-dur-fast) var(--hdc-ease);
}

.hdc-badge-nav {
  font-size: 10px;
  background: var(--hdc-accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--hdc-radius-full);
  text-transform: uppercase;
  font-weight: var(--hdc-weight-bold);
  letter-spacing: 0.5px;
}

/* Submenu Dropdown */
.hdc-dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  background: #FFFFFF;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  box-shadow: var(--hdc-shadow-lg);
  padding: var(--hdc-space-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--hdc-dur) var(--hdc-ease);
  pointer-events: none;
}
.hdc-nav-item:hover .hdc-dropdown,
.hdc-nav-item:focus-within .hdc-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.hdc-dropdown-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--hdc-radius-sm);
  color: var(--hdc-ink);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-medium);
  transition: background var(--hdc-dur-fast) var(--hdc-ease), color var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-dropdown-link:hover {
  background: var(--hdc-bg-soft);
  color: var(--hdc-accent);
}
.hdc-dropdown-link span {
  display: block;
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
  font-weight: var(--hdc-weight-normal);
  margin-top: 2px;
}

/* Header Actions */
.hdc-header-actions {
  display: flex;
  align-items: center;
  gap: var(--hdc-space-4);
}

.hdc-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
}

/* Chân trang (Footer) */
.hdc-footer {
  background-color: var(--hdc-dark-deep);
  color: var(--hdc-on-dark-muted);
  padding-top: var(--hdc-section);
  padding-bottom: var(--hdc-space-8);
  border-top: 1px solid var(--hdc-line-dark);
  margin-top: auto;
}

.hdc-footer :is(h1, h2, h3, h4, h5, h6) {
  color: var(--hdc-on-dark);
}

.hdc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.6fr;
  gap: var(--hdc-space-8);
  margin-bottom: var(--hdc-section-sm);
}

.hdc-footer-brand p {
  color: var(--hdc-on-dark-muted);
  font-size: var(--hdc-text-small);
  margin-top: var(--hdc-space-4);
  max-width: 320px;
}

.hdc-footer-col h4 {
  font-size: var(--hdc-text-h4);
  margin-bottom: var(--hdc-space-5);
  position: relative;
  padding-bottom: var(--hdc-space-2);
}
.hdc-footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--hdc-accent);
}

.hdc-footer-links li {
  margin-bottom: var(--hdc-space-3);
}
.hdc-footer-links a {
  color: var(--hdc-on-dark-muted);
  font-size: var(--hdc-text-small);
  transition: color var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-footer-links a:hover {
  color: var(--hdc-accent-light);
}

.hdc-footer-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: var(--hdc-space-3);
  font-size: var(--hdc-text-small);
}

.hdc-footer-bottom {
  padding-top: var(--hdc-space-6);
  border-top: 1px solid var(--hdc-line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hdc-space-4);
  font-size: var(--hdc-text-caption);
}


/* ============================================================
   3. PATTERNS (CÁC KHỐI GIAO DIỆN & TIỆN ÍCH DỰNG SẴN)
   ============================================================ */

/* Khung chứa (Containers) */
.hdc-container {
  width: 100%;
  max-width: var(--hdc-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hdc-gutter);
  padding-right: var(--hdc-gutter);
}

.hdc-container-wide {
  width: 100%;
  max-width: var(--hdc-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hdc-gutter);
  padding-right: var(--hdc-gutter);
}

.hdc-container-text {
  width: 100%;
  max-width: var(--hdc-width-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hdc-gutter);
  padding-right: var(--hdc-gutter);
}

/* Sections */
.hdc-section {
  padding-top: var(--hdc-section);
  padding-bottom: var(--hdc-section);
  position: relative;
}

.hdc-section-sm {
  padding-top: var(--hdc-section-sm);
  padding-bottom: var(--hdc-section-sm);
}

.hdc-section-soft {
  background-color: var(--hdc-bg-soft);
}

.hdc-section-tint {
  background-color: var(--hdc-bg-tint);
}

.hdc-section-dark {
  background-color: var(--hdc-dark);
  color: var(--hdc-on-dark);
}
.hdc-section-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--hdc-on-dark);
}
.hdc-section-dark p {
  color: var(--hdc-on-dark-muted);
}

/* Tiêu đề Section (Section Header) */
.hdc-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--hdc-space-8);
}
.hdc-section-header.text-left {
  text-align: left;
  margin-left: 0;
}
.hdc-section-header h2 {
  margin-top: var(--hdc-space-2);
  margin-bottom: var(--hdc-space-3);
}
.hdc-section-header p {
  color: var(--hdc-muted);
  font-size: var(--hdc-text-lead);
}
.hdc-section-dark .hdc-section-header p {
  color: var(--hdc-on-dark-muted);
}

/* Nút bấm (Buttons) */
.hdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hdc-space-2);
  padding: 12px 24px;
  font-family: var(--hdc-font-display);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-semibold);
  border-radius: var(--hdc-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all var(--hdc-dur) var(--hdc-ease);
  min-height: var(--hdc-tap-min);
  text-decoration: none;
}

.hdc-btn-accent {
  background-color: var(--hdc-accent);
  color: #FFFFFF;
  box-shadow: var(--hdc-shadow-orange);
}
.hdc-btn-accent:hover {
  background-color: var(--hdc-accent-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--hdc-shadow-lg);
}

.hdc-btn-primary {
  background-color: var(--hdc-primary);
  color: #FFFFFF;
}
.hdc-btn-primary:hover {
  background-color: var(--hdc-primary-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.hdc-btn-outline {
  background-color: transparent;
  border-color: var(--hdc-line);
  color: var(--hdc-ink);
}
.hdc-btn-outline:hover {
  border-color: var(--hdc-primary);
  color: var(--hdc-primary);
  background-color: var(--hdc-bg-soft);
}

.hdc-btn-white {
  background-color: #FFFFFF;
  color: var(--hdc-dark);
}
.hdc-btn-white:hover {
  background-color: var(--hdc-bg-soft);
  transform: translateY(-2px);
  box-shadow: var(--hdc-shadow-md);
}

.hdc-btn-outline-white {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}
.hdc-btn-outline-white:hover {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
}

.hdc-btn-sm {
  padding: 8px 16px;
  font-size: var(--hdc-text-caption);
}

.hdc-btn-lg {
  padding: 16px 32px;
  font-size: var(--hdc-text-body);
}

/* Badges & Pills */
.hdc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background-color: rgba(243, 112, 33, 0.12);
  color: var(--hdc-accent-text);
  border: 1px solid rgba(243, 112, 33, 0.25);
  border-radius: var(--hdc-radius-full);
  font-size: var(--hdc-text-caption);
  font-weight: var(--hdc-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hdc-pill-dark {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--hdc-accent-light);
  border-color: rgba(255, 255, 255, 0.2);
}

.hdc-pill-green {
  background-color: rgba(34, 197, 94, 0.12);
  color: #15803D;
  border-color: rgba(34, 197, 94, 0.25);
}

/* Hero Section */
.hdc-hero {
  padding-top: calc(var(--hdc-header-h) + 60px);
  padding-bottom: var(--hdc-section);
  position: relative;
  overflow: hidden;
}

.hdc-hero-dark {
  background: radial-gradient(circle at 80% 20%, #115743 0%, var(--hdc-dark-deep) 70%);
  color: var(--hdc-on-dark);
}
.hdc-hero-dark :is(h1, h2, h3, h4) {
  color: var(--hdc-on-dark);
}
.hdc-hero-dark p {
  color: var(--hdc-on-dark-muted);
}

.hdc-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--hdc-space-8);
  align-items: center;
}

.hdc-hero-visual {
  display: flex;
  justify-content: center;
}

.hdc-ajax-lead-form {
  position: relative;
}

.hdc-hero-content h1 {
  font-size: var(--hdc-text-hero);
  margin-top: var(--hdc-space-4);
  margin-bottom: var(--hdc-space-5);
  line-height: var(--hdc-leading-tight);
}

.hdc-hero-content .hdc-lead {
  font-size: var(--hdc-text-lead);
  line-height: var(--hdc-leading-lead);
  margin-bottom: var(--hdc-space-7);
  max-width: 580px;
}

.hdc-hero-actions {
  display: flex;
  gap: var(--hdc-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--hdc-space-7);
}

.hdc-hero-trust-badges {
  display: flex;
  align-items: center;
  gap: var(--hdc-space-6);
  padding-top: var(--hdc-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hdc-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hdc-text-caption);
  color: var(--hdc-on-dark-muted);
}
.hdc-trust-item svg {
  color: var(--hdc-accent-light);
}

/* Trust Bar (Thống kê số liệu) */
.hdc-trust-bar {
  background: #FFFFFF;
  border-radius: var(--hdc-radius-lg);
  box-shadow: var(--hdc-shadow-lg);
  padding: var(--hdc-space-6) var(--hdc-space-8);
  margin-top: -50px;
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hdc-space-6);
  border: 1px solid var(--hdc-line);
}

.hdc-stat-box {
  text-align: center;
  border-right: 1px solid var(--hdc-line);
  padding: 0 var(--hdc-space-4);
}
.hdc-stat-box:last-child {
  border-right: none;
}
.hdc-stat-num {
  font-family: var(--hdc-font-display);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  font-weight: var(--hdc-weight-extrabold);
  color: var(--hdc-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.hdc-stat-num span {
  color: var(--hdc-accent);
}
.hdc-stat-label {
  font-size: var(--hdc-text-small);
  color: var(--hdc-muted);
  font-weight: var(--hdc-weight-medium);
}

/* Lưới Cards (Grids) */
.hdc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hdc-space-6);
}

.hdc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hdc-space-6);
}

.hdc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hdc-space-6);
}

/* Cards */
.hdc-card {
  background: #FFFFFF;
  border-radius: var(--hdc-radius);
  border: 1px solid var(--hdc-line);
  padding: var(--hdc-space-6);
  transition: all var(--hdc-dur) var(--hdc-ease);
  position: relative;
  display: flex;
  flex-direction: column;
}
.hdc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hdc-shadow-md);
  border-color: rgba(11, 70, 53, 0.2);
}

.hdc-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--hdc-radius-sm);
  background-color: var(--hdc-bg-tint);
  color: var(--hdc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--hdc-space-5);
}
.hdc-card-icon.accent {
  background-color: rgba(243, 112, 33, 0.1);
  color: var(--hdc-accent);
}

.hdc-card h3 {
  font-size: var(--hdc-text-h3);
  margin-bottom: var(--hdc-space-3);
}

.hdc-card p {
  color: var(--hdc-muted);
  font-size: var(--hdc-text-small);
  flex-grow: 1;
}

.hdc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-primary);
  margin-top: var(--hdc-space-4);
}
.hdc-card-link:hover {
  color: var(--hdc-accent);
}

/* Card Dark */
.hdc-card-dark {
  background-color: var(--hdc-dark-surface);
  border-color: var(--hdc-line-dark);
  color: var(--hdc-on-dark);
}
.hdc-card-dark:hover {
  border-color: var(--hdc-accent-light);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.hdc-card-dark :is(h1, h2, h3, h4) {
  color: var(--hdc-on-dark);
}
.hdc-card-dark p {
  color: var(--hdc-on-dark-muted);
}

/* Bảng so sánh (Comparison Table) */
.hdc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--hdc-radius);
  border: 1px solid var(--hdc-line);
  box-shadow: var(--hdc-shadow-sm);
  background: #FFFFFF;
}

.hdc-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--hdc-text-small);
}

.hdc-compare-table th,
.hdc-compare-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--hdc-line);
}

.hdc-compare-table th {
  background: var(--hdc-bg-soft);
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-bold);
  color: var(--hdc-ink);
}

.hdc-compare-table th.hdc-highlight,
.hdc-compare-table td.hdc-highlight {
  background: var(--hdc-bg-tint);
  border-left: 2px solid var(--hdc-primary);
  border-right: 2px solid var(--hdc-primary);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-primary);
}

.hdc-compare-table th.hdc-highlight {
  border-top: 3px solid var(--hdc-accent);
}

/* Quy trình 5 bước (Process Steps) */
.hdc-process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--hdc-space-4);
  position: relative;
}

.hdc-step-item {
  background: #FFFFFF;
  border-radius: var(--hdc-radius);
  border: 1px solid var(--hdc-line);
  padding: var(--hdc-space-5);
  position: relative;
}
.hdc-step-num {
  width: 36px;
  height: 36px;
  border-radius: var(--hdc-radius-full);
  background: var(--hdc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--hdc-weight-bold);
  font-size: var(--hdc-text-small);
  margin-bottom: var(--hdc-space-3);
}
.hdc-step-item h4 {
  font-size: var(--hdc-text-h4);
  margin-bottom: var(--hdc-space-2);
}
.hdc-step-item p {
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
}

/* Công cụ tính phí & Chẩn đoán rủi ro (Interactive Components) */
.hdc-tool-card {
  background: #FFFFFF;
  border-radius: var(--hdc-radius-lg);
  border: 1px solid var(--hdc-line);
  box-shadow: var(--hdc-shadow-lg);
  padding: var(--hdc-space-8);
}

.hdc-range-group {
  margin-bottom: var(--hdc-space-6);
}

.hdc-range-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-ink);
  margin-bottom: var(--hdc-space-2);
}

.hdc-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--hdc-line);
  outline: none;
  -webkit-appearance: none;
}
.hdc-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hdc-accent);
  cursor: pointer;
  box-shadow: var(--hdc-shadow-orange);
}

.hdc-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--hdc-space-3);
}

.hdc-radio-btn {
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-sm);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  font-weight: var(--hdc-weight-medium);
  font-size: var(--hdc-text-small);
  transition: all var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-radio-btn:hover {
  border-color: var(--hdc-primary);
  background: var(--hdc-bg-soft);
}
.hdc-radio-btn.active {
  background: var(--hdc-primary);
  color: #fff;
  border-color: var(--hdc-primary);
}

.hdc-calc-result-box {
  background: var(--hdc-bg-tint);
  border: 2px dashed var(--hdc-primary-light);
  border-radius: var(--hdc-radius);
  padding: var(--hdc-space-6);
  text-align: center;
  margin-top: var(--hdc-space-6);
}
.hdc-price-display {
  font-family: var(--hdc-font-display);
  font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem);
  font-weight: var(--hdc-weight-extrabold);
  color: var(--hdc-primary);
}

/* Hộp Miễn trừ trách nhiệm (Disclaimer Box Bắt buộc) */
.hdc-disclaimer {
  background: #FFFBEB;
  border-left: 4px solid var(--hdc-warning);
  padding: var(--hdc-space-4) var(--hdc-space-5);
  border-radius: 0 var(--hdc-radius-sm) var(--hdc-radius-sm) 0;
  font-size: var(--hdc-text-caption);
  color: #92400E;
  margin-top: var(--hdc-space-4);
  line-height: 1.5;
}

/* CTA Box lớn */
.hdc-cta-banner {
  background: linear-gradient(135deg, var(--hdc-dark) 0%, var(--hdc-dark-deep) 100%);
  color: var(--hdc-on-dark);
  border-radius: var(--hdc-radius-lg);
  padding: var(--hdc-space-8) var(--hdc-space-9);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hdc-cta-banner :is(h1, h2, h3) {
  color: var(--hdc-on-dark);
}
.hdc-cta-banner p {
  color: var(--hdc-on-dark-muted);
  max-width: 600px;
  margin: var(--hdc-space-3) auto var(--hdc-space-6);
}


/* ============================================================
   4. TEMPLATES (BÀI VIẾT, CHUYÊN MỤC, GUTENBERG)
   ============================================================ */

.hdc-article-header {
  padding-top: calc(var(--hdc-header-h) + 40px);
  padding-bottom: var(--hdc-space-6);
  background: var(--hdc-bg-soft);
  border-bottom: 1px solid var(--hdc-line);
}

.hdc-breadcrumbs {
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
  margin-bottom: var(--hdc-space-3);
}
.hdc-breadcrumbs a {
  color: var(--hdc-muted);
}
.hdc-breadcrumbs a:hover {
  color: var(--hdc-accent);
}

.hdc-article-content {
  padding-top: var(--hdc-space-8);
  padding-bottom: var(--hdc-section);
  font-size: var(--hdc-text-body);
  line-height: var(--hdc-leading-body);
}

.hdc-article-content h2 {
  margin-top: var(--hdc-space-8);
  margin-bottom: var(--hdc-space-4);
}
.hdc-article-content h3 {
  margin-top: var(--hdc-space-6);
  margin-bottom: var(--hdc-space-3);
}

.hdc-article-content ul,
.hdc-article-content ol {
  margin-bottom: var(--hdc-space-5);
  padding-left: var(--hdc-space-6);
}
.hdc-article-content ul { list-style: disc; }
.hdc-article-content ol { list-style: decimal; }
.hdc-article-content li { margin-bottom: var(--hdc-space-2); }

.hdc-article-content blockquote {
  border-left: 4px solid var(--hdc-primary);
  padding-left: var(--hdc-space-5);
  margin: var(--hdc-space-6) 0;
  font-style: italic;
  color: var(--hdc-body);
  background: var(--hdc-bg-soft);
  padding-top: var(--hdc-space-3);
  padding-bottom: var(--hdc-space-3);
  border-radius: 0 var(--hdc-radius-sm) var(--hdc-radius-sm) 0;
}


/* ============================================================
   5. RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
  .hdc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hdc-trust-bar { grid-template-columns: repeat(2, 1fr); }
  .hdc-stat-box:nth-child(2) { border-right: none; }
  .hdc-process-steps { grid-template-columns: repeat(2, 1fr); }
  .hdc-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 781px) {
  .hdc-nav-menu {
    position: fixed;
    top: var(--hdc-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    flex-direction: column;
    padding: var(--hdc-space-6);
    overflow-y: auto;
    display: none;
  }
  .hdc-nav-menu.is-active {
    display: flex;
  }
  .hdc-nav-link {
    font-size: 1.125rem;
    color: var(--hdc-ink) !important;
  }
  .hdc-menu-toggle {
    display: block;
  }
  .hdc-hero-grid {
    grid-template-columns: 1fr;
  }
  .hdc-grid-3, .hdc-grid-2 {
    grid-template-columns: 1fr;
  }
  .hdc-trust-bar {
    grid-template-columns: 1fr;
  }
  .hdc-stat-box {
    border-right: none;
    border-bottom: 1px solid var(--hdc-line);
    padding-bottom: var(--hdc-space-4);
  }
  .hdc-stat-box:last-child {
    border-bottom: none;
  }
  .hdc-process-steps {
    grid-template-columns: 1fr;
  }
  .hdc-footer-grid {
    grid-template-columns: 1fr;
  }
}