/* ============================================================
   HDCTax - Style Giai đoạn 2
   1. Mega menu
   2. Kiến thức thuế (chuyên mục, card bài viết, bài viết)
   3. Tra cứu văn bản
   4. Khối dùng cho trang chủ & trang dịch vụ dài
   5. Nút liên hệ nổi
   6. Responsive
   ============================================================ */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header trên trang có đầu trang sáng (bài viết, tra cứu, trang thường):
   nền trắng, chữ menu màu mực. Trang có hero tối vẫn dùng nền xanh trong
   theo quy tắc body:has(.hdc-hero-dark) trong style.css. */
.hdc-header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--hdc-line);
}
.hdc-nav-link {
  color: var(--hdc-ink);
}
.hdc-nav-link:hover {
  color: var(--hdc-accent);
}

/* ============================================================
   1. MEGA MENU
   ============================================================ */

/* Mục menu cao bằng header để di chuột từ chữ xuống bảng không bị hở */
.hdc-header-inner,
.hdc-nav-menu {
  height: 100%;
}
.hdc-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}
/* Bảng mega neo theo header (không theo từng mục) để canh giữa trang */
.hdc-nav-item.has-mega {
  position: static;
}
.hdc-mega {
  left: 50%;
  top: 100%;
  width: min(880px, calc(100vw - 2 * var(--hdc-gutter)));
  transform: translate(-50%, 10px);
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: var(--hdc-space-5);
  padding: var(--hdc-space-5);
}
.hdc-mega.hdc-mega-3 {
  width: min(1000px, calc(100vw - 2 * var(--hdc-gutter)));
  grid-template-columns: 230px 1fr 250px;
}
.hdc-nav-item:hover .hdc-mega,
.hdc-nav-item:focus-within .hdc-mega {
  transform: translate(-50%, 0);
}
.hdc-mega-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--hdc-space-3);
  align-content: start;
}
.hdc-mega-title {
  display: block;
  font-size: var(--hdc-text-eyebrow);
  font-weight: var(--hdc-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hdc-muted);
  padding: 0 14px 8px;
}
.hdc-mega-posts .hdc-mega-title {
  padding-left: 0;
}
.hdc-mega-post {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  color: var(--hdc-ink);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-semibold);
  line-height: 1.4;
}
.hdc-mega-post:hover {
  color: var(--hdc-accent-text);
}
.hdc-mega-post img,
.hdc-mega-post .hdc-post-thumb-empty {
  width: 84px;
  height: 60px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--hdc-radius-sm);
}
.hdc-mega-post small {
  display: block;
  margin-top: 2px;
  font-weight: var(--hdc-weight-normal);
  color: var(--hdc-muted);
}
.hdc-mega-more {
  display: inline-block;
  margin-top: var(--hdc-space-3);
  font-size: var(--hdc-text-caption);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-primary);
}
/* Card ảnh bên phải mega menu: ảnh nền, phủ gradient từ dưới lên,
   nội dung dồn xuống đáy. Bấm vào tiêu đề (hoặc bất kỳ đâu trên card) để mở link.
   Ảnh riêng của từng card đặt qua biến --hdc-mega-img ở hai class bên dưới. */
