/* ==========================================================================
   H&S EASY - EXACT DESIGN IMPLEMENTATION (MOCKUP ACCURACY 100%)
   ========================================================================== */

   :root {
    --hs-red: #CD1E22;
    --hs-red-hover: #b51a1e;
    --hs-dark: #1b1b1b;
    --hs-text-dark: #222222;
    --hs-text-gray: #555555;
    --hs-border-gray: #e2e8f0;
    --hs-bg-light: #f8f9fa;
    --hs-footer-bg: #353535;
  }
  
  /* ── Typography & General ─────────────────────────────────────────────────── */
  body,
  h1, h2, h3, h4, h5, h6,
  input, textarea, select, button {
    font-family: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--hs-text-dark);
    overflow-x: hidden;
  }
  
  .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  .hs-section-header {
    margin-bottom: 32px;
  }
  
  /* Section Subtitle / Pre-title with Red Bar */
  .section-subtitle,
  .hs-section-pretitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #575757;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  .pretitle-line,
  .pretitle-bar,
  .section-subtitle .pretitle-line,
  .section-subtitle .pretitle-bar,
  .hs-section-pretitle .pretitle-line,
  .hs-section-pretitle .pretitle-bar {
    display: inline-block;
    width: 52px;
    height: 4px;
    background-color: #CD1E22;
    flex-shrink: 0;
  }
  
    .section-description,
    .hs-about-desc,
    p.section-description {
      font-size: 20px !important;
      font-weight: 400 !important;
      line-height: 1.5 !important;
      color: #111111 !important;
    }
  
  .hs-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
  }
  
  /* Button Text Link (16 600 black, icon arrow right-black) */
  .btn-text-link,
  .btn-link,
  .hs-view-all-link,
  .view-all-link {
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: #000000 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1.3;
    transition: all 0.25s ease;
    margin-bottom: 30px;
  }
  
  .btn-text-link .arrow,
  .btn-text-link .arrow-icon,
  .btn-text-link .btn-arrow,
  .btn-text-link svg,
  .btn-link .arrow,
  .btn-link .arrow-icon,
  .btn-link .btn-arrow,
  .btn-link svg,
  .hs-view-all-link .arrow,
  .hs-view-all-link .arrow-icon,
  .hs-view-all-link .btn-arrow,
  .hs-view-all-link svg,
  .view-all-link .arrow,
  .view-all-link .arrow-icon,
  .view-all-link .btn-arrow,
  .view-all-link svg {
    color: #000000;
    stroke: #000000;
    fill: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    width: 16px;
    height: 16px;
    object-fit: contain;
    transition: transform 0.25s ease, color 0.25s ease;
  }
  
  .btn-text-link:hover,
  .btn-link:hover,
  .hs-view-all-link:hover,
  .view-all-link:hover {
    color: #CD1E22 !important;
  }
  
  .btn-text-link:hover .arrow,
  .btn-text-link:hover .arrow-icon,
  .btn-text-link:hover .btn-arrow,
  .btn-text-link:hover svg,
  .btn-link:hover .arrow,
  .btn-link:hover .arrow-icon,
  .btn-link:hover .btn-arrow,
  .btn-link:hover svg,
  .hs-view-all-link:hover .arrow,
  .hs-view-all-link:hover .arrow-icon,
  .hs-view-all-link:hover .btn-arrow,
  .hs-view-all-link:hover svg,
  .view-all-link:hover .arrow,
  .view-all-link:hover .arrow-icon,
  .view-all-link:hover .btn-arrow,
  .view-all-link:hover svg {
    transform: translateX(4px);
    color: #CD1E22;
    stroke: #CD1E22;
  }
  
  .text-red {
    color: var(--hs-red) !important;
  }
  
  /* =============================================================================
     BUTTONS (Primary, Outline, Variants)
     ============================================================================= */
  .btn-primary,
  .hs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #CD1E22;
    border: 1px solid #CD1E22;
    color: #ffffff !important;
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    width: fit-content;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }
  
  .btn-primary:hover,
  .hs-btn-primary:hover {
    background-color: #b0171a;
    border-color: #b0171a;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(205, 30, 34, 0.3);
  }
  
  .btn-primary:active,
  .hs-btn-primary:active {
    transform: translateY(0);
  }
  
  /* Arrow Right Icon in Primary Button */
  .btn-primary .arrow,
  .btn-primary .arrow-icon,
  .btn-primary .btn-arrow,
  .btn-primary svg,
  .hs-btn-primary .arrow,
  .hs-btn-primary .arrow-icon,
  .hs-btn-primary .btn-arrow,
  .hs-btn-primary svg {
    color: #ffffff;
    stroke: #ffffff;
    fill: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    width: 16px;
    height: 16px;
    object-fit: contain;
    transition: transform 0.25s ease;
  }
  
  .btn-primary:hover .arrow,
  .btn-primary:hover .arrow-icon,
  .btn-primary:hover .btn-arrow,
  .btn-primary:hover svg,
  .hs-btn-primary:hover .arrow,
  .hs-btn-primary:hover .arrow-icon,
  .hs-btn-primary:hover .btn-arrow,
  .hs-btn-primary:hover svg {
    transform: translateX(4px);
  }
  
  /* Outline Button */
  .btn-outline,
  .hs-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: transparent !important;
    color: #000000 !important;
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    width: fit-content;
    box-sizing: border-box;
    border: 1px solid #CD1E22;
    transition: all 0.25s ease;
  }
  
  .btn-outline:hover,
  .hs-btn-outline:hover {
    background-color: #CD1E22 !important;
    color: #ffffff !important;
    border-color: #CD1E22;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(205, 30, 34, 0.25);
  }
  
  .btn-outline .arrow,
  .btn-outline .arrow-icon,
  .btn-outline svg,
  .hs-btn-outline .arrow,
  .hs-btn-outline .arrow-icon,
  .hs-btn-outline svg {
    color: inherit;
    stroke: currentColor;
    fill: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    width: 16px;
    height: 16px;
    object-fit: contain;
    transition: transform 0.25s ease;
  }
  
  .btn-outline:hover .arrow,
  .btn-outline:hover .arrow-icon,
  .btn-outline:hover svg,
  .hs-btn-outline:hover .arrow,
  .hs-btn-outline:hover .arrow-icon,
  .hs-btn-outline:hover svg {
    transform: translateX(4px);
    color: #ffffff;
  }
  
  /* Width Variants */
  .w-fit,
  .btn-primary.w-fit,
  .hs-btn-primary.w-fit,
  .btn-outline.w-fit,
  .hs-btn-outline.w-fit {
    width: fit-content !important;
  }
  
  .w-full,
  .btn-primary.w-full,
  .hs-btn-primary.w-full,
  .btn-outline.w-full,
  .hs-btn-outline.w-full {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  /* ── 1. HEADER (Exact 01_header.png) ─────────────────────────────────────── */
  .site-header {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
  }
  
  .header-brand-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
  }
  
  .header-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
  }
  
  .header-brand-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: none;
    padding-left: 0;
  }
  
  .header-brand-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.2px;
    line-height: 1.2;
  }
  
  .header-brand-sub {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.2px;
    line-height: 1.2;
  }
  
  .nav-main .nav-list {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .nav-main .nav-list a,
  .nav-list > li > a {
    font-size: 20px;
    font-weight: 500;
    color: #000000 !important;
    text-transform: none;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 6px 0;
    position: relative;
    display: inline-block;
  }
  
  /* Hover: chữ không đổi màu, hiện gạch chân */
  .nav-main .nav-list a:hover,
  .nav-list > li:hover > a {
    color: #000000 !important;
  }
  
  .nav-main .nav-list a::after,
  .nav-list > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #CD1E22;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }
  
  .nav-main .nav-list a:hover::after,
  .nav-list > li:hover > a::after {
    transform: scaleX(1);
  }
  
  /* Active item: có gạch chân, chữ không đổi màu */
  .nav-main .nav-list .current-menu-item > a,
  .nav-main .nav-list .current_page_item > a,
  .nav-main .nav-list .current-menu-ancestor > a,
  .nav-main .nav-list li.active > a,
  .nav-list > li.current-menu-item > a,
  .nav-list > li.current_page_item > a,
  .nav-list > li.active > a {
    color: #000000 !important;
  }
  
  .nav-main .nav-list .current-menu-item > a::after,
  .nav-main .nav-list .current_page_item > a::after,
  .nav-main .nav-list .current-menu-ancestor > a::after,
  .nav-main .nav-list li.active > a::after,
  .nav-list > li.current-menu-item > a::after,
  .nav-list > li.current_page_item > a::after,
  .nav-list > li.active > a::after {
    transform: scaleX(1) !important;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .header-hotline-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #CD1E22;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    height: 40px;
    padding: 10px 16px 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }
  
  .header-hotline-btn:hover {
    background-color: var(--hs-red-hover);
    transform: translateY(-1px);
  }
  
  .header-hotline-btn .hotline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .header-hotline-btn .hotline-icon img,
  .header-hotline-btn .hotline-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }
  
  .header-hotline-btn .hotline-number {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
  }
  
  .header-lang-flags {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .lang-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    opacity: 0.65;
    border: 1.5px solid transparent;
    padding: 1px;
  }
  
  .lang-flag:hover {
    opacity: 0.95;
    transform: translateY(-1px);
  }
  
  .lang-flag.active {
    opacity: 1;
    box-shadow: 0 0 0 1px #CD1E2250, 0 2px 6px rgba(205, 30, 34, 0.25);
    transform: scale(1.05);
  }
  
  .lang-flag img {
    display: block;
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
  }
  
  /* ── 2. HERO BANNER (Exact 02_hero.png) ────────────────────────────────────── */
  .hs-hero-banner {
    width: 100%;
    min-height: 640px;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  .hs-hero-container {
    width: 100%;
    position: relative;
    z-index: 2;
  }
  
  .hs-hero-content {
    position: relative;
    max-width: 620px;
    padding: 60px 0;
  }
  
  .hs-hero-title {
    display: flex;
    flex-direction: column;
    margin: 0 0 24px 0;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    overflow-y: hidden;
  }
  
  .hs-hero-title .title-line-dark {
    color: #000000;
  }
  
  .hs-hero-title .title-line-red {
    color: #CD1E22;
  }
  
  .hs-hero-desc {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    line-height: 1.5;
    margin: 0 0 36px 0;
    max-width: 560px;
  }
  
  .hs-hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  /* ── 3. STATS BAR (Exact 03_stats.png) ─────────────────────────────────────── */
  .hs-stats-section {
    background-color: #ffffff;
    padding: 40px 0;
    border-bottom: none;
  }
  
  .hs-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
  }
  
  .hs-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .stat-icon-wrap {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .stat-icon-wrap .stat-icon-img,
  .stat-icon-wrap img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    display: block;
  }
  
  .stat-number {
    font-size: 40px;
    font-weight: 700;
    color: #111111;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
  }
  
  .stat-title {
    font-size: 24px;
    font-weight: 500;
    color: #2d3748;
    line-height: 1.35;
    max-width: 280px;
  }
  
  /* ── 4. ABOUT SECTION (Exact 04_about.png) ─────────────────────────────────── */
  .hs-about-section {
    padding: 80px 0 90px;
    background-color: #ffffff;
  }
  
  .hs-about-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 50px;
    align-items: center;
  }
  
  .hs-about-image-card {
    width: 100%;
    overflow: hidden;
  }
  
  .hs-about-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .hs-about-action {
    margin-top: 80px;
  }
  
  /* ── 5. SERVICES (10 ITEM 2x5 GRID - Exact 05_services.png) ───────────────── */
  .hs-services-section {
    padding: 80px 0 90px;
    background-color: #ffffff;
  }
  
  .hs-services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
  
  .hs-service-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    height: 220px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  
  .hs-service-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
  
  .hs-service-card .card-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  }
  
  .hs-service-card:hover .card-thumb {
    transform: scale(1.08);
  }
  
  .hs-service-card .card-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--hs-red);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
  }
  
  .hs-service-card:hover .card-overlay {
    opacity: 1;
    transform: scale(1);
  }
  
  .hs-service-card .card-title {
    color: #ffffff;
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: clamp(20px, 2.2vw, 40px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    word-break: break-word;
    max-width: 100%;
  }
  
  .hs-service-card:hover .card-title,
  .hs-service-card.is-active .card-title {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hs-service-card.is-active .card-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Capabilities header layout for About page */
  .hs-capabilities-center-header {
    margin-bottom: 24px;
    text-align: center;
  }
  
  .hs-capabilities-header-left {
    margin-bottom: 28px;
  }
  
  .hs-capabilities-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 40px;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    margin: 0;
    line-height: 1.2;
    text-align: left;
  }
  
  /* ── 6. PROJECTS (1 LARGE + 4 SMALL 2x2 - Exact 06_projects.png) ───────────── */
  .hs-projects-section {
    padding: 80px 0 90px;
    background-color: #ffffff;
  }
  
  .hs-projects-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
  .project-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.25s ease;
  }
  
  .project-card:hover {
    transform: translateY(-3px);
  }
  
  .project-thumb-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
  }
  
  .project-thumb-img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .project-card:hover .project-thumb-img {
    transform: scale(1.04);
  }
  
  .project-card-large .project-thumb-wrap {
    height: 440px;
  }
  
  .project-card-large .project-thumb-img {
    height: 100%;
  }
  
  .project-card-large .project-info {
    padding: 18px 0 0;
  }
  
  .project-card-large .project-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 6px 0;
    line-height: 1.4;
  }
  
  .project-card-large .project-category {
    font-size: 18px;
    font-weight: 400;
    color: #718096;
  }
  
  /* 2x2 Small Grid on Right */
  .project-col-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
  
  .project-card-small .project-thumb-wrap {
    height: 165px;
  }
  
  .project-card-small .project-thumb-img {
    height: 100%;
  }
  
  .project-card-small .project-info {
    padding: 12px 0 0;
  }
  
  .project-card-small .project-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 4px 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .project-card-small .project-category {
    font-size: 18px;
    font-weight: 500;
    color: #718096;
  }
  
  /* ── 7. CLIENTS (Exact 06_projects / 07_news) ──────────────────────────────── */
  .hs-clients-section {
    padding: 60px 0 80px;
    background-color: #ffffff;
  }
  
  .hs-slider-nav-arrows {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
  }
  
  .hs-slider-nav-arrows .arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 0;
  }
  
  .hs-slider-nav-arrows .arrow-btn svg {
    display: block;
    stroke: currentColor;
    transition: transform 0.2s ease;
  }
  
  .hs-slider-nav-arrows .arrow-btn.prev-btn:hover svg {
    transform: translateX(-1px);
  }
  
  .hs-slider-nav-arrows .arrow-btn.next-btn:hover svg {
    transform: translateX(1px);
  }
  
  .hs-slider-nav-arrows .arrow-btn:hover {
    background: var(--hs-red);
    color: #ffffff;
    border-color: var(--hs-red);
  }
  
  .hs-clients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .client-card {
    border: 1px solid #D9D9D9;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: #ffffff;
    transition: box-shadow 0.2s ease;
  }
  
  .client-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }
  
  .client-logo-img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
  }
  
  /* ── 8. NEWS & CTA FORM (Parallel Columns - Exact 07_news & 08_cta_footer) ─── */
  .hs-news-cta-section {
    padding: 80px 0 100px;
    background-color: #ffffff;
  }
  
  .hs-news-cta-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 48px;
    align-items: flex-start;
  }
  
  /* Left: News */
  .news-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
  .news-card {
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .news-thumb-link {
    display: block;
    height: 220px;
    overflow: hidden;
    border-radius: 4px;
  }
  
  .news-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .news-card:hover .news-thumb-img {
    transform: scale(1.05);
  }
  
  .news-body {
    padding: 16px 0 0;
  }
  
  .news-date {
    font-size: 16px;
    color: #a0aec0;
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
  }
  
  .news-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
  }
  
  .news-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .news-title a:hover {
    color: var(--hs-red);
  }
  
  /* Right: CTA Box */
  .hs-cta-box {
    background-color: #F5F5F5;
    padding: 40px 36px;
  }
  
  .cta-box-title {
    font-size: 32px;
    font-weight: 600;
    color: #111111;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
    text-align: center;
  }
  
  .cta-box-subtitle {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.55;
    margin: 0 0 24px 0;
    text-align: center;
  }
  
  .hs-consult-form .form-group {
    margin-bottom: 16px;
    position: relative;
  }
  
  .hs-consult-form .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
  }
  
  .hs-consult-form .form-group-textarea .input-icon,
  .hs-consult-form .input-icon.input-icon-textarea {
    top: 15px;
    transform: none;
  }
  
  .hs-consult-form .form-input {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 16px 12px 44px;
    font-family: var(--font-body, inherit);
    font-size: 16px;
    color: #1a202c;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
  }
  
  .hs-consult-form textarea.form-input,
  .hs-consult-form .form-textarea {
    height: auto;
    min-height: 115px;
    resize: vertical;
    line-height: 1.5;
    padding-top: 12px;
  }
  
  .hs-consult-form .form-input::placeholder {
    color: #a0aec0;
    font-size: 16px;
  }
  
  .hs-consult-form .form-input:focus {
    border-color: var(--hs-red);
    box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.12);
  }
  
  .hs-btn-submit {
    width: 100%;
    height: 50px;
    background-color: var(--hs-red);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  .hs-btn-submit:hover {
    background-color: var(--hs-red-hover);
    transform: translateY(-1px);
  }
  
  /* ── 9. FOOTER (Exact 08_cta_footer.png) ──────────────────────────────────── */
  .site-footer {
    background-color: var(--hs-footer-bg);
    color: #e2e8f0;
    padding: 70px 0 40px;
  }
  
  .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 0.8fr 0.8fr;
    gap: 40px;
    margin-bottom: 50px;
  }
  
  .footer-brand-logo {
    margin-bottom: 12px;
  }
  
  .footer-logo-img {
    height: 124px;
    width: auto;
  }
  
  .footer-tagline {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    margin: 0 0 16px 0;
    letter-spacing: 0.5px;
  }
  
  .footer-slogan {
    font-size: 16px;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
  }
  
  .footer-title {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: 0.3px;
  }
  
  .footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.6;
  }
  
  .footer-contact-list strong {
    color: #ffffff;
  }
  
  .footer-contact-list a {
    color: #cbd5e1;
    text-decoration: none;
  }
  
  .footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .footer-links-list a {
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-links-list a:hover {
    color: #ffffff;
    padding-left: 4px;
  }
  
  .footer-social-links {
    display: flex;
    gap: 12px;
  }
  
  .social-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #353535;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  
  .social-circle-btn:hover {
    transform: translateY(-2px);
    background: var(--hs-red);
    color: #ffffff;
  }
  
  .footer-bottom-bar {
    font-size: 16px;
    color: #FFFFFF;
    font-style: italic;
  }
  
  /* ── 10. SUBPAGES STYLING (Giới thiệu, Dự án, Tin tức, Liên hệ) ────────── */
  
  /* A. TRANG LIÊN HỆ (Liên hệ.png) */
  .hs-contact-main-section {
    padding: 60px 0 100px;
    background-color: #ffffff;
  }
  
  .hs-contact-grid-2col {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 60px;
    align-items: flex-start;
    margin-top: 80px;
  }
  
  .hs-contact-company-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 32px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 48px 0;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1.3;
  }
  
  .hs-contact-company-title .company-title-sub {
    display: block;
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
    color: #555555;
    text-transform: uppercase;
    margin-top: 4px;
  }
  
  .hs-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .hs-contact-info-list .legal-label {
    flex: 0 0 115px;
    font-size: 21px;
  }
  
  .hs-contact-info-list .legal-value {
    font-size: 21px;
  }
  
  /* B. TRANG DỰ ÁN (Dự án.png) */
  .hs-project-archive-main {
    padding: 60px 0 100px;
    background-color: #ffffff;
  }
  
  .hs-archive-projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
    margin-top: 36px;
  }
  
  .hs-archive-project-card {
    display: block;
    text-decoration: none;
  }
  
  .hs-archive-project-card .card-thumb-link {
    display: block;
    height: 380px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  
  .hs-archive-project-card .card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .hs-archive-project-card:hover .card-thumb-img {
    transform: scale(1.05);
  }
  
  .hs-archive-project-card .card-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 6px 0;
    line-height: 1.4;
  }
  
  .hs-archive-project-card .card-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .hs-archive-project-card .card-title a:hover {
    color: var(--hs-red);
  }
  
  .hs-archive-project-card .card-category {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  
  .hs-archive-more-wrap {
    text-align: center;
    margin-top: 60px;
  }
  
  .hs-btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #CD1E22;
    border: 1px solid #CD1E22;
    color: #ffffff !important;
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    width: fit-content;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }
  
  .hs-btn-more:hover {
    background-color: #b0171a;
    border-color: #b0171a;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(205, 30, 34, 0.3);
  }
  
  .hs-btn-more:active {
    transform: translateY(0);
  }
  
  .hs-btn-more .arrow-down-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    object-fit: contain;
    transform: rotate(90deg);
    transition: transform 0.25s ease;
  }
  
  .hs-btn-more:hover .arrow-down-icon {
    transform: rotate(90deg) translateX(4px);
  }
  
  .hs-btn-more.is-loading,
  .btn-primary.is-loading,
  .hs-btn-primary.is-loading {
    opacity: 0.85;
    pointer-events: none;
    cursor: wait;
  }
  
  .hs-btn-more.is-loading .arrow-down-icon,
  .hs-btn-more.is-loading .arrow,
  .hs-btn-more.is-loading .arrow-icon,
  .hs-btn-more.is-loading .btn-arrow,
  .btn-primary.is-loading .arrow-down-icon,
  .btn-primary.is-loading .arrow,
  .btn-primary.is-loading .arrow-icon,
  .btn-primary.is-loading .btn-arrow,
  .btn-primary.is-loading svg,
  .hs-btn-primary.is-loading .arrow-down-icon,
  .hs-btn-primary.is-loading .arrow,
  .hs-btn-primary.is-loading .arrow-icon,
  .hs-btn-primary.is-loading .btn-arrow,
  .hs-btn-primary.is-loading svg {
    display: none !important;
  }
  
  .hs-btn-more.is-loading::after,
  .btn-primary.is-loading::after,
  .hs-btn-primary.is-loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: hsBtnSpin 0.75s linear infinite;
    flex-shrink: 0;
  }
  
  @keyframes hsBtnSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* C. TRANG TIN TỨC (Tin tức.png) */
  .hs-news-archive-main {
    padding: 60px 0 100px;
    background-color: #ffffff;
  }
  
  .hs-archive-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 32px;
    margin-top: 36px;
  }
  
  .hs-archive-news-card .card-thumb-link {
    display: block;
    height: 340px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  
  .hs-archive-news-card .card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .hs-archive-news-card:hover .card-thumb-img {
    transform: scale(1.05);
  }
  
  .hs-archive-news-card .news-date {
    font-size: 13px;
    color: #a0aec0;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
  }
  
  .hs-archive-news-card .card-title {
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 10px 0;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .hs-archive-news-card .card-title a {
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .hs-archive-news-card .card-title a:hover {
    color: var(--hs-red);
  }
  
  .hs-archive-news-card .card-excerpt {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* D. TRANG GIỚI THIỆU (Giới thiệu.png) */
  .hs-about-intro-section {
    padding: 80px 0 90px;
    background-color: #ffffff;
  }
  
  .hs-center-header {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 18px;
  }
  
  .hs-pill-pretitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .hs-pill-pretitle.section-subtitle {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #575757;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
  }
  
  .hs-pill-light,
  .hs-pill-light.section-subtitle {
    color: #ffffff !important;
  }
  
  .hs-center-main-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.5px;
    margin: 0 0 20px 0;
    line-height: 1.25;
    text-transform: uppercase;
  }
  
  .text-red {
    color: #CD1E22 !important;
  }
  
  .hs-center-subhead {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 16px 0;
    line-height: 1.4;
  }
  
  .hs-center-lead,
  p.hs-center-lead {
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif);
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 900px;
  }
  
  .hs-three-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    margin-bottom: 48px;
  }
  
  .hs-pillar-card {
    background-color: #D9D9D9;
    border-radius: 32px;
    padding: 32px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }
  
  .hs-pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    border-color: rgba(205, 30, 34, 0.35);
  }
  
  .pillar-icon-box {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease;
  }
  
  .pillar-icon-box img {
    width: 240px;
    height: auto;
  }
  
  .hs-pillar-card:hover .pillar-icon-box {
    transform: scale(1.08);
  }
  
  .pillar-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0;
  }
  
  .hs-checkmarks-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
    margin-bottom: 40px;
  }
  
  .check-item {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  
  .check-item img,
  .check-circle {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }
  
  .check-text {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
  }
  
  .hs-about-summary-text {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #222222;
    line-height: 1.65;
  }
  
  /* Legal Info Section (Thông Tin Chung & Pháp Lý) */
  .hs-legal-section {
    padding: 80px 0 90px;
    background-color: #ffffff;
  }
  
  .hs-legal-center-header {
    margin-bottom: 40px;
    text-align: center;
  }
  
  .hs-legal-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 38px;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 28px 0;
    text-align: left;
  }
  
  .hs-legal-grid-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 588px;
    max-width: 1240px;
    margin: 0 auto;
    gap: 52px;
    align-items: start;
  }
  
  .hs-legal-col-info {
    display: flex;
    flex-direction: column;
  }
  
  .hs-legal-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .legal-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
    border-bottom: none;
  }
  
  .legal-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    background: transparent;
    border-radius: 0;
  }
  
  .legal-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    margin-top: 2px;
  }
  
  .legal-label {
    flex: 0 0 135px;
    font-family: var(--font-body, inherit);
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
    line-height: 1.5;
  }
  
  .legal-value {
    flex: 1;
    font-family: var(--font-body, inherit);
    font-size: 24px;
    color: #222222;
    font-weight: 500;
    line-height: 1.5;
  }
  
  .legal-value .legal-val-primary {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
  }
  
  .legal-value .legal-val-sub {
    display: block;
    font-size: 15px;
    font-style: italic;
    color: #333333;
    text-transform: uppercase;
    margin-top: 2px;
  }
  
  .legal-value a {
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .legal-value a:hover {
    color: #CD1E22;
  }
  
  .legal-image-card {
    width: 100%;
    max-width: 588px;
    height: 400px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  }
  
  .legal-main-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* Vision Section with Glassmorphism */
  .hs-vision-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 0 100px;
    color: #ffffff;
  }
  
  .hs-vision-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
  }
  
  .hs-vision-container {
    position: relative;
    z-index: 2;
    max-width: 1440px;
  }
  
  .hs-vision-center-header {
    margin-bottom: 40px;
    text-align: center;
  }
  
  .hs-vision-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  
  .vision-glass-card {
    background: rgba(245, 245, 245, 0.12); /* fill f5f5f5 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(217, 217, 217, 0.45); /* border d9d9d9 */
    border-radius: 20px; /* rounded 20 */
    padding: 44px 38px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  }
  
  .vision-glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 217, 217, 0.75);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
  }
  
  .vision-header-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 30px;
  }
  
  .vision-focus-icon {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .vision-focus-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  
  .vision-title {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 48px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.25;
  }
  
  .vision-body-text p {
    font-family: var(--font-heading, 'Barlow Semi Condensed', sans-serif);
    font-size: 24px; /* text 24 500 */
    font-weight: 500;
    line-height: 1.55;
    color: #ffffff;
    margin: 0 0 24px 0;
  }
  
  .vision-body-text p:last-child {
    margin-bottom: 0;
  }
  
  /* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
  @media (max-width: 1280px) {
    .header-brand-meta {
      display: none !important;
    }
    .header-logo-img {
      height: 32px !important;
      max-height: 32px !important;
      width: auto !important;
    }
    .nav-main .nav-list {
      gap: 22px;
    }
  
    .hs-center-main-title,
    .hs-legal-title,
    .hs-vision-main-title {
      font-size: 40px;
    }
    .hs-center-lead {
      font-size: 20px;
    }
    .hs-about-summary-text {
      font-size: 18px;
    }
  
    /* Lớp phủ mờ sáng màu chỉ xuất hiện khi màn hình < 1280px */
    .hs-hero-banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 70%;
      max-width: 900px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.86) 42%, rgba(255, 255, 255, 0.45) 75%, rgba(255, 255, 255, 0) 100%);
      pointer-events: none;
      z-index: 1;
    }
  
    .hs-hero-content::before {
      content: "";
      position: absolute;
      top: 15px;
      left: -24px;
      right: -24px;
      bottom: 15px;
      background: radial-gradient(ellipse at 35% 45%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 20px;
      pointer-events: none;
      z-index: -1;
    }
  }
  
  @media (max-width: 1200px) {
    .hs-services-grid {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 140px);
    }
    .hs-service-card {
      height: 140px;
    }
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
  
    /* Three Pillars & Core Values (1200px) */
    .hs-three-pillars-grid {
      gap: 36px;
      margin-bottom: 40px;
    }
    .hs-pillar-card {
      padding: 28px 24px;
      border-radius: 24px;
      min-height: 250px;
    }
    .pillar-icon-box img {
      width: 180px;
      height: auto;
    }
    .pillar-title {
      font-size: 21px;
    }
    .hs-checkmarks-row {
      gap: 36px;
      margin-bottom: 32px;
    }
    .check-item img,
    .check-circle {
      width: 44px;
      height: 44px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .check-text {
      font-size: 20px;
    }
    .hs-about-summary-text {
      font-size: 20px;
    }
  
    /* Legal Info Section (1200px) */
    .hs-legal-grid-2col {
      grid-template-columns: minmax(0, 1fr) 480px;
      gap: 36px;
    }
    .hs-legal-title {
      font-size: 34px;
    }
    .legal-image-card {
      max-width: 480px;
      height: 360px;
    }
    .legal-label {
      flex: 0 0 120px;
      font-size: 20px;
    }
    .legal-value {
      font-size: 20px;
    }
    .legal-value .legal-val-primary {
      font-size: 20px;
    }
  
    /* Vision Section (1200px) */
    .hs-vision-section {
      padding: 60px 0 80px;
    }
    .hs-vision-cards-grid {
      gap: 24px;
    }
    .vision-glass-card {
      padding: 36px 30px;
      border-radius: 18px;
    }
    .vision-title {
      font-size: 38px;
    }
    .vision-focus-icon {
      width: 46px;
      height: 46px;
    }
    .vision-body-text p {
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: 18px;
    }
  }
  
  @media (max-width: 992px) {
    /* Header Mobile Compact */
    .header-container {
      height: 58px;
      padding: 0 16px;
    }
    .header-logo-img {
      height: 28px !important;
      width: auto !important;
    }
    .header-brand-meta {
      display: none !important;
    }
    .nav-main {
      display: none !important;
    }
    .header-actions .header-hotline-btn,
    .header-actions .header-lang-flags {
      display: none !important;
    }
    .header-actions {
      gap: 0;
    }
    .nav-toggle {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      padding: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2.2px;
      background-color: #111111 !important;
      border-radius: 2px;
      transition: all 0.25s ease;
    }
  
    /* Mobile Drawer Full Width Styling */
    .mobile-drawer {
      z-index: 9999 !important;
    }
  
    .mobile-drawer-inner {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      max-width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      background: #ffffff !important;
      color: var(--hs-text-dark) !important;
      box-shadow: none !important;
      padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      transform: translateX(100%) !important;
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
      box-sizing: border-box !important;
    }
  
    .mobile-drawer.is-open .mobile-drawer-inner {
      transform: translateX(0) !important;
    }
  
    .mobile-drawer-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 4px 0 14px !important;
      border-bottom: 1px solid #e8e8ea !important;
      flex-shrink: 0 !important;
    }
  
    .mobile-drawer .mobile-logo-img {
      height: 30px !important;
      width: auto !important;
      object-fit: contain;
    }
  
    .mobile-drawer .mobile-close {
      width: 36px !important;
      height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 26px !important;
      line-height: 1 !important;
      color: #111111 !important;
      background: #f4f4f5 !important;
      border: none !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      padding: 0 !important;
      transition: background-color 0.2s ease, transform 0.2s ease !important;
    }
  
    .mobile-drawer .mobile-close:hover {
      background-color: #e4e4e7 !important;
      transform: rotate(90deg);
    }
  
    /* Mobile Drawer: Language Switcher */
    .mobile-drawer-lang {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 0 !important;
      border-bottom: 1px solid #f1f5f9 !important;
      flex-shrink: 0 !important;
    }
  
    .mobile-drawer-lang-label {
      font-size: 13px !important;
      font-weight: 700 !important;
      color: #64748b !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
    }
  
    .mobile-drawer-lang-items {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
  
    .mobile-drawer-lang-items .lang-flag {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 5px 12px !important;
      border-radius: 20px !important;
      border: 1px solid #e2e8f0 !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      color: #475569 !important;
      text-decoration: none !important;
      background: #f8fafc !important;
      transition: all 0.2s ease !important;
    }
  
    .mobile-drawer-lang-items .lang-flag.active {
      border-color: var(--hs-red) !important;
      background-color: #fff5f5 !important;
      color: var(--hs-red) !important;
      font-weight: 700 !important;
    }
  
    /* Mobile Drawer: Hotline Button */
    .mobile-drawer-hotline-wrap {
      margin: 14px 0 10px !important;
      flex-shrink: 0 !important;
    }
  
    .mobile-drawer-hotline-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      background-color: var(--hs-red) !important;
      color: #ffffff !important;
      font-size: 15.5px !important;
      font-weight: 700 !important;
      padding: 11px 20px !important;
      border-radius: 8px !important;
      text-decoration: none !important;
      box-shadow: 0 4px 14px rgba(205, 30, 34, 0.25) !important;
      transition: all 0.2s ease !important;
      width: 100% !important;
    }
  
    .mobile-drawer-hotline-btn:hover {
      background-color: var(--hs-red-hover) !important;
    }
  
    /* Mobile Drawer: Navigation List */
    .mobile-drawer-nav {
      margin: 8px 0 !important;
      flex: 1 0 auto !important;
    }
  
    .mobile-nav-list {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
    }
  
    .mobile-nav-list li {
      border-bottom: 1px solid #f1f5f9 !important;
    }
  
    .mobile-nav-list li a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 13px 4px !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      color: #111111 !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
      letter-spacing: 0.3px !important;
      transition: color 0.2s ease, padding-left 0.2s ease !important;
    }
  
    .mobile-nav-list li a:hover,
    .mobile-nav-list li.current-menu-item a {
      color: var(--hs-red) !important;
      padding-left: 6px !important;
    }
  
    /* Mobile Drawer: Footer */
    .mobile-drawer-footer {
      margin-top: 20px !important;
      padding-top: 16px !important;
      padding-bottom: 16px !important;
      border-top: 1px solid #e2e8f0 !important;
      flex-shrink: 0 !important;
    }
  
    .mobile-drawer-company-name {
      display: block !important;
      font-size: 13.5px !important;
      font-weight: 800 !important;
      color: #111111 !important;
      text-transform: uppercase !important;
      margin-bottom: 3px !important;
      line-height: 1.35 !important;
    }
  
    .mobile-drawer-company-slogan {
      display: block !important;
      font-size: 12px !important;
      color: #64748b !important;
      font-style: italic !important;
      margin-bottom: 10px !important;
      line-height: 1.4 !important;
    }
  
    .mobile-drawer-contact-item {
      font-size: 13px !important;
      color: #475569 !important;
      margin: 0 !important;
      line-height: 1.5 !important;
    }
  
    .mobile-drawer-contact-item a {
      color: var(--hs-red) !important;
      text-decoration: none !important;
      font-weight: 600 !important;
    }
  
    /* ── Home Page Responsive: Tablet (max-width: 992px) ── */
    .hs-hero-banner {
      min-height: 520px;
      background-position: 72% center;
    }
    .hs-hero-banner::before {
      width: 100%;
      max-width: 100%;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 55%, rgba(255, 255, 255, 0.5) 85%, rgba(255, 255, 255, 0.15) 100%);
    }
    .hs-hero-content {
      max-width: 100%;
      padding: 40px 0;
    }
    .hs-hero-content::before {
      top: -15px;
      left: -15px;
      right: -15px;
      bottom: -15px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .hs-hero-title {
      font-size: 42px;
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .hs-hero-desc {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 28px;
      max-width: 100%;
    }
  
    .hs-stats-section {
      padding-top: 36px;
      padding-bottom: 60px;
    }
    .hs-stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 36px 24px;
    }
    .stat-icon-wrap {
      width: 80px;
      height: 80px;
      margin-bottom: 14px;
    }
    .stat-icon-wrap .stat-icon-img,
    .stat-icon-wrap img {
      width: 80px;
      height: 80px;
    }
    .stat-number {
      font-size: 36px;
    }
    .stat-title {
      font-size: 20px;
      line-height: 1.3;
      max-width: 240px;
    }
  
    .hs-about-section {
      padding: 60px 0;
    }
    .hs-about-grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .section-title {
      font-size: 32px;
      line-height: 1.25;
    }
    .hs-about-image-card img {
      width: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
  
    
    .hs-about-action {
      margin-top: 40px;
    }
  
    .hs-services-section {
      padding: 60px 0;
    }
    .hs-services-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      gap: 14px;
    }
    .hs-service-card {
      height: 130px;
    }
  
    .hs-projects-section {
      padding: 50px 0;
    }
    .hs-projects-showcase {
      grid-template-columns: 1fr;
      gap: 22px;
    }
    .project-card-large .project-thumb-wrap {
      height: 300px;
    }
    .project-card-large .project-title {
      font-size: 20px;
      margin-bottom: 4px;
    }
    .project-card-large .project-category {
      font-size: 15px;
    }
    .project-col-small-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .project-card-small .project-thumb-wrap {
      height: 150px;
    }
    .project-card-small .project-title {
      font-size: 16px;
      margin-bottom: 3px;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .project-card-small .project-category {
      font-size: 13.5px;
    }
  
    .hs-clients-section {
      padding: 50px 0;
    }
    .hs-clients-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .client-card {
      height: 80px;
      padding: 10px;
    }
  
    .hs-news-cta-section {
      padding: 50px 0;
    }
    .hs-news-cta-grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .news-cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    .news-thumb-link {
      height: 190px;
    }
    .news-date {
      font-size: 13.5px;
      margin-bottom: 4px;
    }
    .news-title,
    .news-title a {
      font-size: 16.5px;
      line-height: 1.4;
    }
    .hs-cta-box {
      padding: 30px 24px;
      border-radius: 12px;
    }
    .cta-box-title {
      font-size: 24px;
      margin-bottom: 8px;
    }
    .cta-box-subtitle {
      font-size: 15px;
      margin-bottom: 18px;
    }
    .hs-consult-form .form-input {
      height: 48px;
      font-size: 15.5px;
    }
    .hs-consult-form textarea.form-input,
    .hs-consult-form .form-textarea {
      height: auto;
      min-height: 105px;
    }
    .hs-consult-form .form-input::placeholder {
      font-size: 15.5px;
    }
    .hs-btn-submit {
      height: 46px;
      font-size: 14px;
    }
  
    .hs-contact-grid-2col,
    .hs-legal-grid-2col,
    .hs-vision-cards-grid,
    .hs-archive-projects-grid,
    .hs-archive-news-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  
    /* Three Pillars & Core Values (992px) */
    .hs-three-pillars-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      max-width: 540px;
      margin: 0 auto 36px;
    }
    .hs-pillar-card {
      padding: 24px 20px;
      border-radius: 20px;
      min-height: auto;
    }
    .pillar-icon-box {
      margin-bottom: 14px;
    }
    .pillar-icon-box img {
      width: 140px;
      height: auto;
    }
    .pillar-title {
      font-size: 19px;
    }
    .hs-checkmarks-row {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px 32px;
      margin-bottom: 28px;
    }
    .check-item img,
    .check-circle {
      width: 36px;
      height: 36px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .check-text {
      font-size: 18px;
    }
    .hs-about-summary-text {
      font-size: 17px;
      line-height: 1.6;
    }
  
    /* Legal Info Section (992px) */
    .hs-legal-section {
      padding: 50px 0 60px;
    }
    .hs-legal-title {
      font-size: 30px;
      margin-bottom: 22px;
    }
    .legal-info-item {
      gap: 12px;
    }
    .legal-label {
      flex: 0 0 120px;
      font-size: 17px;
    }
    .legal-value {
      font-size: 17px;
    }
    .legal-value .legal-val-primary {
      font-size: 17px;
    }
    .legal-value .legal-val-sub {
      font-size: 13.5px;
    }
    .legal-icon {
      width: 24px;
      height: 24px;
    }
    .legal-icon img {
      width: 20px;
      height: 20px;
    }
    .legal-image-card {
      max-width: 100%;
      height: auto;
      aspect-ratio: 588 / 400;
      border-radius: 12px;
    }
  
    /* Vision Section (992px) */
    .hs-vision-section {
      padding: 50px 0 60px;
    }
    .hs-vision-cards-grid {
      gap: 24px;
    }
    .vision-glass-card {
      padding: 32px 26px;
      border-radius: 16px;
    }
    .vision-header-wrap {
      gap: 14px;
      margin-bottom: 20px;
    }
    .vision-focus-icon {
      width: 44px;
      height: 44px;
    }
    .vision-title {
      font-size: 32px;
    }
    .vision-body-text p {
      font-size: 18px;
      line-height: 1.5;
      margin-bottom: 16px;
    }
  
    /* Capabilities header in About page (992px) */
    .hs-capabilities-center-header {
      margin-bottom: 18px;
    }
    .hs-capabilities-header-left {
      margin-bottom: 20px;
    }
    .hs-capabilities-header-left .section-title {
      font-size: 28px;
    }
  
    /* More button wrap (992px) */
    .hs-archive-more-wrap {
      margin-top: 40px;
    }
    .hs-btn-more {
      font-size: 15px;
      padding: 11px 22px;
    }
  }
  
  @media (max-width: 640px) {
    /* ── 1. GLOBAL & CONTAINER COMPACT ── */
    .container {
      padding: 0 14px !important;
    }
  
    /* ── 2. HEADER MOBILE COMPACT ── */
    .site-header {
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      height: auto;
    }
    .header-container {
      height: 54px !important;
      padding: 0 14px !important;
    }
    .header-logo-img {
      height: 26px !important;
      width: auto !important;
      object-fit: contain;
    }
    .nav-toggle {
      padding: 6px !important;
      gap: 4px !important;
    }
    .nav-toggle span {
      width: 20px !important;
      height: 2px !important;
    }
  
    /* Mobile Drawer Full Width Compact */
    .mobile-drawer-inner {
      padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
      max-width: 100% !important;
    }
    .mobile-drawer-header {
      padding-bottom: 12px !important;
    }
    .mobile-drawer .mobile-logo-img {
      height: 28px !important;
    }
    .mobile-drawer .mobile-close {
      width: 34px !important;
      height: 34px !important;
      font-size: 24px !important;
    }
    .mobile-drawer-lang {
      padding: 10px 0 !important;
    }
    .mobile-drawer-lang-label {
      font-size: 12px !important;
    }
    .mobile-drawer-hotline-wrap {
      margin: 12px 0 8px !important;
    }
    .mobile-drawer-hotline-btn {
      font-size: 14.5px !important;
      padding: 10px 16px !important;
      gap: 8px !important;
      width: 100% !important;
    }
    .mobile-drawer-hotline-btn .hotline-icon-img {
      width: 16px !important;
      height: 16px !important;
    }
    .mobile-nav-list li a {
      padding: 12px 2px !important;
      font-size: 15px !important;
      letter-spacing: normal !important;
    }
    .mobile-drawer-footer {
      padding-top: 16px !important;
      padding-bottom: 16px !important;
    }
    .mobile-drawer-company-name {
      font-size: 13px !important;
    }
    .mobile-drawer-company-slogan {
      font-size: 11.5px !important;
      margin-bottom: 8px !important;
    }
    .mobile-drawer-contact-item {
      font-size: 12.5px !important;
    }
  
    /* ── 3. UNIFIED SECTION TYPOGRAPHY & BUTTONS ── */
    .section-title,
    .hs-section-title {
      font-size: 22px !important;
      line-height: 1.22 !important;
      margin-bottom: 10px !important;
      letter-spacing: normal !important;
    }
    .section-subtitle,
    .hs-section-pretitle {
      font-size: 13px !important;
      gap: 6px !important;
      margin-bottom: 6px !important;
      letter-spacing: 0.3px !important;
    }
    .pretitle-line,
    .pretitle-bar,
    .section-subtitle .pretitle-line,
    .section-subtitle .pretitle-bar {
      width: 28px !important;
      height: 3px !important;
    }
    .section-description,
    .hs-about-desc,
    p.section-description {
      font-size: 16px !important;
      margin-bottom: 16px !important;
    }
    .btn-primary,
    .hs-btn-primary {
      font-size: 13.5px !important;
      padding: 9px 18px !important;
      gap: 6px !important;
    }
    .btn-primary::after,
    .hs-btn-primary::after {
      width: 14px !important;
      height: 14px !important;
    }
    .btn-text-link,
    .btn-link,
    .hs-view-all-link,
    .view-all-link {
      font-size: 13px !important;
      gap: 5px !important;
    }
    .btn-text-link::after,
    .btn-link::after,
    .hs-view-all-link::after,
    .view-all-link::after {
      width: 12px !important;
      height: 12px !important;
    }
  
    /* ── 4. HOME HERO BANNER COMPACT ── */
    .hs-hero-banner {
      min-height: 360px !important;
      padding: 16px 0 24px !important;
      background-position: 80% center;
    }
    .hs-hero-banner::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 80%, rgba(255, 255, 255, 0.7) 100%);
    }
    .hs-hero-content {
      padding: 16px 6px !important;
      text-align: center;
    }
    .hs-hero-content::before {
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border-radius: 10px;
    }
    .hs-hero-title {
      font-size: 24px !important;
      line-height: 1.2 !important;
      margin-bottom: 10px !important;
    }
    .hs-hero-desc {
      font-size: 13.5px !important;
      line-height: 1.45 !important;
      margin-bottom: 16px !important;
    }
    .hs-hero-buttons {
      flex-direction: column;
      width: 100%;
      gap: 8px !important;
    }
    .hs-hero-buttons .hs-btn-primary,
    .hs-hero-buttons .hs-btn-outline {
      width: 100% !important;
      padding: 10px 16px !important;
      font-size: 13.5px !important;
      height: 40px !important;
      justify-content: center !important;
    }
  
    /* ── 5. STATS SECTION COMPACT ── */
    .hs-stats-section {
      padding: 22px 0 26px !important;
    }
    .hs-stats-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px 10px !important;
    }
    .stat-icon-wrap {
      width: 44px !important;
      height: 44px !important;
      margin-bottom: 6px !important;
    }
    .stat-icon-wrap .stat-icon-img,
    .stat-icon-wrap img {
      width: 44px !important;
      height: 44px !important;
      object-fit: contain !important;
    }
    .stat-number {
      font-size: 24px !important;
      font-weight: 800 !important;
      margin-bottom: 2px !important;
      line-height: 1.1 !important;
    }
    .stat-title {
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      max-width: 100% !important;
    }
  
    /* ── 6. ABOUT SECTION COMPACT ── */
    .hs-about-section {
      padding: 28px 0 !important;
    }
    .hs-about-action {
      margin-top: 20px !important;
    }
    .hs-about-grid {
      gap: 18px !important;
    }
    .hs-about-image-card img {
      max-height: 180px !important;
      border-radius: 8px !important;
    }
  
    /* ── 7. SERVICES GRID COMPACT ── */
    .hs-services-section {
      padding: 28px 0 !important;
    }
    .hs-capabilities-center-header {
      margin-bottom: 14px !important;
    }
    .hs-capabilities-header-left {
      margin-bottom: 14px !important;
    }
    .hs-capabilities-title {
      font-size: 22px !important;
      line-height: 1.25 !important;
    }
    .hs-services-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
    }
    .hs-service-card {
      height: 88px !important;
      border-radius: 6px !important;
    }
    .card-title {
      font-size: 14px !important;
    }
  
    .hs-archive-project-card .card-category {
      font-size: 13px !important;
    }
  
    /* ── 8. PROJECTS SHOWCASE COMPACT ── */
    .hs-projects-section {
      padding: 26px 0 !important;
    }
    .hs-projects-section .hs-section-header {
      margin-bottom: 14px !important;
    }
    .hs-projects-section .hs-header-flex {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
    }
    .hs-projects-section .hs-view-all-link {
      font-size: 13px !important;
    }
    .hs-projects-showcase {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
    /* Large Project Card */
    .project-card-large .project-thumb-wrap {
      height: 180px !important;
      border-radius: 8px !important;
      overflow: hidden !important;
    }
    .project-card-large .project-info {
      padding: 8px 0 0 !important;
    }
    .project-card-large .project-title {
      font-size: 15px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      color: #111111 !important;
      margin: 0 0 3px 0 !important;
    }
    .project-card-large .project-category {
      font-size: 12.5px !important;
      font-weight: 500 !important;
      color: #718096 !important;
    }
    /* Small Project Cards Grid */
    .project-col-small-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px 10px !important;
    }
    .project-card-small .project-thumb-wrap {
      height: 110px !important;
      border-radius: 6px !important;
      overflow: hidden !important;
    }
    .project-card-small .project-info {
      padding: 6px 0 0 !important;
    }
    .project-card-small .project-title {
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.3 !important;
      color: #111111 !important;
      margin: 0 0 2px 0 !important;
      white-space: normal !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .project-card-small .project-category {
      font-size: 11.5px !important;
      font-weight: 500 !important;
      color: #718096 !important;
    }
  
    /* ── 9. CLIENTS / PARTNERS COMPACT ── */
    .hs-clients-section {
      padding: 26px 0 !important;
    }
    .hs-clients-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
    }
    .client-card {
      height: 56px !important;
      min-height: 56px !important;
      padding: 6px 10px !important;
      border-radius: 6px !important;
    }
    .client-logo-img {
      max-height: 26px !important;
      width: auto !important;
    }
    .hs-slider-nav-arrows {
      gap: 6px !important;
    }
    .hs-slider-nav-arrows button,
    .hs-slider-arrow {
      width: 30px !important;
      height: 30px !important;
    }
    .hs-slider-nav-arrows svg,
    .hs-slider-arrow svg {
      width: 14px !important;
      height: 14px !important;
    }
  
    /* ── 10. NEWS & CTA SECTION COMPACT ── */
    .hs-news-cta-section {
      padding: 26px 0 !important;
    }
    .hs-news-cta-grid {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    .hs-news-cta-section .hs-section-header {
      margin-bottom: 14px !important;
    }
    .hs-news-cta-section .hs-header-flex {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 6px !important;
    }
    .hs-news-cta-section .hs-view-all-link {
      font-size: 13px !important;
    }
    /* News Cards */
    .news-cards-grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    .news-card {
      border-radius: 6px !important;
    }
    .news-thumb-link {
      height: 160px !important;
      border-radius: 6px !important;
      overflow: hidden !important;
      display: block !important;
    }
    .news-thumb-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    .news-body {
      padding: 8px 0 0 !important;
    }
    .news-date {
      font-size: 12px !important;
      color: #718096 !important;
      margin-bottom: 3px !important;
      font-weight: 500 !important;
      display: block !important;
    }
    .news-title {
      font-size: 14.5px !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
      margin: 0 !important;
    }
    .news-title a {
      font-size: 14.5px !important;
      color: #111111 !important;
      line-height: 1.35 !important;
    }
    /* Form Hợp tác với chúng tôi */
    .hs-cta-box {
      padding: 20px 14px !important;
      border-radius: 8px !important;
      background-color: #f7f7f8 !important;
    }
    .cta-box-title {
      font-size: 18px !important;
      font-weight: 700 !important;
      color: #111111 !important;
      text-transform: uppercase !important;
      margin: 0 0 4px 0 !important;
      text-align: center !important;
      letter-spacing: normal !important;
    }
    .cta-box-subtitle {
      font-size: 12.5px !important;
      line-height: 1.45 !important;
      color: #575757 !important;
      margin: 0 0 14px 0 !important;
      text-align: center !important;
    }
    .hs-consult-form .form-group {
      margin-bottom: 8px !important;
      position: relative !important;
    }
    .hs-consult-form .input-icon {
      left: 10px !important;
    }
    .hs-consult-form .input-icon svg {
      width: 15px !important;
      height: 15px !important;
    }
    .hs-consult-form .form-input {
      height: 44px !important;
      font-size: 15px !important;
      padding: 10px 12px 10px 36px !important;
      border-radius: 6px !important;
    }
    .hs-consult-form textarea.form-input,
    .hs-consult-form .form-textarea {
      height: auto !important;
      min-height: 95px !important;
      padding-top: 10px !important;
    }
    .hs-consult-form .form-group-textarea .input-icon,
    .hs-consult-form .input-icon.input-icon-textarea {
      top: 12px !important;
      transform: none !important;
    }
    .hs-consult-form .form-input::placeholder {
      font-size: 15px !important;
    }
    .hs-btn-submit {
      height: 40px !important;
      font-size: 13.5px !important;
      font-weight: 700 !important;
      padding: 8px 14px !important;
      margin-top: 10px !important;
      border-radius: 6px !important;
    }
    .hs-btn-submit img,
    .hs-btn-submit .arrow-icon {
      width: 14px !important;
      height: 14px !important;
    }
  
    /* ── 11. SITE FOOTER COMPACT ── */
    .site-footer {
      padding: 30px 0 18px !important;
    }
    .footer-grid {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
      margin-bottom: 20px !important;
    }
    .footer-col-brand {
      margin-bottom: 4px;
    }
    .footer-brand-logo {
      margin-bottom: 6px !important;
      display: inline-block;
    }
    .footer-logo-img {
      height: 34px !important;
      max-height: 34px !important;
      width: auto !important;
    }
    .footer-slogan {
      font-size: 14px !important;
      line-height: 1.45 !important;
      margin: 0 !important;
    }
    .footer-title {
      font-size: 15px !important;
      font-weight: 700 !important;
      margin: 0 0 8px 0 !important;
      letter-spacing: 0.2px !important;
    }
    .footer-contact-list {
      font-size: 14px !important;
      line-height: 1.45 !important;
      gap: 5px !important;
    }
    .footer-links-list {
      gap: 5px !important;
    }
    .footer-links-list a {
      font-size: 14px !important;
    }
    .footer-social-links {
      gap: 8px !important;
    }
    .social-circle-btn {
      width: 30px !important;
      height: 30px !important;
    }
    .social-circle-btn svg {
      width: 16px !important;
      height: 16px !important;
    }
    .footer-bottom-bar {
      font-size: 13px !important;
      margin-top: 18px !important;
      padding-top: 12px !important;
      text-align: center !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
  
    /* ── 12. ABOUT PAGE COMPACT ── */
    .hs-about-intro-section {
      padding: 30px 0 !important;
    }
    .hs-center-header {
      margin-bottom: 20px !important;
    }
    .hs-center-main-title,
    .hs-legal-title,
    .hs-vision-main-title {
      font-size: 22px !important;
      line-height: 1.25 !important;
      margin-bottom: 10px !important;
    }
    .hs-center-subhead {
      font-size: 14px !important;
      margin-bottom: 8px !important;
    }
    .hs-center-lead,
    p.hs-center-lead {
      font-size: 14px !important;
      line-height: 1.45 !important;
    }
    .hs-three-pillars-grid {
      gap: 14px !important;
      margin-bottom: 24px !important;
    }
    .hs-pillar-card {
      padding: 18px 14px !important;
      min-height: auto !important;
      border-radius: 14px !important;
    }
    .pillar-icon-box {
      margin-bottom: 10px !important;
    }
    .pillar-icon-box img {
      width: 90px !important;
      max-width: 100% !important;
      height: auto !important;
    }
    .pillar-title {
      font-size: 15px !important;
    }
    .hs-checkmarks-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      max-width: 280px !important;
      margin: 0 auto 20px !important;
      gap: 10px !important;
    }
    .check-item {
      gap: 8px !important;
    }
    .check-item img,
    .check-circle {
      width: 20px !important;
      height: 20px !important;
      object-fit: contain !important;
      flex-shrink: 0 !important;
      display: block !important;
    }
    .check-text {
      font-size: 14.5px !important;
    }
    .hs-about-summary-text {
      font-size: 14px !important;
      line-height: 1.55 !important;
    }
    .hs-legal-section {
      padding: 36px 0 !important;
    }
    .hs-legal-grid-2col {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    .hs-legal-title {
      font-size: 22px !important;
      margin-bottom: 16px !important;
    }
    .legal-info-item {
      gap: 10px !important;
      padding-bottom: 0 !important;
    }
    .legal-icon {
      width: 22px !important;
      height: 22px !important;
      margin-top: 2px !important;
    }
    .legal-icon img {
      width: 18px !important;
      height: 18px !important;
    }
    .legal-label {
      flex: 0 0 100px !important;
      font-size: 14px !important;
    }
    .legal-value {
      font-size: 14px !important;
      line-height: 1.4 !important;
    }
    .legal-value .legal-val-primary {
      font-size: 14px !important;
    }
    .legal-value .legal-val-sub {
      font-size: 12px !important;
    }
    .legal-image-card {
      max-width: 100% !important;
      height: auto !important;
      aspect-ratio: 588 / 400 !important;
      border-radius: 10px !important;
    }
    .hs-vision-section {
      padding: 36px 0 44px !important;
    }
    .vision-glass-card {
      padding: 24px 18px !important;
      border-radius: 14px !important;
    }
    .vision-header-wrap {
      gap: 12px !important;
      margin-bottom: 16px !important;
    }
    .vision-focus-icon {
      width: 36px !important;
      height: 36px !important;
    }
    .vision-title {
      font-size: 26px !important;
    }
    .vision-body-text p {
      font-size: 15px !important;
      line-height: 1.5 !important;
      margin-bottom: 12px !important;
    }
  
    /* More button wrap (640px) */
    .hs-archive-more-wrap {
      margin-top: 28px !important;
    }
    .hs-btn-more {
      font-size: 13.5px !important;
      padding: 10px 18px !important;
      gap: 8px !important;
    }
    .hs-btn-more .arrow-down-icon {
      width: 14px !important;
      height: 14px !important;
    }
  }
  
  @media (max-width: 480px) {
    /* Extra compact adjustments for small mobile phones (<480px) */
    .project-col-small-grid {
      gap: 10px 8px !important;
    }
    .project-card-small .project-thumb-wrap {
      height: 95px !important;
    }
    .project-card-small .project-title {
      font-size: 12px !important;
      line-height: 1.25 !important;
    }
    .project-card-large .project-thumb-wrap {
      height: 160px !important;
    }
    .project-card-large .project-title {
      font-size: 14.5px !important;
    }
    .news-thumb-link {
      height: 140px !important;
    }
    .news-title,
    .news-title a {
      font-size: 13.5px !important;
      line-height: 1.35 !important;
    }
    .cta-box-title {
      font-size: 16.5px !important;
    }
    .cta-box-subtitle {
      font-size: 12px !important;
    }
  
    /* Legal info (<480px) */
    .legal-label {
      flex: 0 0 92px !important;
      font-size: 13px !important;
    }
    .legal-value {
      font-size: 13px !important;
    }
    .legal-value .legal-val-primary {
      font-size: 13px !important;
    }
    .legal-value .legal-val-sub {
      font-size: 11.5px !important;
    }
  
    /* Vision (<480px) */
    .vision-glass-card {
      padding: 20px 14px !important;
      border-radius: 12px !important;
    }
    .vision-title {
      font-size: 22px !important;
    }
    .vision-focus-icon {
      width: 30px !important;
      height: 30px !important;
    }
    .vision-body-text p {
      font-size: 13.5px !important;
      line-height: 1.45 !important;
      margin-bottom: 10px !important;
    }
  
    /* Capabilities (<480px) */
    .hs-capabilities-header-left .section-title {
      font-size: 19px !important;
    }
    .hs-service-card {
      height: 80px !important;
    }
  
    /* More button (<480px) */
    .hs-btn-more {
      font-size: 13px !important;
      padding: 9px 16px !important;
    }
  
    /* Check item (<480px) */
    .check-item {
      gap: 6px !important;
    }
    .check-item img,
    .check-circle {
      width: 16px !important;
      height: 16px !important;
    }
    .check-text {
      font-size: 13.5px !important;
    }
  }
  
  
  /* =============================================================================
     TỆP DỰ ÁN (archive-project.php) – theo Hồ sơ năng lực
  ============================================================================= */
  .hs-portfolio-block {
    margin-top: 90px;
    padding-top: 60px;
    border-top: 1px solid #e5e7eb;
  }
  
  .hs-portfolio-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 40px;
  }
  
  .hs-portfolio-list li {
    position: relative;
    padding-left: 22px;
    font-size: 17px;
    line-height: 1.6;
    color: #333333;
  }
  
  .hs-portfolio-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #CD1E22;
  }
  
  .hs-portfolio-list strong {
    color: #111111;
    font-weight: 700;
  }
  
  @media (max-width: 768px) {
    .hs-portfolio-block {
      margin-top: 60px;
      padding-top: 40px;
    }
    .hs-portfolio-list {
      grid-template-columns: 1fr;
    }
    .hs-portfolio-list li {
      font-size: 15px;
    }
  }
  
  /* Tiếng Trung: font CJK dự phòng (Barlow không có glyph chữ Hán) */
  .lang-zh body,
  body.lang-zh {
    font-family: var(--font-body, 'Barlow Semi Condensed', sans-serif), "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  }
  
  /* Trang /zh/: ẩn bộ chọn nổi của TranslatePress (chỉ biết VI/EN) – dùng cờ trên header */
  body.lang-zh .trp-floating-switcher {
    display: none !important;
  }
  
  /* Trang /zh/: chữ Hán có thể xuống dòng giữa mọi ký tự → giữ menu trên một dòng */
  body.lang-zh .nav-main a,
  body.lang-zh .header-actions a,
  body.lang-zh .hs-btn-primary,
  body.lang-zh .btn {
    white-space: nowrap;
  }
  
  
  /* ==========================================================================
     CHANGELOG 04/11/2026
     A. Chống tràn ngang ở mobile
     B. Menu mobile full màn hình, đổi ngôn ngữ chỉ có cờ
     C. Lĩnh vực hoạt động: tên dưới ảnh khi không có hover
     D. Đối tác: logo nhỏ hơn khung / hiện tên khi không có logo
     E. Trang chi tiết tin tức (single.php)
     F. Trang Profile (flip-book)
     ========================================================================== */
  
  /* ── A. Chống tràn ngang (overflow-x) ─────────────────────────────────────
     overflow-x: hidden chỉ đặt trên body không chặn được kéo ngang trên
     iOS/Android; clip trên html + body chặn được mà không phá sticky header. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }
  main,
  section,
  .site-footer {
    max-width: 100%;
  }
  iframe,
  embed,
  object {
    max-width: 100%;
  }
  
  @media (max-width: 992px) {
    section,
    .site-footer {
      overflow-x: clip;
    }
    /* Phần tử chờ hiệu ứng trượt ngang bị đẩy lệch 40px ra ngoài màn hình → đổi sang trượt dọc */
    [data-reveal="fade-left"],
    [data-reveal="fade-right"] {
      transform: translateY(24px);
    }
    [data-reveal="fade-left"].revealed,
    [data-reveal="fade-right"].revealed {
      transform: none;
    }
  }
  
  /* ── B. Menu mobile ──────────────────────────────────────────────────────── */
  @media (max-width: 992px) {
    /* Drawer đóng nằm ngoài màn hình (translateX 100%) → không cho tạo vùng cuộn ngang */
    .mobile-drawer {
      overflow: hidden !important;
    }
    /* main.css đặt width: min(340px, 85vw) → drawer không phủ hết màn hình */
    .mobile-drawer-inner {
      width: 100% !important;
      max-width: 100% !important;
      height: 100vh !important;
      height: 100dvh !important;
      border-radius: 0 !important;
    }
  
    .mobile-drawer-lang-items {
      gap: 10px !important;
    }
    .mobile-drawer-lang-items .lang-flag {
      gap: 0 !important;
      padding: 3px !important;
      border-radius: 6px !important;
      border: 2px solid transparent !important;
      background: transparent !important;
      line-height: 0 !important;
    }
    .mobile-drawer-lang-items .lang-flag img {
      width: 30px !important;
      height: 21px !important;
      object-fit: cover;
      border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
    .mobile-drawer-lang-items .lang-flag:not(.active) img {
      opacity: 0.7;
    }
    .mobile-drawer-lang-items .lang-flag.active {
      border-color: var(--hs-red) !important;
      background: transparent !important;
    }
  }
  
  /* ── C. Lĩnh vực hoạt động ───────────────────────────────────────────────── */
  .hs-service-card .card-caption {
    display: none;
  }
  @media (max-width: 992px), (hover: none) {
    .hs-services-grid {
      grid-template-rows: none !important;
    }
    .hs-service-card {
      height: auto !important;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border: 1px solid #e8e8ea;
      cursor: default;
    }
    .hs-service-card .card-thumb {
      height: auto;
      aspect-ratio: 4 / 3;
      flex-shrink: 0;
    }
    .hs-service-card:hover .card-thumb {
      transform: none;
    }
    .hs-service-card .card-overlay {
      display: none !important;
    }
    .hs-service-card .card-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-height: 46px;
      padding: 8px 6px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      text-transform: uppercase;
      color: var(--hs-text-dark);
      border-top: 3px solid var(--hs-red);
      overflow-wrap: anywhere;
    }
  }
  @media (max-width: 480px) {
    .hs-service-card .card-caption {
      font-size: 12.5px;
      min-height: 40px;
    }
  }
  
  /* ── D. Đối tác ──────────────────────────────────────────────────────────── */
  .client-card {
    text-decoration: none;
    overflow: hidden;
  }
  .client-card .client-logo-img {
    width: auto;
    height: auto;
    max-width: 62%;
    max-height: 64px;
  }
  .client-card .client-name {
    max-width: 100%;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--hs-text-dark);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  a.client-card:hover .client-name {
    color: var(--hs-red);
  }
  @media (max-width: 992px) {
    .client-card .client-logo-img {
      max-width: 60% !important;
      max-height: 44px !important;
    }
    .client-card .client-name {
      font-size: 28px;
    }
  }
  @media (max-width: 640px) {
    .client-card {
      height: auto !important;
      min-height: 64px !important;
    }
    .client-card .client-logo-img {
      max-width: 60% !important;
      max-height: 30px !important;
    }
    .client-card .client-name {
      font-size: 20px;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
  }
  
  /* ── E. Chi tiết tin tức ─────────────────────────────────────────────────── */
  .single-post-hero.page-hero {
    height: auto;
    min-height: 480px;
    padding: 120px 0 64px;
  }
  .single-post-hero .page-hero-content {
    width: 100%;
  }
  .single-post-hero .page-hero-title {
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    overflow-wrap: anywhere;
  }
  .single-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
  }
  .single-post-meta .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }
  
  .single-post-body-section {
    padding: 4rem 0;
  }
  .single-post-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 3.5rem;
    align-items: start;
  }
  .single-article-content {
    min-width: 0;
  }
  
  .post-featured-image-wrap {
    margin-bottom: 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  .post-featured-image-wrap img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
  }
  
  .single-article-content .entry-content {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #2c3e50;
    overflow-wrap: break-word;
  }
  .single-article-content .entry-content > * + * {
    margin-top: 1.1em;
  }
  .single-article-content .entry-content h2 { font-size: 1.6rem; line-height: 1.3; margin-top: 1.8em; }
  .single-article-content .entry-content h3 { font-size: 1.3rem; line-height: 1.35; margin-top: 1.6em; }
  .single-article-content .entry-content ul,
  .single-article-content .entry-content ol { padding-left: 1.4em; }
  .single-article-content .entry-content ul { list-style: disc; }
  .single-article-content .entry-content ol { list-style: decimal; }
  .single-article-content .entry-content img,
  .single-article-content .entry-content figure,
  .single-article-content .entry-content .wp-caption {
    max-width: 100% !important;
    height: auto;
  }
  .single-article-content .entry-content figure { margin-left: 0; margin-right: 0; }
  .single-article-content .entry-content iframe,
  .single-article-content .entry-content video { max-width: 100%; }
  .single-article-content .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }
  .single-article-content .entry-content pre { overflow-x: auto; }
  
  .post-tags-wrap {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .post-tags-wrap strong { color: #1a202c; }
  .post-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
  }
  
  .post-navigation-links {
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .post-navigation-links .nav-next { text-align: right; }
  .post-navigation-links .nav-label {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 0.25rem;
  }
  .post-navigation-links strong a { color: var(--hs-red); overflow-wrap: anywhere; }
  
  .single-post-sidebar {
    min-width: 0;
    position: sticky;
    top: 110px;
  }
  .sidebar-widget {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
    border: 1px solid #edf2f7;
  }
  .sidebar-widget .widget-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--hs-red);
    color: #1a202c;
  }
  .recent-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .recent-post-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }
  .recent-post-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 55px;
    border-radius: 6px;
    overflow: hidden;
    display: block;
  }
  .recent-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .recent-post-meta { min-width: 0; }
  .recent-post-meta h4 {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 0.25rem;
  }
  .recent-post-meta h4 a { color: #2d3748; text-decoration: none; }
  .recent-post-meta h4 a:hover { color: var(--hs-red); }
  .recent-post-date { font-size: 0.8rem; color: #a0aec0; }
  .sidebar-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .sidebar-link-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    color: #4a5568;
    text-decoration: none;
    border-bottom: 1px dashed #e2e8f0;
  }
  .sidebar-link-list a:hover { color: var(--hs-red); }
  .sidebar-cta-widget {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: #fff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
  }
  .sidebar-cta-widget h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #f7fafc;
  }
  .sidebar-cta-widget p {
    font-size: 0.9rem;
    color: #cbd5e0;
    margin-bottom: 1.25rem;
  }
  .sidebar-cta-widget .btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--hs-red);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
  }
  
  /* Tablet: 1 cột, sidebar xuống dưới, widget xếp 2 cột */
  @media (max-width: 1100px) {
    .single-post-grid-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 2.5rem;
    }
    .single-post-sidebar {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
      align-items: start;
    }
    .single-post-sidebar .sidebar-widget { margin-bottom: 0; }
    .single-post-sidebar .sidebar-cta-widget { grid-column: 1 / -1; }
  }
  @media (max-width: 992px) {
    .single-post-hero.page-hero {
      min-height: 340px;
      padding: 80px 0 48px;
    }
    .single-post-body-section { padding: 2.5rem 0; }
  }
  /* Mobile */
  @media (max-width: 640px) {
    .single-post-hero.page-hero {
      min-height: 260px;
      padding: 56px 0 32px;
    }
    .single-post-hero .page-hero-title {
      font-size: 1.45rem !important;
      line-height: 1.3;
    }
    .single-post-meta { font-size: 0.85rem; gap: 0.35rem 1rem; }
    .single-post-body-section { padding: 1.75rem 0 2.5rem; }
    .post-featured-image-wrap {
      margin-bottom: 1.5rem;
      border-radius: 8px;
    }
    .single-article-content .entry-content {
      font-size: 1rem;
      line-height: 1.75;
    }
    .single-article-content .entry-content h2 { font-size: 1.3rem; }
    .single-article-content .entry-content h3 { font-size: 1.15rem; }
    .post-tags-wrap { margin-top: 2rem; }
    .post-navigation-links {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .post-navigation-links .nav-next { text-align: left; }
    .single-post-sidebar { grid-template-columns: minmax(0, 1fr); }
    .sidebar-widget,
    .sidebar-cta-widget {
      padding: 1.25rem;
      border-radius: 10px;
    }
  }
  
  /* ── F. Trang Profile (flip-book) ────────────────────────────────────────── */
  .profile-flipbook-section {
    padding: 48px 0 80px;
    background: #f4f5f7;
  }
  .profile-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
  }
  .profile-tab {
    padding: 10px 22px;
    border: 1px solid #d9d9d9;
    border-radius: 999px;
    background: #ffffff;
    color: var(--hs-text-dark);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .profile-tab:hover {
    border-color: var(--hs-red);
    color: var(--hs-red);
  }
  .profile-tab.is-active {
    background: var(--hs-red);
    border-color: var(--hs-red);
    color: #ffffff;
  }
  .profile-panel[hidden] { display: none; }
  .flipbook-stage {
    position: relative;
    width: 100%;
    min-height: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2400px;
  }
  .flipbook-book {
    margin: 0 auto;
    max-width: 100%;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));
  }
  .flip-page {
    background: #ffffff;
    overflow: hidden;
  }
  .flip-page-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fafafa 0%, #eceef1 100%);
  }
  .flip-page.is-rendered .flip-page-inner { background: #ffffff; }
  .flip-page-inner canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  .flip-page-num {
    font-size: 14px;
    font-weight: 600;
    color: #9aa1ab;
  }
  .flipbook-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    color: #555555;
    font-size: 15px;
    text-align: center;
  }
  .flipbook-loading[hidden],
  .flipbook-spinner[hidden] { display: none; }
  .flipbook-loading a {
    color: var(--hs-red);
    font-weight: 700;
  }
  .flipbook-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--hs-red);
    border-radius: 50%;
    animation: flipbook-spin 0.8s linear infinite;
  }
  @keyframes flipbook-spin {
    to { transform: rotate(360deg); }
  }
  .flipbook-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
  }
  .flipbook-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .flipbook-btn:hover {
    background: var(--hs-red);
    border-color: var(--hs-red);
    color: #ffffff;
  }
  .flipbook-counter {
    min-width: 72px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--hs-text-dark);
  }
  .flipbook-download {
    margin-left: 8px;
    padding: 9px 18px;
    border-radius: 6px;
    background: var(--hs-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
  }
  .flipbook-download:hover {
    background: var(--hs-red-hover);
    color: #ffffff;
  }
  @media (max-width: 640px) {
    .profile-flipbook-section { padding: 24px 0 48px; }
    .profile-tabs {
      gap: 6px;
      margin-bottom: 18px;
    }
    .profile-tab {
      padding: 8px 14px;
      font-size: 13px;
    }
    .flipbook-toolbar {
      gap: 10px;
      margin-top: 16px;
    }
    .flipbook-download { margin-left: 0; }
  }
  
  /* ── G. Danh sách tin tức ở mobile: tiêu đề 16px, mô tả nhỏ lại ─────────── */
  @media (max-width: 640px) {
    .hs-archive-news-card .card-title {
      font-size: 16px !important;
      line-height: 1.35;
    }
    .hs-archive-news-card .card-excerpt {
      font-size: 14px;
      line-height: 1.55;
    }
  }
  
  /* ── H. Khoảng cách 2 bên trang (container) ────────────────────────────────
     Mobile 24px · Tablet 40px · Desktop (≥1025px) 80px.
     Desktop giữ vùng nội dung tối đa 1440px (1440 + 2 × 80 = 1600px).
     !important để thắng các override cũ (0 16px / 0 14px) ở 992px và 640px. */
  :root {
    --hs-container-pad: 24px;
  }
  @media (min-width: 768px) {
    :root {
      --hs-container-pad: 40px;
    }
  }
  @media (min-width: 1025px) {
    :root {
      --hs-container-pad: 80px;
    }
  }
  .container,
  .header-container {
    padding-left: var(--hs-container-pad) !important;
    padding-right: var(--hs-container-pad) !important;
  }
  .container {
    max-width: calc(1440px + 2 * var(--hs-container-pad));
  }