/* ==========================================================================
   HanoiTax — CSS toàn cục của theme
   Nạp qua registerScript('header') trong ThemeProvider → đứng SAU global.css (5.2).
   Chỉ chứa: font tự host, màu phụ ngoài 14 màu của global, lớp tiện ích riêng theme.
   CSS của từng component nằm trong <style> inline của Livewire view (R18).
   ========================================================================== */

/* --- Font Proxima Nova (tải từ hanoitax.vn) --- */
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/ProximaNova-Thin.ttf") format("truetype");
    font-weight: 100 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/ProximaNova-Regular.ttf") format("truetype");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/ProximaNova-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Proxima Nova";
    src: url("../fonts/ProximaNova-Bold.ttf") format("truetype");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* Bản nét mảnh khai báo riêng ở font-weight normal để trình duyệt tự làm đậm (faux bold) khi cần —
   đúng cách hanoitax.vn hiển thị tiêu đề banner (proximanova-thin + font-weight 700) */
@font-face {
    font-family: "Proxima Nova Thin";
    src: url("../fonts/ProximaNova-Thin.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- Màu phụ riêng HanoiTax (ngoài 14 màu của global.css) ---
   --color-15  Nền thanh trên cùng (top bar)
   --color-16  Cam đậm — hover của nút cam
   --color-17  Chữ trắng mờ trên nền tối (footer, khối tối)
   --color-18  Đường kẻ mờ trên nền tối
   --color-19  Chữ gần đen (tên thẻ dịch vụ, tiêu đề phụ)
   --color-20  Nền ngăn kéo menu mobile
   --color-21  Chữ xám của ngăn kéo menu mobile, chú thích ảnh trong bài
   --color-22  Cam của link "CHI TIẾT"
   --color-23  Chữ ô nhập / nhãn form
   --color-24  Chữ địa chỉ / điện thoại / email trang Liên hệ
   --color-25  Chữ số trên ô tím ("Khi nào doanh nghiệp cần")
   --color-26  Nền footer
   --color-27  Nền vàng lớp phủ khi rê chuột vào thẻ khoá đào tạo
   --color-28  Nền nút "ĐĂNG KÝ" trên lớp phủ khoá đào tạo
   --color-29  Nền phủ khung xem ảnh lớn (lightbox ảnh bài viết)               */
:root {
    --color-15: #292B33;
    --color-16: #D9741A;
    --color-17: rgba(255, 255, 255, .72);
    --color-18: rgba(255, 255, 255, .12);
    --color-19: #161922; /* chữ gần đen của tên dịch vụ / tiêu đề phụ bản gốc */
    --color-20: #191919; /* nền ngăn kéo menu mobile */
    --color-21: #A6A6A6; /* chữ ngăn kéo menu mobile, chú thích ảnh trong bài */
    --color-22: #F68D0E; /* cam của link "CHI TIẾT" */
    --color-23: #626262; /* chữ ô nhập / nhãn form */
    --color-24: #818181; /* chữ địa chỉ, điện thoại, email trang Liên hệ */
    --color-25: #F88D2E; /* chữ số trên ô tím "Khi nào doanh nghiệp cần" */
    --color-26: #383838; /* nền footer bản gốc */
    --color-27: #FFDE73; /* nền lớp phủ khoá đào tạo (.desc của zoom_box bản gốc) */
    --color-28: #FED03D; /* nút "ĐĂNG KÝ" trên lớp phủ khoá đào tạo */
    --color-29: #0B0B0B; /* nền phủ lightbox ảnh bài viết (Magnific Popup của bản gốc, mờ 80%) */
    --ht-shadow-card: 0 1px 4px rgba(0, 0, 0, .12);
    --ht-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, .16);
}

/* --- Cỡ chữ riêng HanoiTax (ngoài thang --fs-* của global, đo từ hanoitax.vn) ---
   Component KHÔNG ghi số cỡ chữ (R23) — dùng var() của các biến dưới đây. Tên biến = cỡ px.
   Banner dùng cỡ theo bề ngang màn hình (đo ở 1366px). */
:root {
    --ht-fs-13: .8125rem;
    --ht-fs-15: .9375rem;
    --ht-fs-17: 1.0625rem;
    --ht-fs-18: 1.125rem;
    --ht-fs-19: 1.1875rem;
    --ht-fs-21: 1.3125rem;
    --ht-fs-22: 1.375rem;
    --ht-fs-26: 1.625rem;
    --ht-fs-28: 1.75rem;
    --ht-fs-29: 1.8125rem;
    --ht-fs-30: 1.875rem;
    --ht-fs-41: 2.5625rem;
    --ht-fs-48: 3rem;
    --ht-fs-50: 3.125rem;
    --ht-fs-banner-title: 4.583vw;    /* tiêu đề banner 62.6px ở 1366px */
    --ht-fs-banner-title-sm: 4.271vw; /* tiêu đề banner nhỏ (.ht-banner-sm) */
    --ht-fs-banner-subtitle: 2.5vw;   /* phụ đề 34.15px ở 1366px */
    --ht-fs-banner-more: 1.042vw;     /* nút "Tìm hiểu thêm" 14.2px ở 1366px */
}

.color-15 { color: var(--color-15) !important; }
.color-16 { color: var(--color-16) !important; }
.color-17 { color: var(--color-17) !important; }
.color-19 { color: var(--color-19) !important; }
.color-21 { color: var(--color-21) !important; }
.color-22 { color: var(--color-22) !important; }
.color-23 { color: var(--color-23) !important; }
.color-24 { color: var(--color-24) !important; }
.color-25 { color: var(--color-25) !important; }
.bg-color-15 { background-color: var(--color-15) !important; }
.bg-color-16 { background-color: var(--color-16) !important; }
.bg-color-26 { background-color: var(--color-26) !important; }
.bg-color-27 { background-color: var(--color-27) !important; }
.bg-color-28 { background-color: var(--color-28) !important; }
.border-color-17 { border-color: var(--color-17) !important; }
.border-color-18 { border-color: var(--color-18) !important; }

/* --- Nền & chữ mặc định của toàn site (HanoiTax: nền xám nhạt, chữ xám đậm) --- */
/* Font hiển thị thực tế của hanoitax.vn: file ProximaNova Regular/Bold nạp qua http trên trang https
   nên bị trình duyệt chặn → chữ rơi về Arial (đa số) hoặc Times (chỗ khai báo font không có dự phòng).
   Chỉ nét mảnh (Thin) nạp được. Theme sao chép đúng kết quả hiển thị đó. */
:root {
    --fs-3: 1.5625rem; /* tiêu đề section 25px như bản gốc */
}
body {
    background-color: var(--color-5);
    color: var(--color-9);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5625;
    /* Bản gốc (theme BeTheme) đặt antialiased cho body → chữ trên macOS nét mảnh hơn mặc định,
       thấy rõ nhất ở chữ trắng trên nền tím/tối (mega menu, footer) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}
/* Bootstrap đặt .fs-3 = 1.75rem !important ở màn ≥1200px → ép về token của theme */
.fs-3 { font-size: var(--fs-3) !important; }
/* Tiêu đề section cỡ lớn 30px (trang Giới thiệu, Tuyển dụng, danh sách tin) — gắn vào class của khối */
.ht-title-lg .ht-heading.fs-3 { font-size: var(--ht-fs-30) !important; line-height: 1.17; }
/* Tiêu đề trang danh sách (Tin tức, Insight, Tuyển dụng): dòng 40px */
.ht-title-page .ht-heading.fs-3 { line-height: 40px; }
/* Banner chữ nhỏ hơn (trang Cung ứng nhân sự bản gốc: 58.3px ở 1366px) */
.ht-banner-sm .banner-slider__title { font-size: var(--ht-fs-banner-title-sm) !important; }
/* Cột phải trang chi tiết bài viết: tiêu đề khối 17px màu đen (trang danh sách giữ 16px) */
body:has(.post-detail) :is(.category-menu__heading, .post-list-compact__heading) {
    font-size: var(--ht-fs-17) !important;
    color: var(--color-11) !important;
    line-height: 23px !important;
}
/* Tiêu đề trang cỡ rất lớn 48px (trang Liên hệ) */
.ht-title-xl .ht-heading.fs-3 { font-size: var(--ht-fs-48) !important; line-height: 1.04; text-transform: none; }
/* Nét mảnh (fw-1) luôn dùng Proxima Nova Thin như bản gốc */
.fw-1,
.ht-thin {
    font-family: "Proxima Nova Thin", Arial, Helvetica, sans-serif;
}

/* --- Lớp tiện ích riêng theme --- */

/* Bóng thẻ trắng kiểu HanoiTax */
.ht-shadow { box-shadow: var(--ht-shadow-card); }

/* Ảnh phóng nhẹ khi rê chuột (thẻ bài viết / dịch vụ) */
.ht-zoom { overflow: hidden; }
.ht-zoom img { transition: transform .8s ease; }
.ht-zoom:hover img { transform: scale(1.08); }

/* Liên kết "CHI TIẾT »" màu cam */
.ht-more { transition: color .2s ease; }
.ht-more:hover { color: var(--color-16) !important; }

/* Nút cam bo nhẹ có bóng (HOTLINE, GỬI) */
.ht-btn {
    background-color: var(--color-2);
    color: var(--color-10);
    border: 0;
    box-shadow: 1px 1px 1px 1px var(--color-16);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.ht-btn:hover,
.ht-btn:focus {
    background-color: var(--color-2);
    color: var(--color-10);
    box-shadow: 3px 3px 3px 3px var(--color-16);
}

/* Cắt dòng chữ */
.ht-clamp-2, .ht-clamp-3, .ht-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ht-clamp-2 { -webkit-line-clamp: 2; }
.ht-clamp-3 { -webkit-line-clamp: 3; }
.ht-clamp-4 { -webkit-line-clamp: 4; }

/* Tiêu đề section viết hoa, nét mảnh như bản gốc */
.ht-heading {
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.16;
}

/* Chữ Times — các chỗ bản gốc khai báo font không có dự phòng nên hiển thị bằng font serif mặc định của trình duyệt
   (phụ đề banner, khẩu hiệu thanh trên cùng, tên thẻ dịch vụ, nhãn quy trình…): Times trên macOS, Times New Roman
   trên Windows — đặt Times trước để trùng cả hai */
.ht-serif { font-family: Times, "Times New Roman", serif; }

/* Khối tràn ngang (mega menu, chi tiết dịch vụ) dùng 100vw — chặn cuộn ngang do thanh cuộn dọc.
   overflow-x: clip không tạo khung cuộn mới nên không làm hỏng position: sticky. */
html, body { overflow-x: clip; }

/* Bề ngang nội dung như bản gốc: hàng WPBakery chia theo tỉ lệ bề ngang màn hình (từ 768px),
   không dừng ở 1140/1320px như Bootstrap. Dùng vw để .container lồng trong cột hẹp vẫn chỉ rộng bằng cột. */
@media (min-width: 768px) {
    /* Mặc định: chữ cách mép 9.37% màn hình (128px ở 1366px) — đa số trang của bản gốc */
    .container { max-width: calc(81.26vw + 1.5rem); }
    /* Trang danh mục dịch vụ / danh sách tin của bản gốc: cách mép 8% (109px ở 1366px) */
    .ht-c84 .container,
    body:has(.post-collection--style-4) .ht-layout-row.container { max-width: calc(84vw + 1.5rem); }
    /* Vài khối trang chủ (Dịch vụ thuế & kế toán, Ý kiến, Đối tác): chữ cách mép 9.17vw − 10.4px
       (60px ở 768 · 115px ở 1366 · 148px ở 1728); bản gốc không rộng quá khung 1900px nên 174px ở 1920 */
    .ht-c83 .container { max-width: calc(min(81.67vw, 1551.7px) + 20.8px + 1.5rem); }
}
/* "Dịch vụ liên quan" ở máy tính bảng 768–1024px: bản gốc lề 5% (.dv-chitiet-2) */
@media (min-width: 768px) and (max-width: 1024.98px) {
    .ht-c84.ht-related-plain .container { max-width: calc(90vw + 1.5rem); }
}
/* Trang danh mục dịch vụ / "Dịch vụ liên quan" trên điện thoại: bản gốc lề 5% (19.5px ở 390px) thay vì 23px */
@media (max-width: 767.98px) {
    .ht-c84 .container { padding-left: 5%; padding-right: 5%; }
}

/* --- Trang danh mục dịch vụ (Dịch vụ thủ tục thuế / kế toán / phần mềm / dịch vụ khác) ---
   Gắn class "ht-svc" vào cả 5 khối của trang. Khoảng cách chép template category_dich_vu của bản gốc:
   tiêu đề trang cách header 50px (h1 margin 20/25), "QUY TRÌNH…" cách đoạn giới thiệu 25px và cách mũi tên 25px,
   "CÁC DỊCH VỤ" cách các bước 30px và cách lưới thẻ 40px, "KHI NÀO…" cách lưới thẻ 60px (20 + 40) và cách ô số 25px. */
.rich-text.ht-svc { padding-top: 51px !important; padding-bottom: 0 !important; }
.rich-text.ht-svc .rich-text__title { margin-bottom: 25px !important; }
.rich-text.ht-svc :is(.rich-text__content, .rich-text__content p) { line-height: 25px; }
.step-list.ht-svc { padding-top: 25px !important; padding-bottom: 0 !important; }
.step-list.ht-svc .step-list__title { margin-bottom: 25px !important; }
.post-collection.ht-svc { padding-top: 30px !important; padding-bottom: 40px !important; }
.post-collection.ht-svc .post-collection__title { margin-bottom: 40px !important; }
.card-grid.ht-svc { padding-top: 0 !important; padding-bottom: 0 !important; }
.card-grid.ht-svc .card-grid__title { margin-bottom: 25px !important; }
/* Điện thoại: tiêu đề + đoạn giới thiệu căn đều (bản gốc .justify), cách header 50px */
@media (max-width: 767.98px) {
    .rich-text.ht-svc { padding-top: 50px !important; }
    .rich-text.ht-svc :is(.rich-text__title, .rich-text__content) { text-align: justify !important; }
}

/* Khoảng cách khối đo từ bản gốc — gắn vào ô "class" của khối trong CMS (chỉ từ 768px trở lên) */
@media (min-width: 768px) {
    .ht-pt-0 { padding-top: 0 !important; }
    .ht-pb-0 { padding-bottom: 0 !important; }
    .ht-pt-35 { padding-top: 35px !important; }
    .ht-pt-50 { padding-top: 50px !important; }
    .ht-pb-35 { padding-bottom: 35px !important; }
    .ht-pt-64 { padding-top: 64px !important; }
    .ht-pt-72 { padding-top: 72px !important; }
    .ht-pb-84 { padding-bottom: 84px !important; }
    /* Khoảng tiêu đề khối → nội dung (bản gốc trang chủ: Insights 15px, Dịch vụ thuế và kế toán 20px, Tin tức 25px) */
    .ht-hgap-15 .ht-heading { margin-bottom: 15px !important; }
    .ht-hgap-20 .ht-heading { margin-bottom: 20px !important; }
    .ht-hgap-25 .ht-heading { margin-bottom: 25px !important; }
}

/* Khối đặt trong cột của hàng bố cục (hàng đã là .container) không cộng thêm lề của .container lồng bên trong */
.ht-layout-row .container { max-width: none; padding-left: 0; padding-right: 0; }

/* Bố cục có cột phải (tin tức, chi tiết bài viết): đo từ hanoitax.vn ở 1366px —
   cột chính ~888px, cột phải ~224px nội dung, cột phải bắt đầu thấp hơn tiêu đề ~65px */
@media (min-width: 992px) {
    .ht-layout-row .ht-layout-main { flex: 0 0 77.9%; max-width: 77.9%; }
    .ht-layout-row .ht-layout-aside { flex: 0 0 22.1%; max-width: 22.1%; padding-top: 4.1rem; }
}
/* Trang danh sách tin (bản gốc): cột chính 77% · cột phải 23%; thẻ bài 265px cách nhau 17px, lùi vào 27px */
@media (min-width: 992px) {
    body:has(.post-collection--style-4) .ht-layout-row .ht-layout-main { flex: 0 0 77%; max-width: 77%; }
    body:has(.post-collection--style-4) .ht-layout-row .ht-layout-aside { flex: 0 0 23%; max-width: 23%; }
    .post-collection--style-4 .row { --bs-gutter-x: 17px; padding-left: 27px; padding-right: 27px; }
}

/* ==========================================================================
   Chữ trên máy tính bảng / điện thoại — đo từ hanoitax.vn (BeTheme responsive)
   ở iPad 768px và iPhone 390px. Dùng !important vì nhiều khối đặt line-height
   riêng trong <style> của component.
   ========================================================================== */
/* Máy tính bảng dọc 768–959px: chữ nội dung 14px / dòng 21px, tiêu đề section 21px */
@media (min-width: 768px) and (max-width: 959.98px) {
    .rich-text__content, .rich-text__content :is(p, li, span, strong, em),
    .post-detail__article, .post-detail__article :is(p, li, div, span, strong, em, h5),
    .card-grid__item-desc, .card-grid__tile, .card-grid__tile :not(.card-grid__num), .media-text__content, .media-text__content li,
    .content-link-split__content, .content-link-split__content p,
    .newsletter-form p, .site-footer__col-info :is(span, a),
    .breadcrumb-bar a, .breadcrumb-bar span,
    .post-list-compact__name {
        font-size: var(--fs-7) !important;
        line-height: 21px !important;
    }
    .post-collection__excerpt { font-size: var(--fs-7) !important; line-height: 19px !important; }
    .step-list__label { font-size: var(--fs-7) !important; line-height: 19px !important; }
    .content-link-split__link { font-size: var(--fs-7) !important; }
    .site-footer__link { font-size: var(--fs-7) !important; line-height: 21px !important; }
    .ht-heading.fs-3 { font-size: var(--ht-fs-21) !important; line-height: 25px !important; }
    .ht-title-lg .ht-heading.fs-3 { font-size: var(--ht-fs-26) !important; line-height: 29px !important; }
}
/* Điện thoại ≤ 767px: chữ giữ 16px nhưng dòng 19px, tiêu đề section 15px, tiêu đề lớn 18px */
@media (max-width: 767.98px) {
    /* lề nội dung 23px mỗi bên như bản gốc (BeTheme mobile) */
    .container { padding-left: 23px; padding-right: 23px; }
    .rich-text__content, .rich-text__content :is(p, li, span, strong, em),
    .post-detail__article, .post-detail__article :is(p, li, div, span, strong, em),
    .card-grid__item-desc, .card-grid__tile, .media-text__content, .media-text__content li,
    .content-link-split__content, .content-link-split__content p,
    .newsletter-form p, .site-footer__main :is(div, span, a),
    .testimonial-slider__author, .card-grid .ht-more, .step-list__label,
    .post-collection__excerpt {
        line-height: 19px !important;
    }
    .breadcrumb-bar a, .breadcrumb-bar span { line-height: 21px !important; }
    .post-detail__article h5, .post-detail__article h5 em { font-size: var(--ht-fs-13) !important; line-height: 19px !important; }
    .category-menu__link { font-size: var(--ht-fs-13) !important; line-height: 19px !important; }
    .ht-heading.fs-3 { font-size: var(--ht-fs-15) !important; line-height: 19px !important; }
    .ht-title-lg .ht-heading.fs-3 { font-size: var(--ht-fs-18) !important; line-height: 21px !important; }
    .ht-title-xl .ht-heading.fs-3 { font-size: var(--ht-fs-29) !important; line-height: 30px !important; }
}

/* Tiêu đề cấp trang (H1 của bản gốc: tên trang danh mục dịch vụ, Đào tạo, Cung ứng, Về chúng tôi, Tin tức…)
   giữ nguyên cỡ desktop trên iPad và điện thoại — gắn class "ht-title-keep" vào khối trong CMS */
@media (max-width: 959.98px) {
    .ht-title-keep .ht-heading.fs-3 { font-size: var(--fs-3) !important; line-height: 29px !important; }
    .ht-title-keep.ht-title-lg .ht-heading.fs-3 { font-size: var(--ht-fs-30) !important; line-height: 35px !important; }
    .ht-title-keep.ht-title-page .ht-heading.fs-3 { line-height: 40px !important; }
}
@media (min-width: 768px) and (max-width: 959.98px) {
    .ht-title-xl .ht-heading.fs-3 { font-size: var(--ht-fs-41) !important; line-height: 43px !important; }
}
/* "Các dịch vụ" ở trang danh mục dịch vụ: điện thoại 18px */
@media (max-width: 767.98px) {
    .ht-title-m18 .ht-heading.fs-3 { font-size: var(--ht-fs-18) !important; line-height: 21px !important; }
}

/* Bố cục có cột phải trên máy tính bảng (768–1239px): bản gốc lề 5% màn hình, cột chính 77% · cột phải 23%;
   lưới bài trang danh sách cách nhau / lùi vào 1.4vw */
@media (min-width: 768px) and (max-width: 1239.98px) {
    .ht-layout-row.container { max-width: calc(90vw + 1.5rem) !important; }
    .ht-layout-row .ht-layout-main { flex: 0 0 77% !important; max-width: 77% !important; }
    .ht-layout-row .ht-layout-aside { flex: 0 0 23% !important; max-width: 23% !important; }
    .post-collection--style-4 .row { --bs-gutter-x: 1.4vw; padding-left: 1.4vw; padding-right: 1.4vw; }
}