.hdc-mega-aside {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: var(--hdc-radius);
  padding: var(--hdc-space-5);
  color: var(--hdc-on-dark);
  background:
    linear-gradient(0deg, rgba(5, 40, 30, 0.96) 0%, rgba(5, 40, 30, 0.82) 34%, rgba(5, 40, 30, 0.15) 68%, rgba(5, 40, 30, 0) 100%),
    var(--hdc-mega-img) center top / cover no-repeat,
    var(--hdc-dark-deep);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
}
.hdc-mega-aside-dich-vu {
  --hdc-mega-img: url('../img/mega-dich-vu.jpg');
}
.hdc-mega-aside-faq {
  --hdc-mega-img: url('../img/mega-faq.jpg');
}
.hdc-mega-aside-title {
  font-family: var(--hdc-font-display);
  font-size: 1.0625rem;
  font-weight: var(--hdc-weight-bold);
  line-height: 1.35;
  color: #FFFFFF;
}
/* Vùng bấm của tiêu đề phủ cả card */
.hdc-mega-aside-title::after {
  content: '';
  position: absolute;
  inset: 0;
}
.hdc-mega-aside-title:hover {
  color: var(--hdc-accent-light);
}
.hdc-mega-aside p {
  font-size: var(--hdc-text-caption);
  line-height: 1.55;
  color: rgba(248, 250, 252, 0.82);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.hdc-mega-aside .hdc-mega-more {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  color: var(--hdc-accent-light);
}

/* ============================================================
   2. KIẾN THỨC THUẾ
   ============================================================ */

/* Đầu trang chuyên mục. Khi có file assets/img/kb-hero.jpg, PHP tự gắn
   class has-img và biến --hdc-hero-img (xem hdctax_hero_attrs). */
.hdc-kb-hero {
  padding-top: calc(var(--hdc-header-h) + 48px);
  padding-bottom: var(--hdc-space-8);
  background:
    radial-gradient(circle at 85% 0%, rgba(243, 112, 33, 0.18) 0%, rgba(243, 112, 33, 0) 45%),
    linear-gradient(120deg, var(--hdc-dark-deep) 0%, var(--hdc-dark) 100%);
}
.hdc-kb-hero.has-img {
  background:
    linear-gradient(90deg, rgba(5, 40, 30, 0.94) 0%, rgba(5, 40, 30, 0.78) 50%, rgba(5, 40, 30, 0.45) 100%),
    var(--hdc-hero-img) center / cover no-repeat,
    var(--hdc-dark-deep);
}
.hdc-kb-hero h1 {
  margin: var(--hdc-space-3) 0;
  max-width: 800px;
}
.hdc-kb-hero .hdc-lead {
  max-width: 680px;
  font-size: var(--hdc-text-body);
  margin-bottom: var(--hdc-space-5);
}
.hdc-kb-hero .hdc-breadcrumbs,
.hdc-kb-hero .hdc-breadcrumbs a {
  color: var(--hdc-on-dark-muted);
}
.hdc-kb-search,
.hdc-docs-search {
  display: flex;
  gap: var(--hdc-space-2);
  max-width: 620px;
}
.hdc-kb-search input[type="search"],
.hdc-docs-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-sm);
  font: inherit;
  font-size: var(--hdc-text-small);
  color: var(--hdc-ink);
  background: #FFFFFF;
}
.hdc-kb-search input:focus-visible,
.hdc-docs-search input:focus-visible {
  outline: 2px solid var(--hdc-accent);
  outline-offset: 2px;
}

/* Hàng chip lọc chuyên mục / loại văn bản */
.hdc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hdc-space-2);
  margin-bottom: var(--hdc-space-6);
}
.hdc-chip {
  padding: 8px 16px;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-full);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-medium);
  color: var(--hdc-body);
  background: #FFFFFF;
  transition: border-color var(--hdc-dur-fast) var(--hdc-ease), color var(--hdc-dur-fast) var(--hdc-ease), background var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-chip:hover {
  border-color: var(--hdc-primary);
  color: var(--hdc-primary);
}
.hdc-chip.is-active {
  background: var(--hdc-primary);
  border-color: var(--hdc-primary);
  color: #FFFFFF;
}

.hdc-kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--hdc-space-7);
  align-items: start;
}
.hdc-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hdc-space-6);
}

/* Card bài viết */
.hdc-post-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  overflow: hidden;
  transition: transform var(--hdc-dur) var(--hdc-ease), box-shadow var(--hdc-dur) var(--hdc-ease);
}
.hdc-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hdc-shadow-md);
}
/* Khung 4:3, neo mép trên: ảnh fanpage vuông giữ được tiêu đề ở trên,
   phần bị cắt là thanh hotline ở đáy ảnh. */
.hdc-post-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hdc-bg-tint);
}
.hdc-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--hdc-dur-slow) var(--hdc-ease);
}
.hdc-post-card:hover .hdc-post-thumb img {
  transform: scale(1.04);
}
/* Bài chưa có ảnh đại diện: khối màu thương hiệu thay cho ảnh */
.hdc-post-thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 80% 20%, rgba(243, 112, 33, 0.35) 0%, rgba(243, 112, 33, 0) 40%),
    linear-gradient(135deg, var(--hdc-dark) 0%, var(--hdc-dark-surface) 100%);
}
.hdc-post-body {
  padding: var(--hdc-space-4) var(--hdc-space-5) var(--hdc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hdc-space-2);
  flex: 1;
}
.hdc-post-cat {
  align-self: flex-start;
  font-size: var(--hdc-text-eyebrow);
  font-weight: var(--hdc-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hdc-accent-text);
}
.hdc-post-body h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
}
.hdc-post-body h3 a {
  color: var(--hdc-ink);
}
.hdc-post-body h3 a:hover {
  color: var(--hdc-primary);
}
.hdc-post-meta {
  margin-top: auto;
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
}

