/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE. ***************/

/* ==========================================================================
   01. DESIGN TOKENS & ROOT CSS VARIABLES
   ========================================================================== */
:root {
  --tvn-primary: #0B1F4B;
  --tvn-accent: #E85C04;
  --tvn-navy: #0B1F4B;
  --tvn-orange: #E85C04;
  --tvn-ink: #1C2430;
  --tvn-muted: #5B6573;
  --tvn-paper: #F4F6F8;
  --tvn-line: #E2E6EC;
  --tvn-text-main: #1C2430;
  --tvn-text-muted: #5B6573;
  --tvn-border: #E2E6EC;
  --tvn-bg-light: #F4F6F8;
  --tvn-shadow-sm: 0 2px 8px rgba(11, 31, 75, 0.05);
  --tvn-shadow-md: 0 10px 25px -5px rgba(11, 31, 75, 0.08);
  --tvn-shadow-lg: 0 20px 40px -10px rgba(11, 31, 75, 0.12);
  --tvn-radius: 8px;
}

/* ==========================================================================
   02. TYPOGRAPHY (@font-face BE VIETNAM PRO)
   ========================================================================== */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoYZ7AjSh8.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXoYZ7Aj.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0JcBaoUUU.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0JcBao.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0JcBaoUUU.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0JcBao.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HSQI286Rb0JcBaoUUU.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/bevietnampro/v12/QdVMSTAyLFyeg_IDWvOJmVES_HSQI281Rb0JcBao.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   KHÓA ẨN TRIỆT ĐỂ FOOTER MẶC ĐỊNH CỦA THEME FLATSOME (ARCHIVES / CATEGORIES)
   ========================================================================== */
html body #footer,
html body .footer-wrapper,
html body #footer-widgets,
html body .absolute-footer,
html body .copyright-footer,
#footer,
.footer-wrapper,
#footer-widgets,
.absolute-footer,
.copyright-footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -99999px !important;
  left: -99999px !important;
  pointer-events: none !important;
  z-index: -99999 !important;
}


/* ==========================================================================
   TVN CONS CORP — dán TOÀN BỘ vào Flatsome → Advanced → Custom CSS
   (All Screens). Xóa CSS cũ trong ô trước khi dán. Không dùng @import.
   Font @font-face nằm ở child theme style.css (Theme File Editor).
   ========================================================================== */

/* Token — lặp lại vì ô Custom CSS là stylesheet riêng */
:root {
  --tvn-primary: #0B1F4B;
  --tvn-accent: #E85C04;
  --tvn-navy: #0B1F4B;
  --tvn-orange: #E85C04;
  --tvn-ink: #1C2430;
  --tvn-muted: #5B6573;
  --tvn-paper: #F4F6F8;
  --tvn-line: #E2E6EC;
  --tvn-text-main: #1C2430;
  --tvn-text-muted: #5B6573;
  --tvn-border: #E2E6EC;
  --tvn-bg-light: #F4F6F8;
  --tvn-shadow-sm: 0 2px 8px rgba(11, 31, 75, 0.05);
  --tvn-shadow-md: 0 10px 25px -5px rgba(11, 31, 75, 0.08);
  --tvn-shadow-lg: 0 20px 40px -10px rgba(11, 31, 75, 0.12);
  --tvn-radius: 8px;
}

/* Hàng rào: không style wp-admin / Gutenberg. Font chỉ trong khung frontend. */
html body:not(.wp-admin):not(.block-editor-page) #wrapper,
html body:not(.wp-admin):not(.block-editor-page) #header,
html body:not(.wp-admin):not(.block-editor-page) #masthead,
html body:not(.wp-admin):not(.block-editor-page) #main,
html body:not(.wp-admin):not(.block-editor-page) #content,
html body:not(.wp-admin):not(.block-editor-page) #footer,
html body:not(.wp-admin):not(.block-editor-page) .mfp-wrap,
html body:not(.wp-admin):not(.block-editor-page) .off-canvas,
html body:not(.wp-admin):not(.block-editor-page) #wrapper p,
html body:not(.wp-admin):not(.block-editor-page) #wrapper input,
html body:not(.wp-admin):not(.block-editor-page) #wrapper button,
html body:not(.wp-admin):not(.block-editor-page) #wrapper select,
html body:not(.wp-admin):not(.block-editor-page) #wrapper textarea {
  font-family: "Be Vietnam Pro", "Noto Sans", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body:not(.wp-admin):not(.block-editor-page) h1,
html body:not(.wp-admin):not(.block-editor-page) h2,
html body:not(.wp-admin):not(.block-editor-page) h3,
html body:not(.wp-admin):not(.block-editor-page) h4,
html body:not(.wp-admin):not(.block-editor-page) h5,
html body:not(.wp-admin):not(.block-editor-page) h6 {
  font-family: "Be Vietnam Pro", "Noto Sans", Helvetica, Arial, sans-serif !important;
}

/* ==========================================================================
   TRIỆT TIÊU HOÀN TOÀN DUPLICATE LOGO (Flatsome Dark / Sticky Logo Clone)
   ========================================================================== */
html body:not(.wp-admin) #header img.header-logo-dark,
html body:not(.wp-admin) #masthead img.header-logo-dark,
html body:not(.wp-admin) #logo img.header-logo-dark,
html body:not(.wp-admin) .header-logo-dark,
html body:not(.wp-admin) img.header-logo-dark {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   GLOBAL HEADER & LOGO SIZE CONSTRAINTS (ALL VIEWPORTS)
   Khóa kích thước Logo vĩnh viễn (max-height 40px) trên toàn bộ mọi kích thước màn hình
   ========================================================================== */
html body #header,
html body #masthead,
html body .header-main {
  height: 64px !important;
  min-height: 64px !important;
}

html body #header .header-inner,
html body #masthead .header-inner,
html body .header-main .header-inner {
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
}

html body #header #logo,
html body #header .logo,
html body #masthead #logo,
html body .stuck #logo,
#logo {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

html body #header #logo a,
html body #header .logo a,
html body #masthead #logo a,
html body .stuck #logo a,
#logo a {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #header #logo img,
html body #header .logo img,
html body #header img.header_logo,
html body #header img.header-logo,
html body #masthead #logo img,
html body .stuck #logo img,
#logo img {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: none !important;
}


/* ==========================================================================
   2. DESKTOP HEADER & NAVIGATION (MÀN HÌNH >= 1024PX)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Khung bao Header chính */
  html body #header .header-inner.container {
    max-width: 1360px !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    height: 76px !important;
  }

  /* Cụm Logo & Brand bên trái — Khóa kích thước cố định, triệt tiêu co giãn/thu nhỏ khi scroll */
  html body #header .header-inner > .flex-col.logo,
  html body #header #logo,
  html body .stuck #logo,
  html body .stuck .header-inner > .flex-col.logo,
  html body .header-wrapper.stuck #logo,
  html body .header-wrapper.tvn-scrolled #logo,
  #logo {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    transition: none !important;
    transform: none !important;
  }

  html body #header .header-inner > .flex-col.logo a,
  html body #header #logo a,
  html body .stuck #logo a,
  html body .header-wrapper.stuck #logo a,
  html body .header-wrapper.tvn-scrolled #logo a,
  #logo a {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    transition: none !important;
    transform: none !important;
  }

  html body #header .header-inner > .flex-col.logo #logo img,
  html body #header .header-inner > .flex-col.logo #logo img.header_logo,
  html body #header #logo img,
  html body #header #logo img.header_logo,
  html body #header #logo img.header-logo,
  html body #header .header_logo,
  html body .stuck #logo img,
  html body .stuck #logo img.header_logo,
  html body .stuck #logo img.header-logo,
  html body .header-wrapper.stuck #logo img,
  html body .header-wrapper.tvn-scrolled #logo img {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Tagline thương hiệu bên cạnh logo (Chỉ hiển thị trên màn hình rộng >= 1280px, không bao giờ đè logo) */
  .tvn-brand-tagline {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-left: 14px !important;
    border-left: 1.5px solid var(--tvn-border) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .tvn-brand-tagline .tvn-tag-title {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: var(--tvn-primary) !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    display: block !important;
  }

  .tvn-brand-tagline .tvn-tag-sub {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: var(--tvn-accent) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: block !important;
  }

  @media (max-width: 1279px) {
    .tvn-brand-tagline {
      display: none !important;
    }
  }

  /* Cột nav chiếm phần còn lại; position static để ul căn giữa theo cả header */
  html body #header .header-inner .flex-left.flex-grow,
  html body #header #masthead .header-inner > .flex-col.hide-for-medium.flex-left.flex-grow {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    position: static !important;
  }

  html body #header .header-inner > .flex-col.hide-for-medium.flex-right {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body #header,
  html body #masthead,
  html body .header-main,
  html body .header-inner {
    overflow: visible !important;
  }

  /* Logo trái — các mục còn lại đúng giữa header — Liên hệ phải */
  html body #header #masthead ul.header-nav-main.nav-left,
  html body #header ul.header-nav-main.nav-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 168px !important;
    gap: 28px !important;
    list-style: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  html body #header ul.header-nav-main.nav-left > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    flex: 0 0 auto !important;
  }

  html body #header ul.header-nav-main.nav-left > li > a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--tvn-primary) !important;
    padding: 10px 0 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.18s ease !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  html body #header ul.header-nav-main.nav-left > li > a:hover,
  html body #header ul.header-nav-main.nav-left > li.active > a,
  html body #header ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body #header ul.header-nav-main.nav-left > li.current-menu-ancestor > a {
    color: var(--tvn-accent) !important;
  }

  /* Header trong suốt trên hero: chữ trắng.
     Phải kèm #header — rule navy `html body #header … a` có 1 ID, rule trắng cũ chỉ class nên thua. */
  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a,
  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a.nav-top-link,
  html body.page-template-page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a,
  html body.page-template-page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a.nav-top-link,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a.nav-top-link,
  html body.has-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a.nav-top-link {
    color: #ffffff !important;
  }

  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a:hover,
  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.active > a,
  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-ancestor > a,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a:hover,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.active > a,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-ancestor > a,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a:hover,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.active > a,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li.current-menu-ancestor > a {
    color: var(--tvn-accent) !important;
  }

  html body #header ul.header-nav-main.nav-left > li > a i.icon-angle-down {
    font-size: 11px !important;
    margin-left: 2px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  html body.page-transparent-header #header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a i.icon-angle-down,
  html body.page-template-page-transparent-header #header:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a i.icon-angle-down,
  html body #header.header.transparent:not(.stuck) .header-wrapper:not(.stuck):not(.tvn-scrolled) ul.header-nav-main.nav-left > li > a i.icon-angle-down {
    color: #ffffff !important;
  }

  html body #header ul.header-nav-main.nav-left > li:hover > a i.icon-angle-down,
  html body #header ul.header-nav-main.nav-left > li.current-dropdown > a i.icon-angle-down {
    transform: rotate(180deg) !important;
    color: var(--tvn-accent) !important;
  }

  /* Cuộn xuống: nền trắng, chữ navy — cùng cấp #header để thắng chữ trắng */
  html body #header .header-wrapper.stuck ul.header-nav-main.nav-left > li > a,
  html body #header .header-wrapper.tvn-scrolled ul.header-nav-main.nav-left > li > a,
  html body #header.stuck ul.header-nav-main.nav-left > li > a {
    color: var(--tvn-primary) !important;
  }

  html body #header .header-wrapper.stuck ul.header-nav-main.nav-left > li > a:hover,
  html body #header .header-wrapper.stuck ul.header-nav-main.nav-left > li.active > a,
  html body #header .header-wrapper.stuck ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body #header .header-wrapper.stuck ul.header-nav-main.nav-left > li.current-menu-ancestor > a,
  html body #header .header-wrapper.tvn-scrolled ul.header-nav-main.nav-left > li > a:hover,
  html body #header .header-wrapper.tvn-scrolled ul.header-nav-main.nav-left > li.active > a,
  html body #header .header-wrapper.tvn-scrolled ul.header-nav-main.nav-left > li.current-menu-item > a,
  html body #header .header-wrapper.tvn-scrolled ul.header-nav-main.nav-left > li.current-menu-ancestor > a {
    color: var(--tvn-accent) !important;
  }

  /* === LOGO TAGLINE: trắng khi header transparent at-top === */
  html body.page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline,
  html body.page-template-page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline,
  html body.page-template-page-transparent-header #header:not(.stuck) .tvn-brand-tagline,
  html body.has-transparent-header #header:not(.stuck) .tvn-brand-tagline,
  html body #header.header.transparent:not(.stuck) .tvn-brand-tagline {
    border-left-color: rgba(255, 255, 255, 0.35) !important;
  }

  html body.page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-title,
  html body.page-template-page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-title,
  html body.page-template-page-transparent-header #header:not(.stuck) .tvn-brand-tagline .tvn-tag-title,
  html body.has-transparent-header #header:not(.stuck) .tvn-brand-tagline .tvn-tag-title,
  html body #header.header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-title {
    color: #FFFFFF !important;
  }

  html body.page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-sub,
  html body.page-template-page-transparent-header #header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-sub,
  html body.page-template-page-transparent-header #header:not(.stuck) .tvn-brand-tagline .tvn-tag-sub,
  html body.has-transparent-header #header:not(.stuck) .tvn-brand-tagline .tvn-tag-sub,
  html body #header.header.transparent:not(.stuck) .tvn-brand-tagline .tvn-tag-sub {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* === LOGO TAGLINE: khi sticky/scrolled → về màu gốc (navy + cam) === */
  html body #header .header-wrapper.stuck .tvn-brand-tagline,
  html body #header .header-wrapper.tvn-scrolled .tvn-brand-tagline,
  html body #header.stuck .tvn-brand-tagline {
    border-left-color: var(--tvn-border) !important;
  }

  html body #header .header-wrapper.stuck .tvn-brand-tagline .tvn-tag-title,
  html body #header .header-wrapper.tvn-scrolled .tvn-brand-tagline .tvn-tag-title,
  html body #header.stuck .tvn-brand-tagline .tvn-tag-title {
    color: var(--tvn-primary) !important;
  }

  html body #header .header-wrapper.stuck .tvn-brand-tagline .tvn-tag-sub,
  html body #header .header-wrapper.tvn-scrolled .tvn-brand-tagline .tvn-tag-sub,
  html body #header.stuck .tvn-brand-tagline .tvn-tag-sub {
    color: var(--tvn-accent) !important;
  }

  /* Nút Liên hệ ghim góc phải header */
  html body #header ul.header-nav-main.nav-left > li#menu-item-196,
  html body #header ul.header-nav-main.nav-left > li.menu-item-196,
  html body #header ul.header-nav-main.nav-left > li:has(> a[href*="/lien-he/"]) {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  html body #header #menu-item-196 > a.nav-top-link,
  html body #header ul.header-nav-main.nav-left > li:has(> a[href*="/lien-he/"]) > a {
    background: var(--tvn-accent) !important;
    color: #FFFFFF !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 2px 10px rgba(232, 92, 4, 0.25) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  html body #header #menu-item-196 > a.nav-top-link:hover,
  html body #header ul.header-nav-main.nav-left > li:has(> a[href*="/lien-he/"]) > a:hover {
    background: #C44600 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(232, 92, 4, 0.35) !important;
  }

  @media (max-width: 1279px) {
    html body #header ul.header-nav-main.nav-left {
      gap: 18px !important;
      padding: 0 140px !important;
    }
    html body #header ul.header-nav-main.nav-left > li > a {
      font-size: 13.5px !important;
    }
  }

  /* ========================================================================
     3. MEGA MENU DROPDOWN "LĨNH VỰC" (UX BLOCK 19 — PHẲNG, TINH TẾ)
     ======================================================================== */
  /* ==========================================================================
   TVN INTERACTIVE TECH MEGA MENU (STITCH DESIGN)
   ========================================================================== */

#menu-item-191 {
  position: static !important;
}

#menu-item-191 .nav-dropdown,
#menu-item-191.has-dropdown .nav-dropdown,
#menu-item-191.has-dropdown > .sub-menu,
.nav-dropdown:has(.tvn-tech-megamenu),
.sub-menu:has(.tvn-tech-megamenu) {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  z-index: 99999 !important;
}

#menu-item-191 .nav-dropdown::after,
#menu-item-191 .nav-dropdown::before,
#menu-item-191 .sub-menu::after,
#menu-item-191 .sub-menu::before {
  display: none !important;
}

#menu-item-191:hover > .nav-dropdown,
#menu-item-191:focus-within > .nav-dropdown,
#menu-item-191.current-dropdown:hover > .nav-dropdown,
#menu-item-191:hover > .sub-menu,
#menu-item-191:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
}

#menu-item-191.active > .nav-dropdown,
#menu-item-191.current-menu-item > .nav-dropdown,
#menu-item-191.current-menu-ancestor > .nav-dropdown,
#menu-item-191.active > .sub-menu,
#menu-item-191.current-menu-item > .sub-menu,
#menu-item-191.current-menu-ancestor > .sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#menu-item-191.active:hover > .nav-dropdown,
#menu-item-191.current-menu-item:hover > .nav-dropdown,
#menu-item-191.current-menu-ancestor:hover > .nav-dropdown,
#menu-item-191.active:focus-within > .nav-dropdown,
#menu-item-191.current-menu-item:focus-within > .nav-dropdown,
#menu-item-191.current-menu-ancestor:focus-within > .nav-dropdown,
#menu-item-191.active:hover > .sub-menu,
#menu-item-191.current-menu-item:hover > .sub-menu,
#menu-item-191.current-menu-ancestor:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
}

/* MAIN INTERACTIVE TECH CONTAINER */
.tvn-tech-megamenu {
  display: flex !important;
  gap: 24px !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* LEFT NAVIGATION TABS */
.tvn-tmm-nav {
  width: 32% !important;
  min-width: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tvn-tmm-tab {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
}

.tvn-tmm-tab:hover,
.tvn-tmm-tab.is-active {
  background: linear-gradient(135deg, #FFF6F0 0%, #FFEDE2 100%) !important;
  border: 1px solid #FFD4BC !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.08) !important;
}

.tvn-tmm-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  color: #0B1F4B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.22s ease !important;
}

.tvn-tmm-tab:hover .tvn-tmm-icon,
.tvn-tmm-tab.is-active .tvn-tmm-icon {
  background: #E85C04 !important;
  color: #FFFFFF !important;
}

.tvn-tmm-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0B1F4B !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
}

.tvn-tmm-tab:hover .tvn-tmm-name,
.tvn-tmm-tab.is-active .tvn-tmm-name {
  color: #0B1F4B !important;
}

/* RIGHT PREVIEW DETAILS */
.tvn-tmm-details {
  flex-grow: 1 !important;
  position: relative !important;
  min-height: 240px !important;
}

.tvn-tmm-pane {
  display: none !important;
  grid-template-columns: 240px 1fr !important;
  gap: 20px !important;
  align-items: center !important;
  height: 100% !important;
  animation: tvnFadeIn 0.25s ease forwards !important;
}

.tvn-tmm-pane.is-active {
  display: grid !important;
}

@keyframes tvnFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tvn-tmm-preview-img {
  width: 100% !important;
  height: 230px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(11, 31, 75, 0.1) !important;
  background: #0B1F4B !important;
}

.tvn-tmm-preview-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tvn-tmm-preview-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 8px 0 !important;
}

.tvn-tmm-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #E85C04 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.01em !important;
}

.tvn-tmm-desc {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 0 18px 0 !important;
}

.tvn-tmm-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 18px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0B1F4B !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  width: fit-content !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(11, 31, 75, 0.04) !important;
}

.tvn-tmm-btn:hover {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  border-color: #0B1F4B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(11, 31, 75, 0.15) !important;
}
}


/* ==========================================================================
   4. MOBILE & TABLET RESPONSIVE HEADER (< 1024PX)
   ========================================================================== */
@media (max-width: 1023px) {
  html body #header,
  html body #masthead,
  html body .header-main,
  html body .header-wrapper,
  html body .header-wrapper.stuck,
  html body .header-wrapper.tvn-scrolled,
  html body .stuck #masthead,
  html body .stuck .header-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 8px rgba(11, 31, 75, 0.08) !important;
    position: relative !important;
    flex: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .header-wrapper.stuck,
  html body .header-wrapper.tvn-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }

  html body #header .header-inner,
  html body #header .header-inner.container,
  html body #header .header-inner.medium-logo-center,
  html body #header .header-inner.medium-logo-left,
  html body #masthead .header-inner,
  html body .header-main .header-inner,
  html body .stuck .header-inner,
  html body .header-wrapper.stuck .header-inner,
  html body .header-wrapper.tvn-scrolled .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    gap: 12px !important;
  }

  /* Ẩn menu desktop trên Mobile & Tablet < 1024px */
  html body #header .header-inner > .flex-col.hide-for-medium,
  html body #header #masthead .header-inner > .flex-col.hide-for-medium,
  html body #header .header-nav,
  html body #header ul.header-nav-main,
  html body #header ul.header-nav-main.nav-left {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Logo bên trái */
  html body #header .header-inner > .flex-col.logo,
  html body #header .header-inner.medium-logo-center > .flex-col.logo,
  html body #header .header-inner.medium-logo-left > .flex-col.logo,
  html body #header #masthead #logo,
  html body #header #logo,
  html body .stuck #logo,
  html body .stuck .header-inner > .flex-col.logo,
  html body .header-wrapper.stuck #logo,
  html body .header-wrapper.tvn-scrolled #logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  html body #header .header-inner > .flex-col.logo a,
  html body #header #logo a,
  html body .stuck #logo a,
  html body .header-wrapper.stuck #logo a,
  html body .header-wrapper.tvn-scrolled #logo a {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header #logo img,
  html body #header #logo img.header_logo,
  html body #header #logo img.header-logo,
  html body #header .header_logo,
  html body .stuck #logo img,
  html body .stuck #logo img.header_logo,
  html body .stuck #logo img.header-logo,
  html body .header-wrapper.stuck #logo img,
  html body .header-wrapper.tvn-scrolled #logo img {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cột nút Hamburger bên phải */
  html body #header .header-inner > .flex-col.show-for-medium,
  html body #header .header-inner > .flex-col.show-for-medium.flex-left,
  html body #header .header-inner > .flex-col.show-for-medium.flex-right,
  html body #header .header-inner.medium-logo-center > .flex-col.show-for-medium,
  html body #header .header-inner.medium-logo-left > .flex-col.show-for-medium,
  html body .stuck .header-inner > .flex-col.show-for-medium {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }

  html body #header .mobile-nav {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body #header .mobile-nav li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nút Hamburger hiện đại, bo góc 8px, căn đều thẳng hàng tuyệt đối với logo */
  html body #header a[data-open="#main-menu"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0B1F4B !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(11, 31, 75, 0.15) !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
  }

  html body #header a[data-open="#main-menu"]:hover,
  html body #header a[data-open="#main-menu"]:active {
    background: #E85C04 !important;
    transform: scale(0.96) !important;
  }

  html body #header a[data-open="#main-menu"] i,
  html body #header a[data-open="#main-menu"] .icon-menu {
    font-size: 18px !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
  }

  html body .tvn-brand-tagline {
    display: none !important;
  }
}

/* ==========================================================================
   ENTERPRISE MOBILE DRAWER (2026 HIGH-END POLISH - FULL POPUP FIXED)
   ========================================================================== */