/* Sidebar */
.hdc-kb-sidebar {
  display: grid;
  gap: var(--hdc-space-5);
  position: sticky;
  top: calc(var(--hdc-header-h) + 20px);
}
.hdc-side-box {
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  padding: var(--hdc-space-5);
  background: #FFFFFF;
}
.hdc-side-box h3 {
  font-size: var(--hdc-text-h4);
  margin-bottom: var(--hdc-space-3);
}
.hdc-side-box li {
  display: flex;
  justify-content: space-between;
  gap: var(--hdc-space-3);
  padding: 9px 0;
  border-top: 1px solid var(--hdc-line);
  font-size: var(--hdc-text-small);
}
.hdc-side-box li a {
  color: var(--hdc-body);
}
.hdc-side-box li a:hover {
  color: var(--hdc-accent-text);
}
.hdc-side-box li span {
  color: var(--hdc-muted);
  font-variant-numeric: tabular-nums;
}
/* Banner dọc. Ảnh T2 (400×800) bổ sung sau. */
.hdc-side-banner {
  border-radius: var(--hdc-radius);
  padding: var(--hdc-space-6) var(--hdc-space-5);
  color: var(--hdc-on-dark);
  background:
    radial-gradient(circle at 100% 0%, rgba(243, 112, 33, 0.45) 0%, rgba(243, 112, 33, 0) 50%),
    linear-gradient(170deg, var(--hdc-dark) 0%, var(--hdc-dark-deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hdc-space-3);
}
.hdc-side-banner h3 {
  color: #FFFFFF;
  font-size: var(--hdc-text-h3);
}
.hdc-side-banner p {
  font-size: var(--hdc-text-small);
  color: var(--hdc-on-dark-muted);
  margin: 0;
}
.hdc-side-banner strong {
  color: var(--hdc-accent-light);
  font-size: 1.25rem;
}
.hdc-side-banner-phone {
  display: block;
  width: 100%;
  font-size: var(--hdc-text-caption);
  color: var(--hdc-on-dark-muted);
}
.hdc-side-banner-phone:hover {
  color: var(--hdc-accent-light);
}

/* Phân trang dạng số */
.hdc-pagination {
  margin-top: var(--hdc-space-7);
}
.hdc-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.hdc-pagination a,
.hdc-pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-sm);
  font-size: var(--hdc-text-small);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-body);
}
.hdc-pagination a:hover {
  border-color: var(--hdc-primary);
  color: var(--hdc-primary);
}
.hdc-pagination .current {
  background: var(--hdc-primary);
  border-color: var(--hdc-primary);
  color: #FFFFFF;
}

.hdc-empty {
  border: 1px dashed var(--hdc-line);
  border-radius: var(--hdc-radius);
  padding: var(--hdc-space-8) var(--hdc-space-6);
  text-align: center;
  background: var(--hdc-bg-soft);
}
.hdc-empty h2 {
  font-size: var(--hdc-text-h3);
  margin-bottom: var(--hdc-space-2);
}
.hdc-empty p {
  color: var(--hdc-muted);
  max-width: 480px;
  margin: 0 auto var(--hdc-space-5);
  font-size: var(--hdc-text-small);
}
.hdc-empty-inline {
  color: var(--hdc-muted);
  font-size: var(--hdc-text-small);
}