/* 1. KHÓA ẨN TUYỆT ĐỐI KHI CHƯA MỞ (TRÁNH LỘ Ở CUỐI TRANG DESKTOP) */
body > #main-menu,
#wrapper > #main-menu,
.mobile-sidebar.mfp-hide:not(.mfp-content *) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2. OVERLAY MÀN MỜ TỐI PHÍA SAU KHI MỞ MENU */
.mfp-bg {
  background: rgba(11, 31, 75, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 1 !important;
}

/* 3. KHUNG POPUP CỦA FLATSOME */
.mfp-wrap.off-canvas .mfp-container {
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  text-align: left !important;
}

.mfp-wrap.off-canvas .mfp-container:before {
  display: none !important;
}

.mfp-wrap.off-canvas .mfp-content {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  width: min(320px, 86vw) !important;
  max-width: 86vw !important;
  margin: 0 !important;
  vertical-align: top !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  z-index: 1045 !important;
  box-shadow: 20px 0 60px rgba(11, 31, 75, 0.35) !important;
  overflow: hidden !important;
  border-right: 1px solid #E2E8F0 !important;
}

/* 4. MAIN MENU KHI NẰM TRONG POPUP */
.mfp-wrap .mfp-content #main-menu,
.mfp-wrap .mfp-content .mobile-sidebar {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.mfp-wrap .mfp-content .mobile-sidebar .sidebar-menu {
  background: #FFFFFF !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 5. HEADER TRÊN CÙNG TRONG DRAWER */
.tvn-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #F1F5F9 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

.tvn-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tvn-drawer-logo-badge {
  width: 36px !important;
  height: 36px !important;
  background: #0B1F4B !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(11, 31, 75, 0.18) !important;
  flex-shrink: 0 !important;
}

.tvn-drawer-logo-badge::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #E85C04 !important;
}

.tvn-drawer-logo-text {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding-bottom: 2px !important;
}

.tvn-drawer-titles {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.tvn-drawer-company {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  letter-spacing: -0.01em !important;
}

.tvn-drawer-sub {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #E85C04 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-top: 1px !important;
}

.tvn-drawer-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.tvn-drawer-close:hover,
.tvn-drawer-close:active {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  border-color: #E85C04 !important;
}

/* 6. ẨN NÚT X MẶC ĐỊNH & MEGA MENU DESKTOP */
.mfp-wrap.off-canvas .mfp-close {
  display: none !important;
}

.mfp-wrap .tvn-tech-megamenu,
.mfp-wrap .nav-dropdown,
.mfp-wrap .header-search-form,
.mfp-wrap .header-search-form-wrapper,
.mfp-wrap .header-newsletter-item,
.mfp-wrap .header-social-icons,
.mfp-wrap .html.header-social-icons,
.mfp-wrap .element-error,
.mfp-wrap li:has(> a.element-error) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* 7. DANH SÁCH MENU DỌC (CARD NAVIGATION) */
.mfp-wrap .nav-sidebar {
  padding: 12px 14px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.mfp-wrap .nav-sidebar > li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mfp-wrap .nav-sidebar > li > a {
  color: #0B1F4B !important;
  background: #F8FAFC !important;
  border: 1px solid #EDF2F7 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.mfp-wrap .nav-sidebar > li > a:hover,
.mfp-wrap .nav-sidebar > li.active > a,
.mfp-wrap .nav-sidebar > li.current-menu-item > a {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  border-color: #0B1F4B !important;
  box-shadow: 0 4px 12px rgba(11, 31, 75, 0.15) !important;
}

.mfp-wrap .nav-sidebar > li:has(> a[href*="/lien-he/"]),
.mfp-wrap .nav-sidebar > li.menu-item-196 {
  display: none !important;
}

.mfp-wrap .nav-sidebar > li button.toggle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #E2E8F0 !important;
  border: none !important;
  color: #0B1F4B !important;
  margin-right: 2px !important;
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease !important;
}

.mfp-wrap .nav-sidebar > li.active button.toggle {
  transform: rotate(180deg) !important;
  background: #E85C04 !important;
  color: #FFFFFF !important;
}

.mfp-wrap .nav-sidebar .sub-menu {
  background: #F1F5F9 !important;
  border-radius: 8px !important;
  margin: 4px 0 4px 6px !important;
  padding: 6px 4px !important;
  border-left: 3px solid #E85C04 !important;
  list-style: none !important;
}

.mfp-wrap .nav-sidebar .sub-menu li a {
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  text-transform: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.15s ease !important;
}

.mfp-wrap .nav-sidebar .sub-menu li a:hover,
.mfp-wrap .nav-sidebar .sub-menu li.current-menu-item a {
  color: #E85C04 !important;
  background: #FFFFFF !important;
  padding-left: 16px !important;
}

/* 8. FOOTER CHÂN DRAWER: HOTLINE & NÚT BÁO GIÁ CAM */
.tvn-drawer-footer {
  margin-top: auto !important;
  padding: 14px 14px 20px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tvn-drawer-contact-card {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(11, 31, 75, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tvn-drawer-hotline-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.tvn-drawer-hotline-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: rgba(232, 92, 4, 0.1) !important;
  color: #E85C04 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.tvn-drawer-hotline-info {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.tvn-drawer-hotline-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.tvn-drawer-hotline-number {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
}

.tvn-drawer-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-top: 6px !important;
  border-top: 1px dashed #E2E8F0 !important;
}

.tvn-drawer-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  color: #475569 !important;
}

.tvn-drawer-meta-item svg {
  color: #E85C04 !important;
  flex-shrink: 0 !important;
}

.tvn-drawer-meta-item a {
  color: #475569 !important;
  text-decoration: none !important;
}

.tvn-drawer-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #E85C04 0%, #FF6B1A 100%) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 11px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(232, 92, 4, 0.25) !important;
  transition: all 0.2s ease !important;
}

.tvn-drawer-cta-btn:hover,
.tvn-drawer-cta-btn:active {
  background: #0B1F4B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(11, 31, 75, 0.25) !important;
}

.tvn-drawer-copyright {
  text-align: center !important;
  font-size: 10px !important;
  color: #94A3B8 !important;
  margin-top: 2px !important;
}

/* ==========================================================================
   5. HỆ THỐNG RESPONSIVE GRID CHUẨN DOANH NGHIỆP (1 - 2 CARDS TRÊN MOBILE)
   ========================================================================== */
.tvn-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.tvn-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.tvn-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.tvn-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.tvn-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .tvn-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .tvn-grid-4,
  .tvn-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .tvn-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* Mobile (< 768px): Tối đa 1 - 2 Card/Hàng */
@media (max-width: 767px) {
  .tvn-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .tvn-grid-5 > *:last-child:nth-child(odd) {
    grid-column: span 2 !important;
  }

  .tvn-grid-4,
  .tvn-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .tvn-grid-3,
  .tvn-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .tvn-value,
  .tvn-card {
    padding: 16px 14px !important;
    min-width: 0 !important;
  }

  .tvn-project-thumb {
    flex-basis: 180px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .tvn-project-body,
  .tvn-project-content {
    padding: 16px !important;
  }

  /* Form liên hệ mobile */
  form div[style*="grid-template-columns"],
  .contact-form div[style*="grid-template-columns"],
  .wpcf7 div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Màn hình nhỏ (< 480px): 1 Card/Hàng cho các card chi tiết */
@media (max-width: 479px) {
  .tvn-grid-6,
  .tvn-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   6. TRIỆT TIÊU DẤU MŨI TÊN TAM GIÁC & PSEUDO-ELEMENTS GÂY LỆCH
   ========================================================================== */
html body:not(.wp-admin) #header li.has-dropdown::after,
html body:not(.wp-admin) #header li.has-dropdown::before,
html body:not(.wp-admin) #header li.current-dropdown::after,
html body:not(.wp-admin) #header li.current-dropdown::before,
html body:not(.wp-admin) #header #menu-item-191::after,
html body:not(.wp-admin) #header #menu-item-191::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  content: none !important;
  border: none !important;
}

/* ==========================================================================
   7. CARD & NỘI DUNG TỔNG THỂ (PHẲNG, SẠCH SẼ, KHÔNG HIỆU ỨNG NHẢY)
   ========================================================================== */
.tvn-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Hàng chứa card: cột Flatsome stretch — chỉ áp dụng cho hàng dạng lưới (grid / columns đồng cấp) */
html body:not(.wp-admin) .row:has(.tvn-project-card):not(:has(.tvn-contact-stack)),
html body:not(.wp-admin) .row:has(.tvn-value):not(:has(.tvn-contact-stack)) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
html body:not(.wp-admin) .row:has(.tvn-project-card):not(:has(.tvn-contact-stack)) > .col,
html body:not(.wp-admin) .row:has(.tvn-value):not(:has(.tvn-contact-stack)) > .col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
html body:not(.wp-admin) .row:has(.tvn-project-card):not(:has(.tvn-contact-stack)) > .col > .col-inner,
html body:not(.wp-admin) .row:has(.tvn-value):not(:has(.tvn-contact-stack)) > .col > .col-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: 100% !important;
}

.tvn-project-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: var(--tvn-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.tvn-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: var(--tvn-radius) !important;
  padding: 24px 22px 22px !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.tvn-project-card:hover,
.tvn-card:hover {
  border-color: var(--tvn-accent) !important;
  box-shadow: var(--tvn-shadow-md) !important;
}
.tvn-card > .tvn-kicker {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;
}
.tvn-card > h3 {
  flex: 0 0 auto !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--tvn-primary) !important;
  margin: 0 0 10px !important;
  min-height: calc(1.35em * 2) !important;
  text-wrap: balance;
}
.tvn-card > .tvn-meta,
.tvn-card > .tvn-body {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.tvn-project-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 190px !important;
  max-height: none !important;
  overflow: hidden !important;
  background: #071533 !important;
  border-radius: 8px 8px 0 0 !important;
}
.tvn-thumb-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.tvn-project-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.tvn-project-card:hover .tvn-project-thumb img {
  transform: scale(1.05) !important;
}
.tvn-project-thumb .tvn-project-badge,
.tvn-project-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(7, 21, 54, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  line-height: 1.2 !important;
}
.tvn-project-thumb .tvn-project-tag,
.tvn-project-tag {
  display: none !important;
}

.tvn-project-content {
  padding: 22px 20px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  background: #FFFFFF !important;
  border-radius: 0 0 8px 8px !important;
  box-sizing: border-box !important;
}
.tvn-card-kicker {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #E85C04 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}
.tvn-card-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  line-height: 1.35 !important;
  margin: 0 0 10px 0 !important;
}
.tvn-card-title a {
  color: #0B1F4B !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.tvn-card-title a:hover {
  color: #E85C04 !important;
}
.tvn-card-desc {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 0 14px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}
.tvn-card-scope {
  font-size: 12.5px !important;
  color: #1E293B !important;
  line-height: 1.45 !important;
  background: #F8FAFC !important;
  border-left: 3px solid #E85C04 !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  margin-top: auto !important;
  margin-bottom: 14px !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}
.tvn-scope-label {
  font-weight: 700 !important;
  color: #0B1F4B !important;
}
.tvn-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #E85C04 !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: transform 0.2s ease !important;
  margin-top: 2px !important;
}
.tvn-card-link:hover {
  color: #CC4E00 !important;
  transform: translateX(3px) !important;
}

.tvn-value {
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: var(--tvn-radius) !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.tvn-value:hover {
  border-color: var(--tvn-accent) !important;
  box-shadow: var(--tvn-shadow-md) !important;
}

/* ==========================================================================
   8. ADMIN BAR FRONTEND — không đụng #adminmenu / dashicons global
   ========================================================================== */
#wpadminbar,
#wpadminbar * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
  font-family: dashicons !important;
  font-style: normal !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html body:not(.wp-admin) #header [class^="icon-"],
html body:not(.wp-admin) #header [class*=" icon-"],
html body:not(.wp-admin) #main-menu [class^="icon-"],
html body:not(.wp-admin) #main-menu [class*=" icon-"] {
  font-family: "fl-icons" !important;
}

/* ==========================================================================
   10. ẨN PHẦN TỬ FLATSOME KHÔNG DÙNG + FULLWIDTH
   ========================================================================== */
html body:not(.wp-admin) .header-top,
html body:not(.wp-admin) #top-bar,
html body:not(.wp-admin) .top-bar-nav,
html body:not(.wp-admin) .html_topbar_left,
html body:not(.wp-admin) .html_topbar_right,
html body:not(.wp-admin) .header-search,
html body:not(.wp-admin) .header-search-form,
html body:not(.wp-admin) .header-search-dropdown,
html body:not(.wp-admin) .cart-item,
html body:not(.wp-admin) .account-item,
html body:not(.wp-admin) .header-cart-icon,
html body:not(.wp-admin) .header-newsletter-item,
html body:not(.wp-admin) .header-social-icons,
html body:not(.wp-admin) .widget_shopping_cart,
html body:not(.wp-admin) .absolute-footer,
html body:not(.wp-admin) #footer .absolute-footer,
html body:not(.wp-admin) #footer .footer-1,
html body:not(.wp-admin) #footer .footer-2,
html body:not(.wp-admin) #footer .footer-widgets,
html body:not(.wp-admin) .footer-widgets,
html body:not(.wp-admin) .block-edit-link,
html body:not(.wp-admin) .ux-editor-link {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
#footer {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.page-title {
  display: none !important;
}

/* /gioi-thieu/ — khối Lời cảm ơn: chừa khoảng dưới header sticky */
body.page-id-41 .section:has(.tvn-card[style*="max-width:880px"]) {
  padding-top: 128px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 1023px) {
  body.page-id-41 .section:has(.tvn-card[style*="max-width:880px"]) {
    padding-top: 108px !important;
    padding-bottom: 72px !important;
  }
}
.page-transparent-header #content,
.page-full-width #content,
#content.page-wrapper,
body.page-id-46 #content,
body.page-id-46 #main,
body.parent-pageid-46 #content,
body.parent-pageid-46 #main {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* /du-an/ và trang con: section/row full viewport, không kẹt container 1080px */
body.page-id-46 #content > .banner,
body.page-id-46 #content > .section,
body.page-id-46 .banner.has-hover,
body.parent-pageid-46 #content > .banner,
body.parent-pageid-46 #content > .section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
}
body.page-id-46 .section-content,
body.page-id-46 .section-content > .row,
body.parent-pageid-46 .section-content,
body.parent-pageid-46 .section-content > .row {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
body.page-id-46 .banner-bg,
body.page-id-46 .banner-inner,
body.parent-pageid-46 .banner-bg,
body.parent-pageid-46 .banner-inner {
  width: 100% !important;
  max-width: 100% !important;
}
#wrapper,
#main,
#content,
.page-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   11. TYPOGRAPHY TRANG (tvn-h1 / h2 / h3 / kicker / lead / body)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.tvn-h1, .tvn-h2, .tvn-h3, .tvn-h4,
.entry-title {
  font-family: var(--tvn-font-display, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  color: var(--tvn-primary, #0B1F4B) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Light Background Kicker */
.tvn-kicker {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #E85C04 !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Headings Base */
.tvn-h1,
h1.tvn-h1,
h2.tvn-h1,
.entry-title {
  font-size: clamp(26px, 4vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #0B1F4B !important;
  margin: 0 0 14px !important;
}

.tvn-h2,
h2.tvn-h2 {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.015em !important;
  color: #0B1F4B !important;
  margin: 0 0 12px !important;
}

.tvn-h3,
h3.tvn-h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: #0B1F4B !important;
  margin: 0 0 10px !important;
}

/* --- DARK SECTION & BANNER HIGH-CONTRAST TYPOGRAPHY SYSTEM --- */
.banner .tvn-h1,
.banner h1.tvn-h1,
.banner h2.tvn-h1,
.banner h1,
.banner h2,
.banner h3,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark .tvn-h1,
.dark .tvn-h2,
.dark .tvn-h3,
.dark .tvn-h4,
.section.dark h1,
.section.dark h2,
.section.dark h3,
.section.dark h4,
.section.dark .tvn-h1,
.section.dark .tvn-h2,
.section.dark .tvn-h3,
.section.dark .tvn-h4,
.tvn-cta-banner h1,
.tvn-cta-banner h2,
.tvn-cta-banner h3,
.tvn-cta-banner .tvn-h1,
.tvn-cta-banner .tvn-h2,
.tvn-footer-v2 h1,
.tvn-footer-v2 h2,
.tvn-footer-v2 h3,
.tvn-footer-v2 h4,
#block-135 h1,
#block-135 h2,
#block-135 h3,
#block-135 h4 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7) !important;
}

.banner .tvn-kicker,
.dark .tvn-kicker,
.section.dark .tvn-kicker,
.tvn-cta-banner .tvn-kicker,
.tvn-footer-v2 .tvn-kicker,
#block-135 .tvn-kicker {
  color: #FFA466 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
}

.banner .tvn-lead,
.dark .tvn-lead,
.section.dark .tvn-lead,
.tvn-cta-banner .tvn-lead {
  color: #F8FAFC !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

.dark p,
.dark span,
.dark li,
.section.dark p,
.section.dark span,
.section.dark li,
.tvn-cta-banner p,
.tvn-cta-banner span,
.tvn-footer-v2 p,
.tvn-footer-v2 span {
  color: #E2E8F0 !important;
}

.dark strong,
.dark b,
.section.dark strong,
.section.dark b,
.tvn-cta-banner strong,
.tvn-footer-v2 strong {
  color: #FFFFFF !important;
}

.dark a:not(.button),
.section.dark a:not(.button),
.tvn-cta-banner a:not(.button) {
  color: #FFFFFF !important;
}

.dark a:not(.button):hover,
.section.dark a:not(.button):hover,
.tvn-cta-banner a:not(.button):hover {
  color: #FFA466 !important;
}

/* Light Background Content System */
.tvn-lead {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  max-width: 36em;
  margin: 0 0 20px !important;
}

.tvn-body {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin: 0 0 12px !important;
}

.tvn-meta,
.tvn-note,
.tvn-nb-note,
.tvn-eq-note {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.tvn-head {
  text-align: center !important;
  max-width: 42em;
  margin: 0 auto 36px !important;
}

.tvn-head .tvn-body,
.tvn-head .tvn-lead {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 549px) {
  .tvn-h1,
  h1.tvn-h1,
  .banner .tvn-h1 {
    font-size: 22px !important;
    line-height: 1.28 !important;
  }
  .tvn-lead,
  .banner p.tvn-lead {
    font-size: 14px !important;
  }
  .tvn-h2 {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   12. NÚT
   ========================================================================== */
a.button.tvn-btn-primary,
.button.tvn-btn-primary,
.tvn-btn-primary {
  background: var(--tvn-accent) !important;
  background-color: var(--tvn-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--tvn-accent) !important;
  border-radius: var(--tvn-radius) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
a.button.tvn-btn-primary:hover,
.tvn-btn-primary:hover {
  background: #d45203 !important;
  border-color: #d45203 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
a.button.tvn-btn-primary:active,
.tvn-btn-primary:active,
.tvn-btn-navy:active,
.tvn-btn-ghost:active {
  transform: translateY(1px) scale(0.98);
}
a.button.tvn-btn-navy,
.button.tvn-btn-navy,
.tvn-btn-navy {
  background: var(--tvn-primary) !important;
  background-color: var(--tvn-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--tvn-primary) !important;
  border-radius: var(--tvn-radius) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.tvn-btn-navy:hover {
  background: #071533 !important;
  color: #ffffff !important;
}
a.button.tvn-btn-ghost,
.button.tvn-btn-ghost,
.tvn-btn-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--tvn-radius) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.tvn-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}
.banner .tvn-btn-ghost,
.dark .tvn-btn-ghost,
.section.dark .tvn-btn-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   13. STATS / VALUE / MARQUEE / PARTNER
   ========================================================================== */
.tvn-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--tvn-border);
  border-bottom: 1px solid var(--tvn-border);
}
.tvn-stat-cell {
  text-align: center !important;
  padding: 28px 12px !important;
  border-right: 1px solid var(--tvn-border);
}
.tvn-stat-cell:last-child {
  border-right: 0;
}
.tvn-stat-cell b {
  display: block !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--tvn-primary) !important;
  line-height: 1.1 !important;
  margin: 0 0 6px !important;
}
.tvn-stat-cell span {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tvn-text-muted) !important;
}
.tvn-value {
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: var(--tvn-radius) !important;
  padding: 22px 18px !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.tvn-value:hover {
  transform: translateY(-3px) !important;
  border-color: var(--tvn-accent) !important;
  box-shadow: var(--tvn-shadow-md) !important;
}
.tvn-value h3 {
  color: var(--tvn-primary) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}
.tvn-value .tvn-body {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* Table Style Chuẩn Doanh Nghiệp Toàn Trang */
.tvn-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: var(--tvn-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  margin-top: 16px !important;
}

table,
.tvn-table,
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.04) !important;
}

table tr,
.tvn-table tr,
.entry-content table tr {
  border-bottom: 1px solid #F1F5F9 !important;
}

table tr:last-child,
.tvn-table tr:last-child,
.entry-content table tr:last-child {
  border-bottom: none !important;
}

table th,
.tvn-table th,
.entry-content table th {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  background: #F8FAFC !important;
  border-right: 1px solid #F1F5F9 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  vertical-align: middle !important;
}

table td,
.tvn-table td,
.entry-content table td {
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  vertical-align: middle !important;
}
.tvn-marquee-wrapper {
  overflow: hidden !important;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.tvn-marquee-row {
  overflow: hidden !important;
  margin: 8px 0 !important;
}
.tvn-marquee-track {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
  animation: tvn-marquee 42s linear infinite;
}
.tvn-marquee-right .tvn-marquee-track {
  animation-direction: reverse;
}
.tvn-marquee-wrapper:hover .tvn-marquee-track {
  animation-play-state: paused;
}
@keyframes tvn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tvn-partner-pill,
.tvn-partner-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 18px !important;
  border: 1px solid var(--tvn-border) !important;
  background: #ffffff !important;
  color: var(--tvn-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
}
.tvn-partner-pill.highlight {
  border-color: var(--tvn-accent) !important;
  color: var(--tvn-accent) !important;
}
@media (prefers-reduced-motion: reduce) {
  .tvn-marquee-track {
    animation: none !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center !important;
  }
}
@media (max-width: 849px) {
  .tvn-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .tvn-stat-cell:nth-child(odd) {
    border-right: 1px solid var(--tvn-border);
  }
  .tvn-stat-cell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--tvn-border);
  }
}

/* ==========================================================================
   14. CTA / CONTACT / FOOTER SYSTEM (HIGH CONTRAST & RESPONSIVE)
   ========================================================================== */
html body .tvn-cta-banner,
html body #block-24,
html body [id*="block-24"] {
  background: linear-gradient(135deg, #0A2558 0%, #0B1F4B 50%, #153D8A 100%) !important;
  border-top: 4px solid #E85C04 !important;
  padding: 56px 20px !important;
}

html body .tvn-cta-banner .tvn-kicker {
  color: #FFA466 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

html body .tvn-cta-banner h2,
html body .tvn-cta-banner .tvn-h1,
html body .tvn-cta-banner .tvn-h2 {
  color: #FFFFFF !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

html body .tvn-cta-banner .tvn-lead {
  color: #F8FAFC !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  max-width: 600px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* CTA Buttons */
html body .tvn-cta-banner .button.primary,
html body .tvn-cta-banner .tvn-btn-primary {
  background-color: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.35) !important;
  transition: all 0.2s ease !important;
}

html body .tvn-cta-banner .button.primary:hover,
html body .tvn-cta-banner .tvn-btn-primary:hover {
  background-color: #FF6B1A !important;
  border-color: #FF6B1A !important;
  transform: translateY(-2px) !important;
}

html body .tvn-cta-banner .button.white.is-outline,
html body .tvn-cta-banner .tvn-btn-ghost {
  background: transparent !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

html body .tvn-cta-banner .button.white.is-outline:hover,
html body .tvn-cta-banner .tvn-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

html body .tvn-cta-banner .button span {
  color: #FFFFFF !important;
}

/* CTA Contact Card */
html body .tvn-contact-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

html body .tvn-contact-item + .tvn-contact-item {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .tvn-contact-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #FFA466 !important;
  margin-bottom: 6px !important;
}

html body .tvn-contact-val {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  line-height: 1.4 !important;
}

html body .tvn-contact-val.hotline,
html body .tvn-contact-val.hotline a {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

html body .tvn-contact-val a:hover {
  color: #FFA466 !important;
}

/* Responsive Grid Anti-Overlap Rules */
@media (min-width: 992px) {
  html body .tvn-cta-banner .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  html body .tvn-cta-banner .row > .col:first-child {
    flex: 0 0 58% !important;
    max-width: 58% !important;
    width: 58% !important;
  }
  html body .tvn-cta-banner .row > .col:last-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
    width: 38% !important;
  }
}

@media (max-width: 991px) {
  html body .tvn-cta-banner .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  html body .tvn-cta-banner .row > .col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
  }
  html body .tvn-contact-card {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   UNIVERSAL HERO BANNER & TRANSPARENT HEADER STANDARDIZATION
   ========================================================================== */

/* 1. Universal Hero Banner Text Centering across all pages */
.page-template-page-transparent-header .ux_banner,
.page-transparent-header .ux_banner {
  min-height: 440px !important;
}

.page-template-page-transparent-header .ux_banner .text-box,
.page-transparent-header .ux_banner .text-box {
  width: 75% !important;
  max-width: 860px !important;
}

@media (max-width: 767px) {
  .page-template-page-transparent-header .ux_banner,
  .page-transparent-header .ux_banner {
    min-height: 340px !important;
  }
  .page-template-page-transparent-header .ux_banner .text-box,
  .page-transparent-header .ux_banner .text-box {
    width: 92% !important;
  }
}

/* CHỮ HERO BANNER TOÀN BỘ TRANG: TRẮNG SÁNG & CAM NỔI BẬT */
.page-template-page-transparent-header .ux_banner h1,
.page-template-page-transparent-header .ux_banner .tvn-h1,
.page-transparent-header .ux_banner h1,
.page-transparent-header .ux_banner .tvn-h1 {
  color: #FFFFFF !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.page-template-page-transparent-header .ux_banner .tvn-kicker,
.page-transparent-header .ux_banner .tvn-kicker {
  color: #FFB074 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

.page-template-page-transparent-header .ux_banner .tvn-lead,
.page-template-page-transparent-header .ux_banner p:not(.tvn-kicker),
.page-transparent-header .ux_banner .tvn-lead,
.page-transparent-header .ux_banner p:not(.tvn-kicker) {
  color: #E2E8F0 !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.page-template-page-transparent-header .ux_banner strong,
.page-transparent-header .ux_banner strong {
  color: #FFFFFF !important;
}

/* ==========================================================================
   TVN STITCH DESIGN SYSTEM - MODERN ELEGANCE CONTACT PAGE
   ========================================================================== */

.tvn-stitch-section {
  background: #0B1F4B !important;
  background-image: radial-gradient(circle at 10% 20%, rgba(232, 92, 4, 0.06) 0%, transparent 40%),
                    linear-gradient(180deg, #0B1F4B 0%, #06132D 100%) !important;
  padding: 40px 0 90px !important;
  position: relative !important;
}

.tvn-stitch-left {
  color: #FFFFFF !important;
  padding: 10px 20px 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.tvn-stitch-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

.tvn-stitch-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E2E8F0 !important;
  transition: all 0.3s ease !important;
}

.tvn-stitch-item:hover .tvn-stitch-icon {
  border-color: #E85C04 !important;
  background: rgba(232, 92, 4, 0.15) !important;
  color: #FFB074 !important;
  transform: scale(1.05) !important;
}

.tvn-stitch-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  margin-bottom: 4px !important;
}

.tvn-stitch-val {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  line-height: 1.45 !important;
}

.tvn-stitch-val.hotline-num {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
}

.tvn-stitch-val-sub {
  font-size: 12.5px !important;
  color: #94A3B8 !important;
  margin-top: 2px !important;
}

.tvn-stitch-val a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.tvn-stitch-val a:hover {
  color: #FFB074 !important;
}

.tvn-stitch-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
  max-width: 360px !important;
}

.tvn-stitch-btn-call {
  width: 100% !important;
  height: 46px !important;
  background: #E85C04 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.3) !important;
  transition: all 0.25s ease !important;
}

.tvn-stitch-btn-call:hover {
  background: #D04F00 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(232, 92, 4, 0.45) !important;
}

.tvn-stitch-btn-zalo {
  width: 100% !important;
  height: 46px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.tvn-stitch-btn-zalo:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

/* RIGHT COLUMN: FLOATING WHITE CARD OVERLAP */
.tvn-stitch-card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  padding: 36px 32px 32px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  margin-top: -82px !important;
  position: relative !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}

.tvn-stitch-card-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.01em !important;
}

.tvn-stitch-form-group {
  margin-bottom: 14px !important;
}

.tvn-stitch-form-group label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}

.tvn-stitch-form-group input,
.tvn-stitch-form-group select,
.tvn-stitch-form-group textarea {
  width: 100% !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  color: #0F172A !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.tvn-stitch-form-group input:focus,
.tvn-stitch-form-group select:focus,
.tvn-stitch-form-group textarea:focus {
  background: #FFFFFF !important;
  border-color: #E85C04 !important;
  box-shadow: 0 0 0 3px rgba(232, 92, 4, 0.12) !important;
}

.tvn-stitch-submit-btn {
  width: 100% !important;
  height: 48px !important;
  background: #E85C04 !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 6px 20px rgba(232, 92, 4, 0.35) !important;
  transition: all 0.25s ease !important;
  margin-top: 16px !important;
}

.tvn-stitch-submit-btn:hover {
  background: #D04F00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(232, 92, 4, 0.45) !important;
}

.tvn-stitch-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  font-size: 11.5px !important;
  color: #64748B !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

@media (max-width: 850px) {
  .tvn-stitch-card {
    margin-top: 0px !important;
    padding: 24px 20px !important;
  }
  .tvn-stitch-left {
    padding: 10px 0 30px !important;
  }
  .tvn-stitch-actions {
    max-width: 100% !important;
  }
}


/* ==========================================================================
   17. TVN NEWS HUB & SINGLE POSTS (2026 ENTERPRISE ARCHITECTURE DESIGN)
   ========================================================================== */

/* 1. News Header & Filter Tabs */
html body .tvn-news-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 36px auto 40px auto !important;
  padding: 6px !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 50px !important;
  max-width: fit-content !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.04) !important;
}

html body .tvn-news-tabs a {
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  background: transparent !important;
}

html body .tvn-news-tabs a em {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(11, 31, 75, 0.08) !important;
  color: #0B1F4B !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

html body .tvn-news-tabs a:hover {
  color: #0B1F4B !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

html body .tvn-news-tabs a.is-active,
html body .tvn-news-tabs a[aria-current="page"] {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(11, 31, 75, 0.25) !important;
}

html body .tvn-news-tabs a.is-active em,
html body .tvn-news-tabs a[aria-current="page"] em {
  background: #E85C04 !important;
  color: #FFFFFF !important;
}

/* 2. News Grid (3 Columns Desktop, 2 Tablet, 1 Mobile) */
html body #tvn-news-grid,
html body .tvn-news-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin: 0 auto 48px auto !important;
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1023px) {
  html body #tvn-news-grid,
  html body .tvn-news-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  html body .tvn-news-tabs {
    border-radius: 14px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  html body #tvn-news-grid,
  html body .tvn-news-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* 3. News Card */
html body .tvn-news-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(11, 31, 75, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  height: 100% !important;
}

html body .tvn-news-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(11, 31, 75, 0.12) !important;
  border-color: #CBD5E1 !important;
}

/* 4. News Thumbnail */
html body .tvn-news-thumb {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  display: block !important;
  background: #0B1F4B !important;
  text-decoration: none !important;
}

html body .tvn-news-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .tvn-news-card:hover .tvn-news-thumb img {
  transform: scale(1.06) !important;
}

/* 5. Date Badge on Thumbnail */
html body .tvn-news-date {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  background: rgba(11, 31, 75, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  text-align: center !important;
  line-height: 1.1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

html body .tvn-news-date b {
  font-size: 16px !important;
  font-weight: 800 !important;
  display: block !important;
  color: #FFFFFF !important;
}

html body .tvn-news-date span {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #FF6B1A !important;
  letter-spacing: 0.5px !important;
}

/* 6. News Body Content */
html body .tvn-news-body {
  padding: 20px 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #FFFFFF !important;
}

html body .tvn-news-cat {
  display: inline-block !important;
  align-self: flex-start !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #E85C04 !important;
  background: rgba(232, 92, 4, 0.08) !important;
  border: 1px solid rgba(232, 92, 4, 0.2) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
}

html body .tvn-news-body h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  color: #0B1F4B !important;
}

html body .tvn-news-body h3 a {
  color: #0B1F4B !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .tvn-news-body h3 a:hover {
  color: #E85C04 !important;
}

html body .tvn-news-body p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #64748B !important;
  margin: 0 0 18px 0 !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body .tvn-news-more {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #E85C04 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  transition: all 0.2s ease !important;
}

html body .tvn-news-more:hover {
  color: #0B1F4B !important;
  transform: translateX(3px) !important;
}

/* 7. News Pagination */
html body #tvn-news-pager,
html body .tvn-news-pager {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 36px auto 60px auto !important;
  padding: 0 !important;
}

html body .tvn-news-pager a,
html body .tvn-news-pager span {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0B1F4B !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

html body .tvn-news-pager a:hover {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  border-color: #E85C04 !important;
}

html body .tvn-news-pager span.is-current,
html body .tvn-news-pager .is-current {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  border-color: #0B1F4B !important;
  box-shadow: 0 4px 12px rgba(11, 31, 75, 0.25) !important;
}

html body .tvn-news-pager a.is-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   18. TVN 2026 MODERN EDITORIAL & LUXURY ARCHITECTURE SYSTEM
   ========================================================================== */

/* 1. Header & Navigation on Single Post (Clean White Glassmorphism) */
html body.single-post .header-wrapper,
html body.single-post header.header {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 20px rgba(11, 31, 75, 0.06) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

html body.single-post .header-nav-main > li > a {
  color: #0B1F4B !important;
  font-weight: 700 !important;
}

html body.single-post .header-nav-main > li > a:hover {
  color: #E85C04 !important;
}

/* 2. Single Post Container */
html body.single-post #content.blog-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #FFFFFF !important;
  overflow-x: hidden !important;
}

html body.single-post .article-inner {
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Light, Clean & Balanced Editorial Header */
html body.single-post .entry-header {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: calc(70px + 36px) 20px 24px 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
}

html body.single-post .entry-header-text {
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Minimalist & Elegant Breadcrumb */
html body.single-post .tvn-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 13.5px !important;
  color: #64748B !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  margin: 0 auto 18px auto !important;
  box-shadow: 0 2px 6px rgba(11, 31, 75, 0.03) !important;
}

html body.single-post .tvn-breadcrumb a {
  color: #475569 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body.single-post .tvn-breadcrumb a:hover {
  color: #E85C04 !important;
}

html body.single-post .tvn-breadcrumb .is-current {
  color: #E85C04 !important;
  font-weight: 700 !important;
  max-width: 340px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: bottom !important;
}

/* Category Pill */
html body.single-post .entry-header .entry-category {
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 auto 16px auto !important;
}

html body.single-post .entry-header .entry-category a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #E85C04 !important;
  background: rgba(232, 92, 4, 0.08) !important;
  border: 1px solid rgba(232, 92, 4, 0.25) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  margin: 0 auto !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

html body.single-post .entry-header .entry-category a:hover {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(232, 92, 4, 0.25) !important;
}

/* High-Impact Navy Title */
html body.single-post h1.entry-title {
  font-size: clamp(26px, 4vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0B1F4B !important;
  max-width: 900px !important;
  margin: 0 auto 16px auto !important;
  letter-spacing: -0.015em !important;
}

/* Post Meta */
html body.single-post .entry-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  font-size: 13.5px !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 24px !important;
}

/* Clean Featured Image (Natural Page Flow) */
html body.single-post .entry-image {
  max-width: 960px !important;
  margin: 12px auto 36px auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(11, 31, 75, 0.08) !important;
  border: 1px solid #E2E8F0 !important;
  position: relative !important;
}

html body.single-post .entry-image img {
  width: 100% !important;
  max-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. Hide Trash Theme Elements */
html body.single-post .badge.post-date,
html body.single-post .post-date,
html body.single-post .badge-outline,
html body.single-post .entry-divider,
html body.single-post .is-divider,
html body.single-post .entry-author.author-box,
html body.single-post .author-box,
html body.single-post footer.entry-meta,
html body.single-post .entry-footer,
html body.single-post .blog-share,
html body.single-post #comments {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

/* 5. Editorial Content Formatting */
html body.single-post .entry-content {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 20px 48px 20px !important;
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  box-sizing: border-box !important;
}

html body.single-post .entry-content p {
  margin-bottom: 20px !important;
  line-height: 1.85 !important;
}

html body.single-post .entry-content h2 {
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  border-left: 4px solid #E85C04 !important;
  padding-left: 14px !important;
  margin: 40px 0 16px 0 !important;
  line-height: 1.35 !important;
}

html body.single-post .entry-content h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0B1F4B !important;
  margin: 30px 0 12px 0 !important;
  line-height: 1.4 !important;
}

/* 6. High-Impact Vibrant Blue CTA & Technical Dark Footer System */
html body.single-post .html-before-comments,
html body.single-post .tvn-cta-banner,
html body.single-post .tvn-footer-v2,
html body.single-post .tvn-footer,
html body.single-post #block-135,
html body.single-post [id*="block-135"] {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  max-width: 100vw !important;
}

/* Vibrant Royal Blue Gradient CTA Banner */
html body .tvn-cta-banner,
html body.single-post .tvn-cta-banner {
  background: linear-gradient(135deg, #0A2558 0%, #0B1F4B 50%, #153D8A 100%) !important;
  padding: 56px 20px !important;
  border-top: 4px solid #E85C04 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html body .tvn-cta-banner .section-content,
html body.single-post .tvn-cta-banner .section-content {
  max-width: 1140px !important;
  margin: 0 auto !important;
}
/* ==========================================================================
   TVN LIGHT FOOTER SYSTEM (NỀN SÁNG CHỮ ĐEN/NAVY SẮC NÉT)
   ========================================================================== */
html body .tvn-footer-v2,
html body .tvn-footer,
html body #block-135,
html body [id="block-135"],
html body [id*="block-135"],
html body footer.tvn-footer-v2 {
  background-color: #F8FAFC !important;
  color: #334155 !important;
  border-top: 3px solid #E85C04 !important;
  padding: 60px 20px 28px 20px !important;
  margin-bottom: 0 !important;
}

html body .tvn-footer-v2 .section-content {
  max-width: 1140px !important;
  margin: 0 auto !important;
}

html body .tvn-ft-brand-title {
  color: #0B1F4B !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 12px !important;
}

html body .tvn-ft-heading,
html body .tvn-footer-v2 h4,
html body .tvn-footer-v2 .widget-title {
  color: #0B1F4B !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid #E85C04 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  display: inline-block !important;
}

html body .tvn-ft-desc {
  color: #475569 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 18px !important;
}

html body .tvn-ft-contact-item {
  color: #334155 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

html body .tvn-ft-contact-item svg {
  color: #E85C04 !important;
  stroke: #E85C04 !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}

html body .tvn-ft-contact-item strong {
  color: #0B1F4B !important;
  font-weight: 700 !important;
}

html body .tvn-ft-contact-item a {
  color: #0B1F4B !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .tvn-ft-contact-item a:hover {
  color: #E85C04 !important;
}

html body .tvn-ft-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body .tvn-ft-list li {
  margin-bottom: 10px !important;
}

html body .tvn-ft-list li a,
html body .tvn-footer-v2 a {
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

html body .tvn-ft-list li a:hover,
html body .tvn-footer-v2 a:hover {
  color: #E85C04 !important;
  transform: translateX(4px) !important;
  font-weight: 600 !important;
}

html body .tvn-ft-bottom {
  border-top: 1px solid #E2E8F0 !important;
  margin-top: 36px !important;
  padding-top: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

html body .tvn-ft-copy {
  color: #64748B !important;
  font-size: 13px !important;
  margin: 0 !important;
}

html body .tvn-ft-backtop {
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html body .tvn-ft-backtop:hover {
  color: #E85C04 !important;
}

/* Page Canvas Standardization */
html,
body {
  background-color: #FFFFFF !important;
}

#wrapper,
#main,
#content,
.site-content,
.page-wrapper,
.blog-wrapper,
.entry-content,
.article-inner {
  background-color: #FFFFFF !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#footer,
.footer-wrapper,
.absolute-footer,
.copyright-footer {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   20. STRATEGIC PARTNER LOGO SYSTEM (PAGE 48 & BLOCK 23)
   ========================================================================== */

/* 1. Grid on /doi-tac/ (Page 48) */
/* ==========================================================================
   PARTNER & BRAND LOGO SYSTEM (PURE HD LOGOS, NO TEXT)
   ========================================================================== */

/* 1. Partner Grid on /doi-tac/ Page */
.tvn-partner-grid-2026 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.tvn-partner-logo-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  height: 80px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.03) !important;
  transition: all 0.25s ease !important;
}

.tvn-partner-logo-card:hover {
  border-color: #E85C04 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(11, 31, 75, 0.08) !important;
}

.tvn-brand-img {
  max-height: 48px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: contrast(102%) !important;
}

/* 2. Infinite Logo Marquee Cards on Homepage (Block 23) */
.tvn-marquee-wrapper {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  padding: 10px 0 !important;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tvn-marquee-row {
  display: flex !important;
  overflow: hidden !important;
  user-select: none !important;
  margin-bottom: 14px !important;
}

.tvn-marquee-track {
  display: flex !important;
  flex-shrink: 0 !important;
  gap: 16px !important;
  align-items: center !important;
}

.tvn-marquee-left .tvn-marquee-track {
  animation: tvnMarqueeLeft 40s linear infinite !important;
}

.tvn-marquee-right .tvn-marquee-track {
  animation: tvnMarqueeRight 40s linear infinite !important;
}

.tvn-marquee-wrapper:hover .tvn-marquee-track {
  animation-play-state: paused !important;
}

@keyframes tvnMarqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes tvnMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.tvn-marquee-logo-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  height: 72px !important;
  width: 160px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(11, 31, 75, 0.03) !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.tvn-marquee-logo-card:hover {
  border-color: #E85C04 !important;
  box-shadow: 0 6px 16px rgba(11, 31, 75, 0.08) !important;
}

.tvn-marquee-logo-card img {
  max-height: 44px !important;
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

@media (max-width: 1024px) {
  .tvn-partner-grid-2026 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .tvn-partner-grid-2026 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .tvn-partner-logo-card {
    height: 68px !important;
    padding: 10px 14px !important;
  }
  .tvn-brand-img {
    max-height: 40px !important;
    max-width: 110px !important;
  }
  .tvn-marquee-logo-card {
    height: 64px !important;
    width: 130px !important;
    padding: 8px 12px !important;
  }
  .tvn-marquee-logo-card img {
    max-height: 38px !important;
    max-width: 105px !important;
  }
}

/* ==========================================================================
   13. CAPACITY PAGE SYSTEM (/nang-luc/ ENTERPRISE 2026)
   ========================================================================== */

/* Hero Banner Elements */
.tvn-nl-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(232, 92, 4, 0.15) !important;
  border: 1px solid rgba(232, 92, 4, 0.4) !important;
  color: #FFB074 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  margin-bottom: 18px !important;
}

.tvn-nl-hero-badge .tvn-dot {
  width: 8px !important;
  height: 8px !important;
  background: #E85C04 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.tvn-nl-h1 {
  color: #FFFFFF !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.tvn-nl-lead {
  color: #E2E8F0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 840px !important;
  margin: 0 auto 28px auto !important;
}

.tvn-nl-hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.tvn-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tvn-btn-primary {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  border: 1px solid #E85C04 !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.35) !important;
}

.tvn-btn-primary:hover {
  background: #C05530 !important;
  border-color: #C05530 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(232, 92, 4, 0.45) !important;
}

.tvn-btn-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.tvn-btn-outline:hover {
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

.tvn-btn-full {
  width: 100% !important;
}

/* KPI Dashboard Cards (Equal Height Grid) */
html body .row:has(.tvn-nl-kpi-card),
html body .row:has(.tvn-nl-team-card) {
  align-items: stretch !important;
}

html body .col:has(> .col-inner > .tvn-nl-kpi-card),
html body .col:has(.tvn-nl-kpi-card),
html body .col:has(> .col-inner > .tvn-nl-team-card),
html body .col:has(.tvn-nl-team-card) {
  display: flex !important;
  flex-direction: column !important;
}

html body .col:has(> .col-inner > .tvn-nl-kpi-card) > .col-inner,
html body .col:has(.tvn-nl-kpi-card) .col-inner,
html body .col:has(> .col-inner > .tvn-nl-team-card) > .col-inner,
html body .col:has(.tvn-nl-team-card) .col-inner {
  flex: 1 1 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.tvn-nl-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 28px 22px !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(11, 31, 75, 0.04) !important;
  transition: all 0.28s ease !important;
  height: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.tvn-nl-kpi-card:hover {
  transform: translateY(-4px) !important;
  border-color: #E85C04 !important;
  box-shadow: 0 12px 28px rgba(11, 31, 75, 0.08) !important;
}

.tvn-nl-kpi-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  background: rgba(232, 92, 4, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}

.tvn-nl-kpi-num {
  color: #0B1F4B !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
}

.tvn-nl-kpi-num span {
  color: #E85C04 !important;
}

.tvn-nl-kpi-title {
  color: #0B1F4B !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.35 !important;
  flex-shrink: 0 !important;
}

.tvn-nl-kpi-desc {
  color: #64748B !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Equipment Groups & Table Styling */
.tvn-nl-group-row {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 18px rgba(11, 31, 75, 0.04) !important;
}

.tvn-nl-group-badge {
  display: inline-block !important;
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
}

.tvn-nl-group-title {
  color: #0B1F4B !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
}

.tvn-nl-group-desc {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
}

.tvn-nl-feature-pills {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tvn-pill {
  background: #F1F5F9 !important;
  color: #0B1F4B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1px solid #E2E8F0 !important;
}

.tvn-nl-table-wrap {
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.02) !important;
}

.tvn-nl-table {
  width: 100% !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

.tvn-nl-table thead th {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 14px !important;
  border: none !important;
}

.tvn-nl-table tbody td {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  color: #334155 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
}

.tvn-nl-table tbody tr:nth-child(even) {
  background: #F8FAFC !important;
}

.tvn-nl-table tbody tr:hover {
  background: #FFF7ED !important;
}

.tvn-badge-qty {
  display: inline-block !important;
  background: rgba(232, 92, 4, 0.1) !important;
  color: #E85C04 !important;
  border: 1px solid rgba(232, 92, 4, 0.25) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Human Resources Team Cards */
.tvn-nl-team-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 32px 26px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(11, 31, 75, 0.04) !important;
  transition: all 0.25s ease !important;
}

.tvn-nl-team-card:hover {
  transform: translateY(-4px) !important;
  border-color: #E85C04 !important;
  box-shadow: 0 12px 28px rgba(11, 31, 75, 0.08) !important;
}

.tvn-nl-team-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 12px !important;
  background: rgba(232, 92, 4, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.tvn-nl-team-title {
  color: #0B1F4B !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

.tvn-nl-team-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tvn-nl-team-list li {
  position: relative !important;
  padding-left: 20px !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

.tvn-nl-team-list li::before {
  content: "•" !important;
  color: #E85C04 !important;
  font-size: 18px !important;
  position: absolute !important;
  left: 0 !important;
  top: -2px !important;
}

/* QA/QC & Safety HSE Points */
.tvn-nl-hse-points {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.tvn-nl-hse-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.tvn-nl-hse-icon {
  background: rgba(232, 92, 4, 0.1) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.tvn-nl-hse-box {
  background: linear-gradient(135deg, #0A2558 0%, #0B1F4B 100%) !important;
  border-radius: 16px !important;
  padding: 36px 30px !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(11, 31, 75, 0.15) !important;
  border-top: 4px solid #E85C04 !important;
}

.tvn-nl-hse-box-header h3 {
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}

.tvn-nl-hse-box-header p {
  color: #CBD5E1 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.tvn-nl-pdf-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px dashed rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 24px !important;
  color: #F8FAFC !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

@media (max-width: 767px) {
  .tvn-nl-h1 {
    font-size: 26px !important;
  }
  .tvn-nl-lead {
    font-size: 14px !important;
  }
  .tvn-nl-group-row {
    padding: 20px 16px !important;
  }
  .tvn-nl-table thead th,
  .tvn-nl-table tbody td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   14. GLOBAL HERO BANNER SYSTEM (ULTRA-HIGH CONTRAST & CLEAN 2026)
   ========================================================================== */

/* Hero Pill Badge */
.tvn-hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(232, 92, 4, 0.16) !important;
  border: 1px solid rgba(232, 92, 4, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFB074 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.tvn-hero-dot {
  width: 8px !important;
  height: 8px !important;
  background: #E85C04 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 8px rgba(232, 92, 4, 0.8) !important;
}

/* Hero Titles */
.tvn-hero-h1,
.tvn-h1 {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #FFFFFF !important;
  font-size: clamp(26px, 3.8vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 14px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Hero Lead Subtitles */
.tvn-hero-lead,
.tvn-lead {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #F1F5F9 !important;
  font-size: clamp(14px, 1.6vw, 16.5px) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  max-width: 820px !important;
  margin: 0 auto 24px auto !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Hero Actions / Buttons */
.tvn-hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.tvn-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.tvn-btn-primary {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  border: 1px solid #E85C04 !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.35) !important;
}

.tvn-btn-primary:hover {
  background: #C04E00 !important;
  border-color: #C04E00 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(232, 92, 4, 0.45) !important;
}

.tvn-btn-outline {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.tvn-btn-outline:hover {
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 767px) {
  .tvn-hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .tvn-btn {
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* Specific Banner Overlays for Consistent Readability */
.tvn-hero-banner .banner-bg img {
  filter: brightness(0.85) contrast(1.05) !important;
}

@media (max-width: 767px) {
  .tvn-hero-pill {
    font-size: 11px !important;
    padding: 5px 14px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 12px !important;
  }
  .tvn-hero-h1,
  .tvn-h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .tvn-hero-lead,
  .tvn-lead {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }
}

/* ==========================================================================
   14. GLOBAL HERO BANNER SYSTEM (ULTRA-HIGH CONTRAST & CLEAN 2026)
   ========================================================================== */
.tvn-hero-banner,
.banner.tvn-hero-banner {
  position: relative !important;
  min-height: 440px !important;
  padding-top: 440px !important;
  background-color: #071533 !important;
}

@media (max-width: 767px) {
  .tvn-hero-banner,
  .banner.tvn-hero-banner {
    min-height: 380px !important;
    padding-top: 380px !important;
  }
}

/* ==========================================================================
   15. STATS GRID SYSTEM (FOR DU-AN & SUBPAGES)
   ========================================================================== */
.tvn-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.tvn-stat-card {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 16px 14px !important;
  text-align: center !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tvn-stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(11, 31, 75, 0.08) !important;
  border-color: #E85C04 !important;
}

.tvn-stat-num {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #E85C04 !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.tvn-stat-lbl {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
}

@media (max-width: 767px) {
  .tvn-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .tvn-stat-num {
    font-size: 24px !important;
  }
  .tvn-stat-lbl {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   16. INTERACTIVE PROJECT DETAIL GALLERY & FULLSCREEN LIGHTBOX
   ========================================================================== */
.tvn-project-gallery {
  width: 100% !important;
  position: relative !important;
}

.tvn-gallery-main-wrap {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #071533 !important;
  box-shadow: 0 6px 24px rgba(11, 31, 75, 0.12) !important;
  border: 1px solid #E2E8F0 !important;
}

.tvn-gallery-main-frame {
  position: relative !important;
  width: 100% !important;
  padding-top: 60% !important; /* 16:9.6 ratio */
  cursor: pointer !important;
  overflow: hidden !important;
}

.tvn-gallery-main-frame img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease, opacity 0.3s ease !important;
  display: block !important;
}

.tvn-gallery-main-frame:hover img {
  transform: scale(1.03) !important;
}

.tvn-gallery-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  z-index: 5 !important;
}

.tvn-gallery-arrow svg {
  stroke: #0B1F4B !important;
  transition: stroke 0.2s ease !important;
}

.tvn-gallery-arrow:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(232, 92, 4, 0.45) !important;
}

.tvn-gallery-arrow:hover svg {
  stroke: #FFFFFF !important;
}

.tvn-gallery-arrow.prev {
  left: 14px !important;
}

.tvn-gallery-arrow.next {
  right: 14px !important;
}

.tvn-gallery-counter-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(11, 31, 75, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tvn-gallery-zoom-badge {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  background: rgba(11, 31, 75, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.tvn-gallery-main-frame:hover .tvn-gallery-zoom-badge {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
}

/* Gallery Section Heading (Must Keep Exact Text) */
.tvn-gallery-heading {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 22px 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tvn-gallery-heading svg {
  color: #E85C04 !important;
}

/* Thumbnails Grid */
.tvn-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.tvn-gallery-thumb {
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid #E2E8F0 !important;
  background: #071533 !important;
  aspect-ratio: 4 / 3 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tvn-gallery-thumb:hover {
  transform: translateY(-2px) !important;
  border-color: #E85C04 !important;
  box-shadow: 0 4px 12px rgba(232, 92, 4, 0.25) !important;
}

.tvn-gallery-thumb.is-active {
  border-color: #E85C04 !important;
  box-shadow: 0 0 0 2px #E85C04, 0 4px 14px rgba(232, 92, 4, 0.35) !important;
}

.tvn-gallery-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

.tvn-gallery-thumb:hover img {
  transform: scale(1.08) !important;
}

.tvn-gallery-actions {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.tvn-btn-view-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F1F5F9 !important;
  color: #0B1F4B !important;
  border: 1px solid #CBD5E1 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tvn-btn-view-all:hover {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  border-color: #0B1F4B !important;
}

/* Fullscreen Lightbox Modal */
.tvn-lightbox {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(5, 15, 35, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.3s ease !important;
}

.tvn-lightbox.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.tvn-lightbox-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important;
}

.tvn-lightbox-title {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tvn-lightbox-counter {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
}

.tvn-lightbox-close {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 20px !important;
  transition: all 0.2s ease !important;
}

.tvn-lightbox-close:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  transform: scale(1.1) !important;
}

.tvn-lightbox-body {
  position: relative !important;
  width: 90vw !important;
  height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvn-lightbox-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease !important;
}

.tvn-lightbox-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.tvn-lightbox-nav:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.tvn-lightbox-nav.prev {
  left: 20px !important;
}

.tvn-lightbox-nav.next {
  right: 20px !important;
}

@media (max-width: 767px) {
  .tvn-gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .tvn-lightbox-nav {
    width: 40px !important;
    height: 40px !important;
  }
  .tvn-lightbox-nav.prev {
    left: 8px !important;
  }
  .tvn-lightbox-nav.next {
    right: 8px !important;
  }
}



/* ==========================================================================
   15. THÔNG TIN DOANH NGHIỆP & 5 GIÁ TRỊ CỐT LÕI (CLEAN THEME CSS)
   ========================================================================== */

/* Legal Enterprise Section */
.tvn-legal-section {
  padding: 70px 0 !important;
  background-color: #F8FAFC !important;
}

.tvn-legal-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 18px rgba(11, 31, 75, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.tvn-legal-title {
  color: #0B1F4B !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
  border-bottom: 2px solid #E85C04 !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
  width: fit-content !important;
  text-transform: uppercase !important;
}

.tvn-legal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #334155 !important;
  font-size: 14.5px !important;
  line-height: 2.1 !important;
}

.tvn-legal-list li {
  margin-bottom: 4px !important;
}

.tvn-legal-list strong {
  color: #0B1F4B !important;
  font-weight: 700 !important;
}

/* 5 Core Values Grid */
.tvn-val-section {
  padding: 70px 0 !important;
  background-color: #FFFFFF !important;
}

.tvn-val-container {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

.tvn-val-row-top,
.tvn-val-row-bot {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  justify-content: center !important;
}

.tvn-val-row-top {
  margin-bottom: 20px !important;
}

.tvn-val-card {
  flex: 1 1 300px !important;
  max-width: 360px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-top: 4px solid #E85C04 !important;
  border-radius: 14px !important;
  padding: 26px 22px !important;
  box-shadow: 0 4px 18px rgba(11, 31, 75, 0.05) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.tvn-val-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(11, 31, 75, 0.12) !important;
}

.tvn-val-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.tvn-val-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: #FFF6F0 !important;
  color: #E85C04 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvn-val-num-badge {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #E85C04 !important;
  background: #FFF6F0 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

.tvn-val-h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
}

.tvn-val-desc {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Fix & Sleek styling for View Full Album Button */
button.tvn-btn-view-all,
.tvn-btn-view-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: #F8FAFC !important;
  color: #0B1F4B !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

button.tvn-btn-view-all:hover,
.tvn-btn-view-all:hover {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  border-color: #0B1F4B !important;
  box-shadow: 0 4px 12px rgba(11,31,75,0.18) !important;
  transform: translateY(-1px) !important;
}

button.tvn-btn-view-all svg,
.tvn-btn-view-all svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

button.tvn-btn-view-all br,
.tvn-btn-view-all br {
  display: none !important;
}

/* Gallery Main Display Frame - Exact fit with zero background stripe */
.tvn-gallery-main-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9.5 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 6px 24px rgba(11, 31, 75, 0.12) !important;
  background: #F1F5F9 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.tvn-gallery-main-frame img,
#tvn-main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: transform 0.4s ease, opacity 0.3s ease !important;
}

.tvn-gallery-main-frame p {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   16. FULLSCREEN LIGHTBOX MODAL (CLEAN THEME CSS 2026)
   ========================================================================== */
.tvn-lightbox {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999999 !important;
  background: rgba(5, 15, 35, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

.tvn-lightbox.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.tvn-lightbox-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 1000 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.tvn-lightbox-title {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tvn-lightbox-counter {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 12px !important;
}

.tvn-lightbox-close {
  background: #E85C04 !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.tvn-lightbox-close:hover {
  background: #C94C00 !important;
  transform: scale(1.08) !important;
}

.tvn-lightbox-body {
  position: relative !important;
  width: 90vw !important;
  height: 82vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvn-lightbox-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7) !important;
  transition: transform 0.3s ease !important;
}

.tvn-lightbox-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B1F4B !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}

.tvn-lightbox-nav:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.tvn-lightbox-nav:hover svg {
  stroke: #FFFFFF !important;
}

.tvn-lightbox-nav.prev {
  left: 24px !important;
}

.tvn-lightbox-nav.next {
  right: 24px !important;
}

@media (max-width: 767px) {
  .tvn-lightbox-nav {
    width: 42px !important;
    height: 42px !important;
  }
  .tvn-lightbox-nav.prev {
    left: 10px !important;
  }
  .tvn-lightbox-nav.next {
    right: 10px !important;
  }
}


/* ==========================================================================
   16. FULLSCREEN LIGHTBOX MODAL (NON-OVERLAPPING HEADER & CLEAN IMAGE)
   ========================================================================== */
.tvn-lightbox {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999999 !important;
  background: rgba(5, 15, 35, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 30px !important;
  box-sizing: border-box !important;
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

.tvn-lightbox.is-open {
  display: flex !important;
  opacity: 1 !important;
}

.tvn-lightbox-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 1000 !important;
  background: transparent !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}

.tvn-lightbox-title {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tvn-lightbox-counter {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 3px 12px !important;
  border-radius: 12px !important;
}

.tvn-lightbox-close {
  background: #E85C04 !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.tvn-lightbox-close:hover {
  background: #C94C00 !important;
  transform: scale(1.08) !important;
}

.tvn-lightbox-body {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tvn-lightbox-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7) !important;
  transition: transform 0.3s ease !important;
}

.tvn-lightbox-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B1F4B !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}

.tvn-lightbox-nav:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.tvn-lightbox-nav:hover svg {
  stroke: #FFFFFF !important;
}

.tvn-lightbox-nav.prev {
  left: 24px !important;
}

.tvn-lightbox-nav.next {
  right: 24px !important;
}

/* ==========================================================================
   18. PROJECT DETAIL SINGLE PAGE TEMPLATE (HERO, GALLERY, SPECS, CTA)
   ========================================================================== */
.tvn-proj-single-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 30px 20px 60px 20px !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #1E293B !important;
}

/* Top Navigation / Breadcrumb */
.tvn-proj-top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  gap: 16px !important;
}

.tvn-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.tvn-back-link:hover {
  color: #E85C04 !important;
  transform: translateX(-3px) !important;
}

.tvn-back-link svg {
  transition: transform 0.2s ease !important;
}

.tvn-back-link:hover svg {
  stroke: #E85C04 !important;
}

.tvn-breadcrumb-badge {
  background: #F1F5F9 !important;
  color: #0B1F4B !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #CBD5E1 !important;
}

/* Header Section */
.tvn-proj-header {
  margin-bottom: 28px !important;
}

.tvn-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: #E85C04 !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.tvn-proj-title {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
}

.tvn-proj-lead {
  font-size: 15.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  max-width: 900px !important;
  margin: 0 !important;
}

/* Interactive Media Gallery Showcase */
.tvn-proj-gallery-container {
  background: #071533 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(11, 31, 75, 0.15) !important;
  margin-bottom: 40px !important;
  border: 1px solid #E2E8F0 !important;
}

.tvn-gallery-hero-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9.5 !important;
  background: #0B1F4B !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.tvn-gallery-main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.tvn-gallery-hero-frame:hover .tvn-gallery-main-img {
  transform: scale(1.02) !important;
}

.tvn-hero-zoom-hint {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  background: rgba(7, 21, 51, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
  z-index: 4 !important;
}

.tvn-gallery-hero-frame:hover .tvn-hero-zoom-hint {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
}

.tvn-gallery-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #CBD5E1 !important;
  color: #0B1F4B !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.tvn-gallery-nav-btn:hover {
  background: #E85C04 !important;
  border-color: #E85C04 !important;
  color: #FFFFFF !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.tvn-gallery-nav-btn:hover svg {
  stroke: #FFFFFF !important;
}

.tvn-gallery-nav-btn.prev {
  left: 14px !important;
}

.tvn-gallery-nav-btn.next {
  right: 14px !important;
}

/* Thumbs Strip */
.tvn-gallery-thumbs-wrapper {
  padding: 12px 16px !important;
  background: #0B1F4B !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  overflow-x: auto !important;
}

.tvn-gallery-thumbs-track {
  display: flex !important;
  gap: 10px !important;
}

.tvn-thumb-card {
  position: relative !important;
  flex: 0 0 100px !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  opacity: 0.65 !important;
  transition: all 0.2s ease !important;
  background: #071533 !important;
}

.tvn-thumb-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.tvn-thumb-card:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
}

.tvn-thumb-card.is-active {
  opacity: 1 !important;
  border-color: #E85C04 !important;
  box-shadow: 0 0 12px rgba(232, 92, 4, 0.5) !important;
}

/* Project Detailed Info Grid */
.tvn-proj-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  gap: 32px !important;
  margin-bottom: 40px !important;
}

.tvn-spec-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 28px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.tvn-spec-card-title,
.tvn-desc-card-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  margin: 0 0 20px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #E2E8F0 !important;
}

.tvn-spec-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.tvn-spec-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px dashed #E2E8F0 !important;
}

.tvn-spec-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.tvn-spec-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #64748B !important;
}

.tvn-spec-value {
  font-size: 14.5px !important;
  color: #0B1F4B !important;
  line-height: 1.5 !important;
}

.tvn-desc-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 28px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.tvn-desc-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  margin-bottom: 24px !important;
}

.tvn-desc-text p {
  margin-bottom: 12px !important;
}

.tvn-highlight-box {
  background: #F0FDF4 !important;
  border: 1px solid #DCFCE7 !important;
  border-left: 4px solid #10B981 !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.tvn-hl-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #065F46 !important;
}

.tvn-hl-item svg {
  flex-shrink: 0 !important;
}

/* CTA Section */
.tvn-proj-cta {
  background: linear-gradient(135deg, #071533 0%, #0B1F4B 100%) !important;
  border-radius: 14px !important;
  padding: 32px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 25px rgba(11, 31, 75, 0.2) !important;
}

.tvn-proj-cta-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px 0 !important;
}

.tvn-proj-cta-desc {
  font-size: 14px !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
}

.tvn-proj-cta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.tvn-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.tvn-cta-btn.primary {
  background: #E85C04 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(232, 92, 4, 0.4) !important;
}

.tvn-cta-btn.primary:hover {
  background: #C94C00 !important;
  transform: translateY(-2px) !important;
}

.tvn-cta-btn.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.tvn-cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Responsive Mobile & Tablet */
@media (max-width: 850px) {
  .tvn-proj-info-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tvn-proj-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px !important;
  }
  .tvn-proj-cta-actions {
    width: 100% !important;
    flex-direction: column !important;
  }
  .tvn-cta-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .tvn-proj-title {
    font-size: 24px !important;
  }
}


/* ==========================================================================
   19. FULL-WIDTH REAL FIELD GALLERY (/hinh-anh-thuc-te/)
   ========================================================================== */
.tvn-fullwidth-gallery-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 40px 30px 80px 30px !important;
  box-sizing: border-box !important;
  background: #F8FAFC !important;
}

.tvn-gallery-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.tvn-gallery-stat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  color: #0B1F4B !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 30px !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.tvn-gallery-stat-pill strong {
  color: #E85C04 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

.tvn-gallery-hint {
  font-size: 13px !important;
  color: #64748B !important;
  font-style: italic !important;
}

.tvn-fullwidth-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.tvn-field-card {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #071533 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(11, 31, 75, 0.08) !important;
  border: 1px solid #E2E8F0 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.tvn-field-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(11, 31, 75, 0.22) !important;
  border-color: #E85C04 !important;
}

.tvn-field-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.tvn-field-card:hover img {
  transform: scale(1.06) !important;
}

.tvn-field-badge {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  background: rgba(7, 21, 51, 0.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.tvn-field-zoom-icon {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(232, 92, 4, 0.9) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transform: scale(0.8) !important;
  transition: all 0.25s ease !important;
  z-index: 2 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tvn-field-card:hover .tvn-field-zoom-icon {
  opacity: 1 !important;
  transform: scale(1) !important;
}

@media (max-width: 768px) {
  .tvn-fullwidth-gallery-wrapper {
    padding: 24px 14px 60px 14px !important;
  }
  .tvn-fullwidth-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .tvn-gallery-top-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   22. NANG-LUC PAGE ELEMENT RULES (migrated from inline <style>, fixed)
   Only Flatsome per-element IDs missing from master. Global hero/btn/typo
   rules already live in sections 11/12/14 — do NOT duplicate them here.
   ========================================================================== */

/* from inline <style> #0 */
#text-box-95311175 {
  width: 60%;
}
#text-box-95311175 .text-box-content {
  font-size: 100%;
}

/* from inline <style> #1 */
#banner-2058590313 {
  padding-top: 380px;
}
#banner-2058590313 .overlay {
  background-color: rgba(11, 31, 75, 0.84);
}
#banner-2058590313 .banner-bg img {
  object-position: 50% 45%;
}
@media (min-width:550px) {
  #banner-2058590313 {
    padding-top: 460px;
  }
}

/* from inline <style> #2 */
#section_180112217 {
  padding: 48px 0 24px;
  
  background-color: #FFFFFF;
}

/* from inline <style> #3 */
#section_1181195758 {
  padding: 60px 0 40px;
  
  background-color: #F8FAFC;
}

/* from inline <style> #4 */
#section_2129869288 {
  padding: 64px 0 48px;
  
  background-color: #FFFFFF;
}

/* from inline <style> #5 */
#section_1673111651 {
  padding: 64px 0 48px;
  
  background-color: #F8FAFC;
}

/* from inline <style> #6 */
#section_813696709 {
  padding: 48px 0;
  
  background-color: rgb(11, 31, 75);
}
@media (min-width:550px) {
  #section_813696709 {
    padding: 72px 0;
    
  }
}

/* from inline <style> #9 */
#section_394484383 {
  padding: 40px 0 20px;
  
  background-color: #F8FAFC;
}
@media (min-width:550px) {
  #section_394484383 {
    padding: 60px 0 28px;
    
  }
}

/* value-card number labels (block 21, replaces inline font-size/margin) */
.tvn-value .tvn-value-num {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}

/* ==========================================================================
   23. EQUIPMENT SECTION CENTERING + OVERFLOW GUARD (/nang-luc/ C1)
   ========================================================================== */
.tvn-capacity-real-assets {
  overflow-x: clip !important;
}
.tvn-capacity-real-assets .row {
  justify-content: center !important;
}
.tvn-capacity-real-assets .text-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   24. FOOTER COLUMN ALIGNMENT (flush-left with headings)
   Flatsome base adds margin-left to li even with list-style:none.
   ========================================================================== */
html body ul.tvn-ft-list,
html body .tvn-footer-v2 ul.tvn-ft-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body ul.tvn-ft-list li,
html body .tvn-footer-v2 ul.tvn-ft-list li,
html body .col-inner ul.tvn-ft-list li {
  list-style: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

/* ==========================================================================
   25. LIEN-HE FORM FIXES (Z1 select + Z3 zalo chat button)
   ========================================================================== */
.tvn-stitch-form-group select#tvn_hangmuc {
  line-height: 1.6 !important;
  padding: 12px 14px !important;
  height: 48px !important;
  font-size: 14px !important;
}
a.tvn-stitch-btn-chat {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #0068FF !important;
  color: #FFFFFF !important;
  border: 1px solid #0068FF !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  text-decoration: none !important;
}
a.tvn-stitch-btn-chat img {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}
a.tvn-stitch-btn-chat:hover {
  background: #0057D9 !important;
  border-color: #0057D9 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   26. PROJECT CARD EQUAL HEIGHT + BOTTOM-ALIGNED NOWRAP BUTTONS
   (.tvn-project-body lacked display:flex so margin-top:auto never worked)
   ========================================================================== */
.tvn-project-card .tvn-project-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.tvn-project-card .tvn-project-body > a.button,
.tvn-project-card .tvn-project-body > a.tvn-btn-primary {
  margin-top: auto !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   27. PROJECT SLIDER FULL-BLEED (/du-an/* carousel)
   Wrapper gets .tvn-proj-slider-full in content; images fill viewport width.
   overflow-x:clip on body absorbs the 100vw scrollbar-width overshoot.
   ========================================================================== */
html body {
  overflow-x: clip !important;
}
.tvn-proj-slider-full {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Fit-to-viewport: slider cao vừa màn hình trừ navbar (không bị che),
   ảnh cover đầy khung, focal giữa */
.tvn-proj-slider-full .slider,
.tvn-proj-slider-full .slider .flickity-viewport {
  height: calc(100vh - 90px) !important;
  height: calc(100svh - 90px) !important;
  max-height: calc(100vh - 90px) !important;
  max-height: calc(100svh - 90px) !important;
}
.tvn-proj-slider-full .slider img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}
@media (max-width: 549px) {
  .tvn-proj-slider-full .slider,
  .tvn-proj-slider-full .slider .flickity-viewport {
    height: calc(100vh - 70px) !important;
    height: calc(100svh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    max-height: calc(100svh - 70px) !important;
  }
}

/* ==========================================================================
   28. CONTAINED CARD ROWS (pages whose sections render without .container,
   e.g. /linh-vuc/ pillar + process rows)
   ========================================================================== */
.row.tvn-contain {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   29. DU-AN CARD SCOPE BOX: no line-clamp (was cutting text mid-line),
   natural height + bottom-aligned link
   ========================================================================== */
.tvn-card-scope {
  display: block !important;
}
.tvn-project-card .tvn-project-content > p:last-child {
  margin-top: auto !important;
}

/* ==========================================================================
   30. CARD BODY AIR: text was touching card edges (esp. .tvn-project-body
   which had no desktop padding at all)
   ========================================================================== */
.tvn-project-card .tvn-project-body {
  padding: 22px 24px 24px !important;
}
.tvn-project-card .tvn-project-content {
  padding: 24px 24px 26px !important;
}
@media (max-width: 549px) {
  .tvn-project-card .tvn-project-body,
  .tvn-project-card .tvn-project-content {
    padding: 18px !important;
  }
}

/* ==========================================================================
   31. TVN RECRUITMENT / CAREERS SYSTEM (/tuyen-dung/)
   Trang tuyển dụng chuẩn poster TVN: Fact band navy, 2 panel JD, lưới quyền
   lợi, khối liên hệ ứng tuyển cam/navy và dải giá trị thương hiệu.
   ========================================================================== */

/* --- 31.1 HERO ACTIONS -------------------------------------------------- */
html body .tvn-rc-hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 26px !important;
}

/* --- 31.2 FACT BAND (Số lượng / Địa điểm / Thời gian / Mức lương) ------- */
html body .tvn-rc-factband {
  background: linear-gradient(135deg, #0A2558 0%, #0B1F4B 55%, #133A82 100%) !important;
  border-top: 4px solid #E85C04 !important;
}
html body .tvn-rc-facts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}
html body .tvn-rc-facts .tvn-rc-fact {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 30px 22px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  min-width: 0 !important;
}
html body .tvn-rc-facts .tvn-rc-fact:last-child {
  border-right: 0 !important;
}
html body .tvn-rc-facts .tvn-rc-fact-ico {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: rgba(232, 92, 4, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .tvn-rc-facts .tvn-rc-fact-ico svg {
  width: 20px !important;
  height: 20px !important;
}
html body .tvn-rc-facts .tvn-rc-fact-txt {
  min-width: 0 !important;
}
html body .tvn-rc-facts .tvn-rc-fact-label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #93A6C6 !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
}
html body .tvn-rc-facts .tvn-rc-fact-val {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
html body .tvn-rc-facts .tvn-rc-fact-val.is-hl {
  font-size: 23px !important;
  font-weight: 800 !important;
  color: #FF8A3D !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
html body .tvn-rc-facts .tvn-rc-fact-sub {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #C7D3E6 !important;
  margin: 3px 0 0 !important;
  line-height: 1.45 !important;
}
@media (max-width: 1023px) {
  html body .tvn-rc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .tvn-rc-facts .tvn-rc-fact:nth-child(2n) {
    border-right: 0 !important;
  }
  html body .tvn-rc-facts .tvn-rc-fact:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
}
@media (max-width: 549px) {
  html body .tvn-rc-facts {
    grid-template-columns: 1fr !important;
  }
  html body .tvn-rc-facts .tvn-rc-fact {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    padding: 20px 4px !important;
  }
  html body .tvn-rc-facts .tvn-rc-fact:last-child {
    border-bottom: 0 !important;
  }
}

/* --- 31.3 JD PANELS (Mô tả công việc / Yêu cầu) ------------------------- */
html body .tvn-rc-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--tvn-shadow-md) !important;
  overflow: hidden !important;
  height: 100% !important;
}
html body .tvn-rc-panel .tvn-rc-panel-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 22px !important;
  background: #0B1F4B !important;
  border-bottom: 3px solid #E85C04 !important;
}
html body .tvn-rc-panel .tvn-rc-panel-ico {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #E85C04 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .tvn-rc-panel .tvn-rc-panel-ico svg {
  width: 18px !important;
  height: 18px !important;
}
html body .tvn-rc-panel .tvn-rc-panel-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
html body .tvn-rc-panel .tvn-rc-panel-body {
  padding: 8px 22px 20px !important;
}
html body ul.tvn-rc-list,
html body .tvn-rc-panel ul.tvn-rc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body ul.tvn-rc-list li {
  list-style: none !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  border-bottom: 1px dashed #E9EEF5 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}
html body ul.tvn-rc-list li:last-child {
  border-bottom: 0 !important;
}
html body ul.tvn-rc-list li svg {
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  margin-top: 3px !important;
}
html body ul.tvn-rc-list li strong {
  color: #0B1F4B !important;
  font-weight: 700 !important;
}

/* --- 31.4 BENEFIT CARDS (Quyền lợi) ------------------------------------ */
html body .tvn-rc-benefit {
  background: #FFFFFF !important;
  border: 1px solid var(--tvn-border) !important;
  border-radius: 12px !important;
  padding: 24px 22px !important;
  box-shadow: var(--tvn-shadow-sm) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}
html body .tvn-rc-benefit:hover {
  transform: translateY(-3px) !important;
  border-color: var(--tvn-accent) !important;
  box-shadow: var(--tvn-shadow-md) !important;
}
html body .tvn-rc-benefit .tvn-rc-benefit-ico {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(232, 92, 4, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .tvn-rc-benefit .tvn-rc-benefit-ico svg {
  width: 22px !important;
  height: 22px !important;
}
html body .tvn-rc-benefit h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0B1F4B !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
}
html body .tvn-rc-benefit p {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
}
@media (max-width: 549px) {
  html body .tvn-rc-benefit {
    padding: 18px 16px !important;
    gap: 13px !important;
  }
  html body .tvn-rc-benefit .tvn-rc-benefit-ico {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* --- 31.5 APPLY BLOCK (Liên hệ ứng tuyển) ------------------------------ */
html body .tvn-rc-apply {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 26px 55px -20px rgba(0, 0, 0, 0.55) !important;
}
html body .tvn-rc-apply .tvn-rc-apply-left {
  background: linear-gradient(150deg, #F26A0F 0%, #E85C04 60%, #C94D02 100%) !important;
  padding: 38px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html body .tvn-rc-applysection {
  background: linear-gradient(135deg, #0A2558 0%, #0B1F4B 55%, #133A82 100%) !important;
}
html body .tvn-rc-apply .tvn-rc-apply-right {
  background: #08183A !important;
  padding: 32px 34px !important;
  min-width: 0 !important;
}
html body .tvn-rc-apply .tvn-rc-apply-label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}
html body .tvn-rc-apply .tvn-rc-apply-name {
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}
html body .tvn-rc-apply a.tvn-rc-phone {
  display: inline-block !important;
  font-size: clamp(28px, 4.2vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  line-height: 1.12 !important;
  text-decoration: none !important;
  margin: 0 !important;
}
html body .tvn-rc-apply a.tvn-rc-phone:hover {
  color: #0B1F4B !important;
}
html body .tvn-rc-apply .tvn-rc-apply-note {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.6 !important;
  margin: 16px 0 0 !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  min-width: 0 !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo-ico {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(232, 92, 4, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo-ico svg {
  width: 17px !important;
  height: 17px !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo-l {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #93A6C6 !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo-v,
html body .tvn-rc-apply .tvn-rc-cinfo-v a {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}
html body .tvn-rc-apply .tvn-rc-cinfo-v a:hover {
  color: #FF8A3D !important;
}
@media (max-width: 849px) {
  html body .tvn-rc-apply {
    grid-template-columns: 1fr !important;
  }
  html body .tvn-rc-apply .tvn-rc-apply-left,
  html body .tvn-rc-apply .tvn-rc-apply-right {
    padding: 28px 22px !important;
  }
}

/* --- 31.6 BRAND VALUE STRAP -------------------------------------------- */
html body .tvn-rc-strap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 32px !important;
}
html body .tvn-rc-strap .tvn-rc-strap-item {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  min-width: 0 !important;
}
html body .tvn-rc-strap .tvn-rc-strap-item svg {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
}
html body .tvn-rc-strap .tvn-rc-strap-item span {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  line-height: 1.4 !important;
}
@media (max-width: 767px) {
  html body .tvn-rc-strap {
    grid-template-columns: 1fr !important;
  }
}

/* --- 31.7 OTHER OPEN POSITIONS ----------------------------------------- */
html body .tvn-rc-job {
  position: relative !important;
}
html body .tvn-rc-job .tvn-rc-job-tag {
  display: inline-block !important;
  align-self: flex-start !important;
  width: auto !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #E85C04 !important;
  background: rgba(232, 92, 4, 0.1) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
}

/* --- 31.8 SECTION HEAD ON DARK ----------------------------------------- */
html body .tvn-rc-dark-head .tvn-kicker {
  color: #FF8A3D !important;
}
html body .tvn-rc-dark-head .tvn-h2 {
  color: #FFFFFF !important;
}
html body .tvn-rc-dark-head .tvn-body {
  color: #C7D3E6 !important;
}

/* --- 31.9 JD PANEL GRID (2 cột bằng chiều cao) -------------------------- */
html body .tvn-rc-panels {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
@media (max-width: 849px) {
  html body .tvn-rc-panels {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}