/* Trang bài viết: khung rộng bằng khung nội dung chung của site (1140px) */
.hdc-single-post .hdc-container-text {
  max-width: var(--hdc-width-content);
}
/* Ảnh đại diện trong bài: không phóng to quá cỡ ảnh gốc, canh giữa */
.hdc-article-content .wp-block-post-featured-image {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hdc-article-content .wp-block-post-featured-image img {
  width: 100%;
  border-radius: var(--hdc-radius);
}
.hdc-article-content mark {
  background: #FEF3C7;
  color: #92400E;
  padding: 1px 4px;
  border-radius: 3px;
}
.hdc-article-header h1 {
  font-size: var(--hdc-text-h2);
  line-height: 1.3;
}
.hdc-article-header .hdc-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: var(--hdc-space-3);
}
.hdc-article-header .hdc-post-meta span + span::before {
  content: '·';
  margin-right: 18px;
}
.hdc-article-content :is(h2, h3) {
  scroll-margin-top: calc(var(--hdc-header-h) + 16px);
}
.hdc-article-content p {
  margin-bottom: var(--hdc-space-5);
}
.hdc-toc {
  border: 1px solid var(--hdc-line);
  border-left: 3px solid var(--hdc-primary);
  border-radius: var(--hdc-radius-sm);
  background: var(--hdc-bg-soft);
  padding: var(--hdc-space-4) var(--hdc-space-5);
  margin-bottom: var(--hdc-space-7);
}
.hdc-toc summary {
  cursor: pointer;
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-bold);
  color: var(--hdc-ink);
}
.hdc-article-content .hdc-toc ol {
  margin: var(--hdc-space-3) 0 0;
  padding-left: var(--hdc-space-5);
}
.hdc-toc li {
  font-size: var(--hdc-text-small);
  margin-bottom: 6px;
}
.hdc-toc li.lv3 {
  list-style: none;
  padding-left: var(--hdc-space-4);
  font-size: var(--hdc-text-caption);
}
.hdc-toc a {
  color: var(--hdc-body);
}
.hdc-toc a:hover {
  color: var(--hdc-accent-text);
}
.hdc-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hdc-space-5);
  flex-wrap: wrap;
  margin: var(--hdc-space-7) 0;
  padding: var(--hdc-space-5) var(--hdc-space-6);
  border-radius: var(--hdc-radius);
  background: linear-gradient(120deg, var(--hdc-dark) 0%, var(--hdc-dark-deep) 100%);
  color: var(--hdc-on-dark);
}
.hdc-inline-cta strong {
  display: block;
  font-family: var(--hdc-font-display);
  font-size: 1.125rem;
  color: #FFFFFF;
}
.hdc-inline-cta span {
  font-size: var(--hdc-text-small);
  color: var(--hdc-on-dark-muted);
}
.hdc-inline-cta .hdc-btn {
  color: #FFFFFF;
}
.hdc-author-box {
  display: flex;
  gap: var(--hdc-space-4);
  align-items: flex-start;
  padding: var(--hdc-space-5);
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  margin-top: var(--hdc-space-6);
}
.hdc-author-box img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--hdc-radius-full);
  background: var(--hdc-bg-tint);
  padding: 8px;
  flex-shrink: 0;
}
.hdc-author-box strong {
  font-family: var(--hdc-font-display);
  color: var(--hdc-ink);
}
.hdc-author-box p {
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
  line-height: 1.6;
  margin: 4px 0 0;
}

/* ============================================================
   3. TRA CỨU VĂN BẢN
   ============================================================ */

/* Khi có file assets/img/docs-hero.jpg thì ảnh tự hiện dưới lớp phủ sáng */
.hdc-docs-hero {
  padding-top: calc(var(--hdc-header-h) + 48px);
  padding-bottom: var(--hdc-space-8);
  background:
    radial-gradient(circle at 90% 10%, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0) 45%),
    var(--hdc-bg-tint);
  border-bottom: 1px solid var(--hdc-line);
}
.hdc-docs-hero.has-img {
  background:
    linear-gradient(90deg, rgba(240, 253, 244, 0.96) 0%, rgba(240, 253, 244, 0.88) 55%, rgba(240, 253, 244, 0.6) 100%),
    var(--hdc-hero-img) center / cover no-repeat,
    var(--hdc-bg-tint);
}
.hdc-docs-hero h1 {
  margin: var(--hdc-space-3) 0;
  max-width: 760px;
}
.hdc-docs-hero h1 em {
  font-style: normal;
  color: var(--hdc-accent-text);
}
.hdc-docs-hero .hdc-lead {
  max-width: 660px;
  color: var(--hdc-body);
  margin-bottom: var(--hdc-space-5);
}
.hdc-docs-search {
  max-width: 720px;
}
.hdc-docs-search input[type="search"] {
  height: 54px;
  box-shadow: var(--hdc-shadow);
}
.hdc-docs-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: var(--hdc-space-3);
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
}
.hdc-docs-hints a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hdc-docs-count {
  font-size: var(--hdc-text-small);
  color: var(--hdc-muted);
  margin-bottom: var(--hdc-space-3);
}
.hdc-doc-list {
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  background: #FFFFFF;
  overflow: hidden;
}
.hdc-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hdc-space-5);
  padding: var(--hdc-space-5);
  border-top: 1px solid var(--hdc-line);
}
.hdc-doc-row:first-child {
  border-top: none;
}
.hdc-doc-row:hover {
  background: var(--hdc-bg-soft);
}
.hdc-doc-main h3 {
  font-size: 1.0625rem;
  line-height: 1.45;
  margin: 4px 0 8px;
}
.hdc-doc-main h3 a {
  color: var(--hdc-ink);
}
.hdc-doc-main h3 a:hover {
  color: var(--hdc-primary);
}
.hdc-doc-main dl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: var(--hdc-text-caption);
}
.hdc-doc-main dl div,
.hdc-doc-info div {
  display: flex;
  gap: 6px;
  align-items: center;
}
.hdc-doc-main dt,
.hdc-doc-info dt {
  color: var(--hdc-muted);
}
.hdc-doc-main dd,
.hdc-doc-info dd {
  color: var(--hdc-ink);
  font-weight: var(--hdc-weight-medium);
}
.hdc-doc-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--hdc-radius-full);
  font-size: var(--hdc-text-eyebrow);
  font-weight: var(--hdc-weight-semibold);
  background: var(--hdc-bg-soft);
  color: var(--hdc-muted);
  border: 1px solid var(--hdc-line);
}
.hdc-doc-status.is-con-hieu-luc {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #15803D;
}
.hdc-doc-status.is-chua-hieu-luc,
.hdc-doc-status.is-het-mot-phan {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.hdc-doc-status.is-het-hieu-luc {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.hdc-doc-actions {
  display: flex;
  flex-direction: column;
  gap: var(--hdc-space-2);
  flex-shrink: 0;
}
.hdc-doc-actions.is-inline {
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: var(--hdc-space-6);
}
.hdc-doc-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hdc-space-3) var(--hdc-space-6);
  margin: var(--hdc-space-6) 0;
  padding: var(--hdc-space-5);
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  background: var(--hdc-bg-soft);
  font-size: var(--hdc-text-small);
}

/* ============================================================
   4. KHỐI DÙNG CHO TRANG CHỦ & TRANG DỊCH VỤ DÀI
   ============================================================ */

/* Card dịch vụ có ảnh: <img> nằm trong .hdc-svc-media; card nào chưa có ảnh
   thì khối màu + icon hiện thay. */
.hdc-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hdc-space-6);
}
.hdc-svc-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  overflow: hidden;
  transition: transform var(--hdc-dur) var(--hdc-ease), box-shadow var(--hdc-dur) var(--hdc-ease);
}
.hdc-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hdc-shadow-md);
}
.hdc-svc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(circle at 85% 15%, rgba(243, 112, 33, 0.4) 0%, rgba(243, 112, 33, 0) 45%),
    linear-gradient(135deg, var(--hdc-dark) 0%, var(--hdc-dark-surface) 100%);
}
/* Neo mép dưới: ảnh có logo HDCTax ở góc dưới trái, cắt phần trời phía trên */
.hdc-svc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Nhãn giá ở góc trên trái để không đè lên logo trong ảnh */
.hdc-svc-price {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 12px;
  padding: 4px 12px;
  border-radius: var(--hdc-radius-full);
  background: var(--hdc-accent);
  color: #FFFFFF;
  font-size: var(--hdc-text-caption);
  font-weight: var(--hdc-weight-bold);
}
.hdc-svc-body {
  padding: var(--hdc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hdc-space-3);
  flex: 1;
}
.hdc-svc-body h3 {
  font-size: var(--hdc-text-h4);
}
.hdc-tick-list {
  display: grid;
  gap: 6px;
}
.hdc-tick-list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--hdc-text-small);
  line-height: 1.55;
  color: var(--hdc-body);
}
.hdc-tick-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--hdc-primary-light);
  border-bottom: 2px solid var(--hdc-primary-light);
  transform: rotate(-45deg);
}
.hdc-svc-body .hdc-card-link {
  margin-top: auto;
  padding-top: var(--hdc-space-2);
}

/* FAQ đóng/mở */
.hdc-faq {
  display: grid;
  gap: var(--hdc-space-3);
  max-width: 860px;
  margin: 0 auto;
}
.hdc-faq details {
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  background: #FFFFFF;
  transition: border-color var(--hdc-dur-fast) var(--hdc-ease), box-shadow var(--hdc-dur-fast) var(--hdc-ease);
}
.hdc-faq details[open] {
  border-color: rgba(11, 70, 53, 0.35);
  box-shadow: var(--hdc-shadow);
}
.hdc-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hdc-space-4);
  padding: var(--hdc-space-4) var(--hdc-space-5);
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-ink);
}
.hdc-faq summary::-webkit-details-marker {
  display: none;
}
.hdc-faq summary::after {
  content: '+';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--hdc-radius-full);
  background: var(--hdc-bg-tint);
  color: var(--hdc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
}
.hdc-faq details[open] summary::after {
  content: '−';
  background: var(--hdc-primary);
  color: #FFFFFF;
}
.hdc-faq summary:focus-visible {
  outline: 2px solid var(--hdc-accent);
  outline-offset: 2px;
  border-radius: var(--hdc-radius);
}
.hdc-faq details > div {
  padding: 0 var(--hdc-space-5) var(--hdc-space-5);
  font-size: var(--hdc-text-small);
  color: var(--hdc-body);
}

/* Hero trang dịch vụ: phần nhấn mạnh trong tiêu đề */
.hdc-hero-photo h1 em {
  font-style: normal;
  color: var(--hdc-accent-light);
}
.hdc-hero-photo .hdc-lead + .hdc-lead {
  margin-top: calc(var(--hdc-space-3) * -1);
}
.hdc-offer {
  display: inline-block;
  margin-bottom: var(--hdc-space-6);
  padding: 8px 14px;
  border-left: 3px solid var(--hdc-accent);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0 var(--hdc-radius-sm) var(--hdc-radius-sm) 0;
  font-size: var(--hdc-text-small);
  color: var(--hdc-on-dark);
}

/* Bảng giá */
.hdc-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hdc-text-small);
  text-align: left;
}
.hdc-price-table th,
.hdc-price-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hdc-line);
}
.hdc-price-table thead th {
  background: var(--hdc-primary);
  color: #FFFFFF;
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-semibold);
}
.hdc-price-table tbody tr:last-child td {
  border-bottom: none;
}
.hdc-price-table td:first-child {
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-ink);
}
.hdc-price-table td.is-price {
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-bold);
  color: var(--hdc-accent-text);
  white-space: nowrap;
}
.hdc-table-note {
  margin-top: var(--hdc-space-3);
  font-size: var(--hdc-text-caption);
  color: var(--hdc-muted);
}

/* Khối 2 cột chữ + danh sách */
.hdc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hdc-space-8);
  align-items: start;
}
.hdc-num-list {
  counter-reset: hdc-num;
  display: grid;
  gap: var(--hdc-space-3);
}
.hdc-num-list li {
  counter-increment: hdc-num;
  position: relative;
  padding: var(--hdc-space-4) var(--hdc-space-4) var(--hdc-space-4) 56px;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius);
  background: #FFFFFF;
  font-size: var(--hdc-text-small);
  line-height: 1.55;
}
.hdc-num-list li::before {
  content: counter(hdc-num, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--hdc-font-display);
  font-weight: var(--hdc-weight-extrabold);
  color: var(--hdc-accent);
}
.hdc-num-list strong {
  display: block;
  color: var(--hdc-ink);
}
.hdc-card h3 + .hdc-tick-list {
  margin-top: var(--hdc-space-2);
}

/* Form tư vấn cuối trang dịch vụ */
.hdc-form-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-7);
}
.hdc-form-card form {
  display: grid;
  gap: var(--hdc-space-3);
}
.hdc-form-card :is(input, select, textarea) {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--hdc-line);
  border-radius: var(--hdc-radius-sm);
  font: inherit;
  font-size: var(--hdc-text-small);
  color: var(--hdc-ink);
  background: #FFFFFF;
}
.hdc-form-card :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--hdc-accent);
  outline-offset: 1px;
}
.hdc-form-card label {
  font-size: var(--hdc-text-caption);
  font-weight: var(--hdc-weight-semibold);
  color: var(--hdc-ink);
  display: grid;
  gap: 4px;
}

/* CTA ảnh nền + hộp kính. Ảnh đặt qua biến --hdc-cta-img trên thẻ section;
   người trong ảnh nên ở nửa trái vì hộp nội dung nằm bên phải. */
.hdc-cta-photo {
  background:
    linear-gradient(90deg, rgba(5, 40, 30, 0.1) 0%, rgba(5, 40, 30, 0.45) 100%),
    var(--hdc-cta-img, none) center 35% / cover no-repeat,
    var(--hdc-dark);
}
.hdc-cta-glass {
  max-width: 560px;
  margin-left: auto;
  padding: var(--hdc-space-7);
  background: rgba(5, 40, 30, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--hdc-radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
.hdc-cta-glass h2 {
  margin: var(--hdc-space-3) 0;
}
.hdc-cta-photo .hdc-cta-glass p {
  color: rgba(248, 250, 252, 0.85);
  margin-bottom: var(--hdc-space-6);
}

/* ============================================================
   5. NÚT LIÊN HỆ NỔI
   ============================================================ */

.hdc-float-contact {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 900;
  display: grid;
  gap: 10px;
}
.hdc-float-contact a {
  width: 50px;
  height: 50px;
  border-radius: var(--hdc-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform var(--hdc-dur) var(--hdc-ease);
}
.hdc-float-contact a:hover {
  transform: translateY(-3px) scale(1.05);
  color: #FFFFFF;
}
.hdc-float-zalo { background: #0068FF; }
.hdc-float-messenger { background: #0A7CFF; }
.hdc-float-phone { background: var(--hdc-accent); }
.hdc-float-icon {
  display: flex;
  font-family: var(--hdc-font-display);
  font-size: 13px;
  font-weight: var(--hdc-weight-extrabold);
}
.hdc-float-label {
  display: none;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .hdc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .hdc-kb-layout { grid-template-columns: 1fr; }
  .hdc-kb-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .hdc-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdc-split { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
  /* CTA ảnh nền: hộp kính rộng hết khung, phủ tối hơn để chữ dễ đọc */
  .hdc-cta-glass { max-width: none; padding: var(--hdc-space-5); background: rgba(5, 40, 30, 0.74); }
  .hdc-cta-glass .hdc-btn { width: 100%; }

  /* Menu mobile: bảng mega thành danh sách link thường */
  .hdc-header-inner { height: auto; }
  .hdc-nav-menu { height: auto; align-items: stretch; gap: var(--hdc-space-2); }
  .hdc-nav-item { height: auto; display: block; }
  .hdc-nav-item.has-mega { position: relative; }
  .hdc-mega,
  .hdc-mega.hdc-mega-3 {
    position: static;
    width: 100%;
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 0 0 var(--hdc-space-3) var(--hdc-space-3);
  }
  .hdc-nav-item:hover .hdc-mega,
  .hdc-nav-item:focus-within .hdc-mega { transform: none; }
  .hdc-mega-cols-2 { display: block; }
  .hdc-mega-aside,
  .hdc-mega-posts,
  .hdc-mega-title,
  .hdc-mega .hdc-dropdown-link span { display: none; }

  .hdc-post-grid,
  .hdc-svc-grid,
  .hdc-kb-sidebar { grid-template-columns: 1fr; }
  .hdc-kb-search,
  .hdc-docs-search { flex-direction: column; }
  .hdc-doc-row { flex-direction: column; align-items: flex-start; }
  .hdc-doc-actions { flex-direction: row; }
  .hdc-form-card { padding: var(--hdc-space-5); }

  /* Nút liên hệ nổi thành thanh cố định ở đáy màn hình */
  .hdc-float-contact {
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #FFFFFF;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  .hdc-float-contact a {
    width: auto;
    height: 54px;
    border-radius: 0;
    box-shadow: none;
    gap: 8px;
    font-size: var(--hdc-text-caption);
    font-weight: var(--hdc-weight-semibold);
  }
  .hdc-float-contact a:hover { transform: none; }
  .hdc-float-label { display: inline; }
  .hdc-footer { padding-bottom: calc(var(--hdc-space-8) + 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .hdc-post-card,
  .hdc-svc-card,
  .hdc-post-thumb img,
  .hdc-float-contact a { transition: none; }
}