/* ==========================================================================
   STC VIETNAM — css/styles.css
   Toàn bộ CSS của website (bản HTML tĩnh, đã gỡ hết phần WordPress).

   0. Khung layout — viết lại phần thiết yếu của flatsome.css
   1. CSS sẵn có của file này              — giữ nguyên
   2. CSS tách từ các thẻ <style> dùng chung cho mọi trang
   3. Class tiện ích thay cho thuộc tính style="..." viết thẳng trên thẻ HTML
   4. CSS riêng của từng trang con

   ĐÃ LOẠI BỎ (chỉ 3 nhóm, KHÔNG cắt selector vì "hiện chưa dùng")
   - CSS lõi WordPress: wp-emoji, wp-block-library, classic-theme-styles,
     global-styles, wp-img-auto-sizes.
   - Rule trùng lặp y hệt và rule chỉ khác ở tiền tố hãng (-webkit-, -moz-).
   - .bg / .bg-loaded (xem ghi chú ở mục 2.2).

   VỀ MỤC 0
   flatsome.css (wp-content/themes/flatsome/assets/css/) chưa bao giờ có trong
   project, nên toàn bộ class khung sườn mà markup đang dùng — .row, .col,
   .flex-*, .align-center, .align-middle, .section-content, .box-*, .nav-dropdown,
   .button… — đều không có tác dụng. Mục 0 dựng lại chúng bằng Flexbox/Grid thuần.
   Đây là bản viết mới bám theo markup, không phải bản sao của flatsome.css, nên
   giao diện có thể khác bản gốc đôi chút.

   TRANG KHÔNG CÒN JAVASCRIPT — các thành phần tương tác được xử lý bằng CSS:
   - Menu xổ xuống  : chạy bằng :hover / :focus-within (mục 0.7).
   - Menu điện thoại: chạy bằng :target (mục 0.8); nút mở là <a href="#main-menu">,
                      nút đóng là <a href="#" class="mobile-sidebar-close">.
   - Accordion, tab : không đóng/mở được nữa nên để mở sẵn toàn bộ nội dung.
   - Icon           : font fl-icons cũng không có, các icon đang dùng được vẽ lại
                      bằng CSS hoặc thay bằng ký tự Unicode (mục 0.21).
   ========================================================================== */

/* ==========================================================================
   0. KHUNG LAYOUT — viết lại phần thiết yếu của flatsome.css
   --------------------------------------------------------------------------
   File wp-content/themes/flatsome/assets/css/flatsome.css chưa bao giờ có trong
   project, nên toàn bộ class khung sườn (.row, .col, .flex-*, .align-*,
   .section-content, .box-*, .nav-*, .button…) mà markup đang dùng đều không có
   tác dụng. Mục này dựng lại chúng bằng Flexbox/Grid thuần.

   Đặt TRƯỚC mục 1 để giữ đúng thứ tự đè của bản gốc:
   flatsome.css → CSS riêng → theme options → wp-custom-css → CSS từng trang.

   Breakpoint theo đúng Flatsome:
     small  : ≤ 549px          medium : 550px – 849px         large : ≥ 850px
     "for-medium" = màn hình ≤ 849px (điện thoại + máy tính bảng)
   ========================================================================== */

/* -------- 0.1 Nền tảng -------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; }
p { margin: 0 0 1em; }

/* Chỉ đọc được bằng trình đọc màn hình (giữ cho link "Skip to content") */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto; margin: 0;
  padding: 15px 23px; clip-path: none;
  background: #fff; color: #444; z-index: 100000;
}

.clearfix::after { content: ""; display: table; clear: both; }
.ul-reset, .nav { margin: 0; padding: 0; list-style: none; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* -------- 0.2 Khối định vị dùng chung -------- */
.relative      { position: relative; }
.absolute      { position: absolute; }
.block         { display: block; }
.inline-block  { display: inline-block; vertical-align: middle; }
.circle        { border-radius: 100%; }
.round         { border-radius: 99px; }
.z-1           { z-index: 1; }
.z-top         { z-index: 9999; }
.fixed         { position: fixed; }
.bottom        { bottom: 0; }
.pull-left     { float: left; }

/* .fill: phủ kín phần tử cha (dùng cho ảnh nền của section / page title) */
.fill {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.bg-fill {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.section-bg, .page-title-bg { overflow: hidden; }

/* -------- 0.3 Container & section --------
   #wrapper phải có nền trắng: theme đặt html{background-color:#404041} (mục 2.3)
   để lộ nền tối ở hai bên, nếu #wrapper trong suốt thì cả trang sẽ bị tối. */
#wrapper {
  position: relative;
  background-color: #fff;
}
.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.section {
  position: relative;
  padding: 30px 0;
}
.section-content {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* .section-content KHÔNG giới hạn bề rộng: con trực tiếp của nó chỉ có .row
   (đã tự có max-width 1170px), .gap-element và .page-header-wrapper — banner
   tiêu đề trang phải tràn hết bề ngang như bản gốc. */

/* -------- 0.4 Lưới 12 cột -------- */
.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
/* KHÔNG dùng margin âm cho .row. Bản gốc bù margin âm bằng padding của
   .section-content; ở đây .section-content không còn padding nên margin âm sẽ
   đẩy nội dung tràn ra ngoài màn hình điện thoại. Gutter lấy từ padding của .col. */

.col {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0 15px 30px;
}
.col-inner { position: relative; width: 100%; }

/* biến thể khoảng cách của .row */
.row-collapse > .col { padding: 0; }
.row-small  > .col { padding: 0 10px 20px; }
.row-large  > .col { padding: 0 30px 30px; }
.row-divided > .col + .col { border-left: 1px solid rgba(0, 0, 0, .08); }

/* bề rộng cột: small = mọi màn hình, medium ≥550px, large ≥850px */
.small-1  { width: 8.3333%; }   .small-2  { width: 16.6667%; }
.small-3  { width: 25%; }       .small-4  { width: 33.3333%; }
.small-5  { width: 41.6667%; }  .small-6  { width: 50%; }
.small-7  { width: 58.3333%; }  .small-8  { width: 66.6667%; }
.small-9  { width: 75%; }       .small-10 { width: 83.3333%; }
.small-11 { width: 91.6667%; }  .small-12 { width: 100%; }

@media screen and (min-width: 550px) {
  .medium-1  { width: 8.3333%; }   .medium-2  { width: 16.6667%; }
  .medium-3  { width: 25%; }       .medium-4  { width: 33.3333%; }
  .medium-5  { width: 41.6667%; }  .medium-6  { width: 50%; }
  .medium-7  { width: 58.3333%; }  .medium-8  { width: 66.6667%; }
  .medium-9  { width: 75%; }       .medium-10 { width: 83.3333%; }
  .medium-11 { width: 91.6667%; }  .medium-12 { width: 100%; }

  .medium-columns-1 > .col { width: 100%; }
  .medium-columns-2 > .col { width: 50%; }
  .medium-columns-3 > .col { width: 33.3333%; }
  .medium-columns-4 > .col { width: 25%; }
}

@media screen and (min-width: 850px) {
  .large-1  { width: 8.3333%; }   .large-2  { width: 16.6667%; }
  .large-3  { width: 25%; }       .large-4  { width: 33.3333%; }
  .large-5  { width: 41.6667%; }  .large-6  { width: 50%; }
  .large-7  { width: 58.3333%; }  .large-8  { width: 66.6667%; }
  .large-9  { width: 75%; }       .large-10 { width: 83.3333%; }
  .large-11 { width: 91.6667%; }  .large-12 { width: 100%; }

  .large-columns-1 > .col { width: 100%; }
  .large-columns-2 > .col { width: 50%; }
  .large-columns-3 > .col { width: 33.3333%; }
  .large-columns-4 > .col { width: 25%; }
}

@media screen and (max-width: 549px) {
  .small-columns-1 > .col { width: 100%; }
  .small-columns-2 > .col { width: 50%; }
}

/* -------- 0.5 Flexbox & canh lề -------- */
.flex-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.flex-col   { display: flex; align-items: center; max-height: 100%; }
.flex-left  { margin-right: auto; justify-content: flex-start; }
.flex-right { margin-left: auto;  justify-content: flex-end; }
.flex-center{ margin: 0 auto; justify-content: center; }
.flex-grow  { flex: 1 1 0%; }
.flex-wrap  { flex-wrap: wrap; }

/* .flex-row-col: hàng ngang trên desktop, xếp dọc trên ≤849px */
.flex-row-col { display: flex; flex-flow: row wrap; align-items: center; width: 100%; }
@media screen and (max-width: 849px) {
  .flex-row-col      { flex-direction: column; align-items: stretch; }
  .medium-flex-wrap  { flex-wrap: wrap; }
  .medium-text-center{ text-align: center; }
}

/* canh theo trục — dùng trên .row hoặc khối flex */
.align-middle { align-items: center; }
.align-top    { align-items: flex-start; }
.align-bottom { align-items: flex-end; }
.align-center { justify-content: center; }
.align-left   { justify-content: flex-start; }
.align-right  { justify-content: flex-end; }
/* .align-equal: các cột cao bằng nhau */
.align-equal > .col { display: flex; }
.align-equal > .col > .col-inner { display: flex; flex-direction: column; width: 100%; }

.text-right { text-align: right; }

/* -------- 0.6 Ẩn/hiện theo màn hình -------- */
@media screen and (max-width: 849px) {
  .hide-for-medium { display: none !important; }
}
@media screen and (min-width: 850px) {
  .show-for-medium { display: none !important; }
}
@media screen and (max-width: 549px) {
  .hide-for-small { display: none !important; }
}

/* -------- 0.7 Header & menu -------- */
.header, .header-wrapper { position: relative; width: 100%; z-index: 30; }
.header-main { position: relative; }
.header-bg-container, .header-bg-image { z-index: -1; }

/* Header trong suốt: nằm đè lên ảnh tiêu đề trang bên dưới.
   Mục 2.3 đã có .has-transparent + .page-title{padding-top:90px} để chừa chỗ. */
.header.transparent {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
}
.header.transparent .header-wrapper,
.header.transparent .header-main { background: transparent; }
/* .header-bg-color được mục 2.3 tô trắng (.header-bg-color,.header-wrapper{background:#fff}).
   Với header trong suốt phải bỏ nền đó, nếu không dải trắng sẽ che mất ảnh tiêu đề
   và menu chữ trắng (.nav-dark) trở thành trắng trên trắng. */
.header.transparent .header-bg-color,
.header.transparent .header-bg-image { background-color: transparent; }

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 90px;
}
#logo { flex: 0 0 auto; display: flex; align-items: center; }
#logo img { display: block; }
#logo .header-logo-dark { display: none; }   /* bản logo cho nền tối, mặc định ẩn */
.nav-dark #logo .header-logo      { display: none; }
.nav-dark #logo .header-logo-dark { display: block; }

/* logo giữa: menu trái — logo — menu phải */
.logo-center #logo         { order: 2; margin: 0 14px; }
.logo-center .flex-left    { order: 1; flex: 1 1 0%; }
.logo-center .flex-right   { order: 3; flex: 1 1 0%; }

.nav { display: flex; align-items: center; flex-wrap: wrap; }
.nav-left   { justify-content: flex-start; }
.nav-right  { justify-content: flex-end; }
.nav-center { justify-content: center; }
.nav > li { position: relative; display: block; }
.nav > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  color: inherit;
  line-height: 1.3;
  /* giữ mỗi mục trên một dòng; nếu chật thì cả hàng xuống dòng, không bẻ chữ */
  white-space: nowrap;
}
.nav > li > a:hover { color: #c0232e; }
.nav-uppercase > li > a { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.nav-size-medium > li > a { font-size: .9em; }
.nav-size-xlarge > li > a { font-size: 1.1em; }
.nav-spacing-xlarge > li { margin: 0 20px; }
.nav-dark, .nav-dark .nav > li > a { color: #fff; }

/* Dropdown chạy bằng CSS :hover — không cần JavaScript.
   Chỉ nhắm .nav-dropdown (menu header). Menu con trong sidebar điện thoại mang
   class "sub-menu nav-sidebar-ul children" nên không bị ẩn theo. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  color: #333;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 100;
}
.nav-dropdown-has-shadow .nav-dropdown { box-shadow: 0 6px 24px rgba(0, 0, 0, .16); }
.nav-dropdown-has-border .nav-dropdown { border: 1px solid rgba(0, 0, 0, .1); }
.nav > li:hover > .nav-dropdown,
.nav > li:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li { display: block; }
.nav-dropdown li > a {
  display: block;
  padding: 8px 20px;
  color: #333;
  font-size: .92em;
  text-transform: none;
}
.nav-dropdown li > a:hover { background: #f6f6f6; color: #c0232e; }
/* menu con cấp 3 nằm trong dropdown */
.nav-dropdown .children, .nav-dropdown .sub-menu {
  position: static;
  padding: 0 0 0 14px;
  list-style: none;
  min-width: 0;
}
/* mũi tên của mục có menu con */
.nav > li.has-dropdown > a > .icon-angle-down { margin-left: 4px; }

.header-button .button { margin: 0; }
.top-divider { border-top: 1px solid rgba(0, 0, 0, .08); }

/* -------- 0.8 Menu ngoài lề cho điện thoại (chạy bằng :target, không cần JS) --------
   Nút mở là <a href="#main-menu">; nút đóng là <a href="#"> đặt trong panel.  */
.mobile-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: #fff;
  z-index: 10000;
  overflow-y: auto;
  padding: 56px 20px 30px;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
}
.mobile-sidebar.mfp-hide { display: block !important; }   /* đè .mfp-hide bên dưới */
.mobile-sidebar:target { transform: translateX(0); }
.mobile-sidebar-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 30px;
  line-height: 1;
  color: #333;
}
.mobile-sidebar .nav-vertical > li { display: block; width: 100%; }
.mobile-sidebar .nav-vertical > li > a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mobile-sidebar .nav-vertical .children {
  margin: 0;
  padding-left: 14px;
  list-style: none;
}
.mfp-hide { display: none !important; }

/* -------- 0.9 Tiêu đề trang (page title) -------- */
.page-title { position: relative; }
.page-title-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 200px;
  padding: 30px 15px;
}
.title-overlay { background-color: rgba(0, 0, 0, .4); }
.page-title.dark, .page-title.dark h1, .page-title.dark a { color: #fff; }
.title-wrapper, .title-content { display: flex; align-items: center; }

/* -------- 0.10 Ảnh & khối box -------- */
.img, .box { position: relative; }
.img-inner, .box-image { position: relative; overflow: hidden; }
.img-inner img, .box-image img { display: block; width: 100%; }

/* .image-cover: khung có tỉ lệ cố định (padding-top), ảnh phủ kín bên trong */
.image-cover { position: relative; overflow: hidden; }
.image-cover img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.box-text { position: relative; padding: 12px 0 0; }
.box-text-bottom .box-text { padding-top: 12px; }
.box-text-middle { display: flex; align-items: center; }
.box-vertical { display: flex; align-items: flex-start; gap: 14px; }
.box-vertical .box-image { flex: 0 0 auto; }
.box-vertical .box-text  { flex: 1; padding-top: 0; }

.is-divider {
  height: 3px;
  width: 50px;
  margin: 12px 0;
  background-color: rgba(0, 0, 0, .1);
}
.text-center .is-divider { margin-left: auto; margin-right: auto; }
.divider { border-top: 1px solid rgba(0, 0, 0, .1); }
.no-divider .is-divider { display: none; }

.box-shadow-2 { box-shadow: 0 3px 8px rgba(0, 0, 0, .1); }
.box-shadow-3 { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.box-shadow-5-hover { transition: box-shadow .2s; }
.box-shadow-5-hover:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }

/* --- Bóng đổ của danh sách tin tức (.row.home-blog) ---------------------
   Markup: <div class="row ... has-shadow row-box-shadow-2 row-box-shadow-3-hover">
   Theo Flatsome, .has-shadow chỉ là cờ đánh dấu; bóng thuộc về TỪNG THẺ TIN
   qua .row-box-shadow-2 (lúc thường) và .row-box-shadow-3-hover (khi rê chuột),
   chứ không phải một khối bóng bao quanh cả danh sách.
   Vì vậy .has-shadow KHÔNG được gán box-shadow ở trên.                     */
.row-box-shadow-2 > .col > .col-inner,
.row-box-shadow-3-hover > .col > .col-inner {
  height: 100%;
  background: #fff;
  overflow: hidden;                 /* ảnh không thò ra khỏi góc thẻ */
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
  transition: box-shadow .25s ease;
}
.row-box-shadow-3-hover > .col:hover > .col-inner {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
/* Ảnh chạm sát mép thẻ (không có khoảng đệm với viền bóng);
   chỉ phần chữ mới thụt vào. */
.box-blog-post .box-image { margin: 0; }
.box-blog-post .box-text { padding: 16px 18px 20px; }

/* ==========================================================================
   MỤC KHÁCH HÀNG — lưới logo đứng yên
   Trước đây là dải logo chạy ngang; số đơn vị nhiều lên, slide không cho xem
   hết được nên đổi sang lưới tĩnh. Kích thước thẻ/logo/tên: mục 16;
   khối thẻ tên cho khách hàng chưa có logo: mục 24.
   ========================================================================== */
.kh-grid {
  max-width: 1112px;
  margin: 26px auto 0;
  padding: 0 16px;
}
/* flex + căn giữa (không dùng grid) để hàng cuối lẻ thẻ vẫn nằm giữa */
.kh-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kh-item {
  display: flex;
  align-items: center;
  margin: 0;
  background: #fff;
  border: 1px solid #E2D8CD;
}

/* ==========================================================================
   THẺ TIN TỨC (.row.home-blog)
   Bám theo ngôn ngữ thiết kế đã có ở mục 1: nền trắng, viền mảnh màu #E2D8CD,
   bo góc 2px, chữ Roboto Condensed, nhấn bằng đỏ #9E1B22 và vàng #E8B93C.
   Toàn bộ làm bằng CSS, KHÔNG sửa markup — kể cả dòng "Đọc tiếp" (dùng ::after).
   ========================================================================== */
.row.home-blog > .col > .col-inner {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E2D8CD;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(42, 29, 30, .05);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.row.home-blog > .col:hover > .col-inner {
  transform: translateY(-5px);
  border-color: #D8C7B6;
  box-shadow: 0 16px 34px rgba(42, 29, 30, .16);
}
/* thẻ <a> bọc trong .col-inner phải giãn hết chiều cao thì phần chữ mới đẩy
   được "Đọc tiếp" xuống đáy */
.row.home-blog .box-blog-post,
.row.home-blog > .col > .col-inner > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* --- ảnh: phóng nhẹ khi rê chuột, kèm vạch màu chạy dài ở cạnh dưới --- */
.home-blog .box-image { overflow: hidden; }
/* nền ngà cho khung ảnh: lúc ảnh chưa tải (hoặc đang dùng placeholder) khung
   vẫn đọc ra là "chỗ đặt ảnh" chứ không phải mảng trắng trống */
.home-blog .image-cover { background: #F7F2EB; }
.home-blog .box-image img { transition: transform .55s ease; }
.home-blog > .col:hover .box-image img { transform: scale(1.06); }
.home-blog .box-image::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #9E1B22, #E8B93C);
  transition: width .45s ease;
}
.home-blog > .col:hover .box-image::after { width: 100%; }

/* --- phần chữ --- */
.home-blog .box-text {
  display: flex;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  text-align: left;                 /* markup để text-center, tin tức đọc dọc trái dễ hơn */
}
.home-blog .box-text-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
/* --- ngày đăng: gạch vàng ngắn + số, đổi sang đỏ khi rê chuột --- */
.home-blog .post-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  color: #9E8C8A;
  transition: color .2s ease;
}
.home-blog .post-date::before {
  content: "";
  width: 14px;
  height: 2px;
  background: #E8B93C;
  transition: background .25s ease, width .25s ease;
}
.home-blog > .col:hover .post-date { color: #7A6968; }
.home-blog > .col:hover .post-date::before { width: 22px; background: #9E1B22; }

.home-blog .post-title {
  margin: 0 0 9px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16.5px;
  line-height: 1.35;
  color: #2A1D1E;
  transition: color .2s ease;
  /* cắt còn 3 dòng để các thẻ cân nhau */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-blog > .col:hover .post-title { color: #9E1B22; }

/* bỏ gạch ngang xám mặc định của theme, đã có vạch màu ở cạnh ảnh */
.home-blog .is-divider { display: none; }

.home-blog .from_the_blog_excerpt {
  margin: 0;
  text-align: left;                 /* đè p{text-align:justify} của theme */
  font-size: 14px;
  line-height: 1.62;
  color: #6B5B5A;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- "Đọc tiếp" sinh bằng CSS, luôn nằm sát đáy thẻ --- */
.home-blog .box-text-inner::after {
  content: "Đọc tiếp \2192";
  margin-top: auto;
  padding-top: 14px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9E1B22;
  transition: letter-spacing .25s ease;
}
.home-blog > .col:hover .box-text-inner::after { letter-spacing: .18em; }

/* --- nút "Xem tất cả tin tức" dưới danh sách --- */
.news-all {
  margin-top: 34px;
  text-align: center;
}
.news-all .button {
  margin-bottom: 0;
  padding: 0 2.2em;
  min-height: 3em;
  font-family: "Roboto Condensed", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .row.home-blog > .col > .col-inner,
  .home-blog .box-image img,
  .home-blog .box-image::after,
  .home-blog .post-date,
  .home-blog .post-date::before,
  .home-blog .box-text-inner::after { transition: none; }
  .row.home-blog > .col:hover > .col-inner { transform: none; }
  .home-blog > .col:hover .box-image img { transform: none; }
}

.ux-logo { text-align: center; }
.ux-logo-image { display: block; margin: 0 auto; }

/* -------- 0.11 Icon box / featured box -------- */
/* Hai biến thể có thật trong markup:
     .icon-box-top    — icon nằm trên, chữ canh trái
     .icon-box-center — icon nằm trên và canh giữa, chữ canh giữa
   align-items: stretch là bắt buộc. Ở chiều dọc, flex-start sẽ bóp phần chữ lại
   bằng bề rộng nội dung, khiến mỗi dòng chỉ còn một từ. */
.icon-box { display: flex; align-items: flex-start; gap: 16px; }
.icon-box-top,
.icon-box-center { flex-direction: column; align-items: stretch; gap: 0; }
.icon-box-center .icon-box-img { margin-left: auto; margin-right: auto; }
.icon-box-img { flex: 0 0 auto; margin-bottom: 12px; }
.icon-box-img img { display: block; width: 100%; }
.icon-box-text { flex: 1 1 auto; min-width: 0; }
.icon-box-text.last-reset > :last-child { margin-bottom: 0; }
.icon .icon-inner { display: block; }

/* -------- 0.12 Tiêu đề mục (section title) -------- */
.section-title-container { margin-bottom: 1em; }
.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 .4em;
}
.section-title b {
  flex: 1 1 auto;
  height: 2px;
  background-color: currentColor;
  opacity: .15;
}
.section-title-main { flex: 0 0 auto; text-transform: uppercase; }

/* -------- 0.13 Nút bấm -------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 2.7em;
  padding: 0 1.3em;
  margin-bottom: 1em;
  border: 1px solid transparent;
  background-color: #c0232e;
  color: #fff;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: opacity .16s, background-color .16s, color .16s;
}
.button:hover { opacity: .88; color: #fff; }
.button.is-outline { background: transparent; border-color: currentColor; color: #c0232e; }
.button.is-outline:hover { background: #c0232e; color: #fff; }
.button.is-link { background: transparent; border: 0; padding: 0; min-height: 0; color: #c0232e; }
.button.is-link:hover { color: #c0232e; text-decoration: underline; }
/* Mục 2.3 có .button.primary:not(.is-outline){background-color:#c0232e} — độ ưu tiên
   (0,3,0) và nằm sau mục này, nên biến thể "link" cần selector đặc hiệu hơn, không thì
   chữ đỏ nằm trên nền đỏ và mất hút. */
.button.primary.is-link:not(.is-outline) { background-color: transparent; color: #c0232e; }
.button.is-small  { font-size: .85em; }
.button.is-large  { font-size: 1.1em; }
.button.is-larger { font-size: 1.25em; }
.button.circle { border-radius: 100%; width: 2.7em; padding: 0; }
.button span { display: inline-block; }
.plain { color: inherit; }
.uppercase { text-transform: uppercase; letter-spacing: .04em; }
.lowercase { text-transform: none; }
.small, .is-small { font-size: .85em; }
.is-large  { font-size: 1.1em; }
.is-larger { font-size: 1.25em; }

/* -------- 0.14 Biểu mẫu (Contact Form 7) -------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], textarea, select {
  width: 100%;
  padding: .65em .8em;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  /* màu chữ đặt cứng, KHÔNG inherit: ô nhập nằm trên nền đỏ đậm ở khối
     "Tư vấn dịch vụ" sẽ thừa hưởng màu trắng và thành trắng trên trắng */
  color: #333;
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(192, 35, 46, .35); outline-offset: 1px; }
textarea { min-height: 110px; resize: vertical; }
/* Ô "Nội dung" của form liên hệ để rows="10" (~279px) khiến cột trái cao hơn
   hẳn cột phải. Hạ xuống cho hai cột cân nhau; vẫn kéo giãn được thủ công. */
.wpcf7-textarea { height: 120px; min-height: 0; }
.wpcf7-form-control-wrap { display: block; margin-bottom: 12px; }

input[type="submit"], button[type="submit"] {
  display: inline-block;
  width: auto;
  padding: .75em 1.8em;
  border: 0;
  border-radius: 2px;
  background-color: #c0232e;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover { opacity: .88; }

/* Khung thông báo của Contact Form 7 do JS đổ nội dung vào. Không còn JS nên nó
   luôn rỗng — ẩn đi để không hiện một ô viền trống dưới nút gửi. */
.wpcf7-response-output, .screen-reader-response { display: none; }
.required { color: #c0232e; }

.searchform-wrapper .flex-row { gap: 6px; }
.ux-search-submit { flex: 0 0 auto; }

/* -------- 0.15 Accordion --------
   Đóng/mở do js/script.js?ver=1.0.2 đảm nhiệm (thay cho flatsome.js).
   Phần nội dung KHÔNG ẩn sẵn ở đây mà do JS ẩn khi tải trang — nếu JS không
   chạy được thì nội dung vẫn hiện đầy đủ thay vì biến mất.                 */
.accordion-item { border-bottom: 1px solid #fff; }
.accordion-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}
.accordion-inner { padding: 0 0 16px; }
.toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease;
}
/* mũi tên lật lên khi mục đang mở */
.accordion-title.active .toggle { transform: rotate(180deg); }

/* -------- 0.16 Tab (không có JS: hiện tất cả) -------- */
.nav-tabs { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.tab-panels > .panel { display: block; }

/* -------- 0.17 Widget / sidebar -------- */
.sidebar-wrapper, .post-sidebar { padding-top: 10px; }
.widget { margin-bottom: 28px; }
.widget-title { display: block; margin-bottom: 12px; font-weight: 700; text-transform: uppercase; }
.widget .menu, .widget ul { margin: 0; padding: 0; list-style: none; }
.widget li > a { display: block; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); color: inherit; }

/* -------- 0.18 Bài viết -------- */
.entry-title { margin-bottom: .3em; }
.entry-header { margin-bottom: 20px; }
.entry-meta { font-size: .88em; opacity: .7; margin-bottom: 10px; }
.entry-divider { border-top: 1px solid rgba(0, 0, 0, .1); margin: 18px 0; }
.entry-content > :last-child { margin-bottom: 0; }
.has-text-align-center { text-align: center; }
blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 3px solid #c0232e; }

.social-icons, .share-icons, .follow-icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* -------- 0.19 Nút lên đầu trang -------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 9000;
}

/* -------- 0.20 Footer -------- */
.footer-wrapper { position: relative; }
.footer-primary { padding: 10px 0; }

/* -------- 0.21 Icon --------
   Font fl-icons (wp-content/themes/flatsome/.../fl-icons.woff2) không có trong
   project nên các glyph gốc không hiện được. Vẽ lại bằng CSS những icon đang dùng. */
/* CẢNH BÁO: KHÔNG dùng [class^="icon-"] / [class*=" icon-"] ở đây.
   Markup có .icon-box, .icon-box-img, .icon-box-text, .icon-inner… cũng bắt đầu
   bằng "icon-", sẽ bị biến thành inline-block rộng 1em và làm vỡ toàn bộ khối.
   Vì vậy liệt kê đúng 15 class icon đang được dùng. */
.icon-angle-down, .icon-angle-up, .icon-angle-right, .icon-angle-left,
.icon-menu, .icon-search, .icon-checkmark,
.icon-phone, .icon-envelop, .icon-map-pin-fill, .icon-play,
.icon-facebook, .icon-twitter, .icon-linkedin, .icon-pinterest, .icon-whatsapp {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  font-style: normal;
  position: relative;
}
/* mũi tên chevron */
.icon-angle-down::before, .icon-angle-up::before,
.icon-angle-right::before, .icon-angle-left::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .42em; height: .42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.icon-angle-down::before  { transform: translate(-50%, -70%) rotate(45deg); }
.icon-angle-up::before    { transform: translate(-50%, -30%) rotate(-135deg); }
.icon-angle-right::before { transform: translate(-70%, -50%) rotate(-45deg); }
.icon-angle-left::before  { transform: translate(-30%, -50%) rotate(135deg); }

/* hamburger 3 gạch */
.icon-menu::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .9em; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 -.3em 0 currentColor, 0 .3em 0 currentColor;
}
/* kính lúp */
.icon-search::before {
  content: "";
  position: absolute;
  top: .1em; left: .1em;
  width: .62em; height: .62em;
  border: 2px solid currentColor;
  border-radius: 100%;
}
.icon-search::after {
  content: "";
  position: absolute;
  right: .04em; bottom: .04em;
  width: .3em; height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
/* dấu tích */
.icon-checkmark::before {
  content: "";
  position: absolute;
  top: 45%; left: 50%;
  width: .3em; height: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* các icon còn lại: dùng ký tự Unicode có sẵn trong font hệ thống */
.icon-phone::before        { content: "\260E"; }
.icon-envelop::before      { content: "\2709"; }
.icon-map-pin-fill::before { content: "\25CF"; }
.icon-play::before         { content: "\25B6"; }
.icon-phone, .icon-envelop, .icon-map-pin-fill, .icon-play { width: auto; }

/* icon mạng xã hội: hiển thị chữ cái đầu trong hình tròn */
.icon-facebook::before, .icon-twitter::before, .icon-linkedin::before,
.icon-pinterest::before, .icon-whatsapp::before {
  display: block;
  width: 1.9em; height: 1.9em;
  border: 1px solid currentColor;
  border-radius: 100%;
  font-size: .62em;
  line-height: 1.8em;
  text-align: center;
  font-weight: 700;
}
.icon-facebook::before  { content: "f"; }
.icon-twitter::before   { content: "t"; }
.icon-linkedin::before  { content: "in"; }
.icon-pinterest::before { content: "p"; }
.icon-whatsapp::before  { content: "w"; }
.icon-facebook, .icon-twitter, .icon-linkedin,
.icon-pinterest, .icon-whatsapp { width: auto; height: auto; }

/* ==========================================================================
   1. CSS SẴN CÓ (giữ nguyên)
   ========================================================================== */
.logo2 {
  display: flex !important;
  align-items: center;
  gap: 11px;
}

.logo-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  background: #9E1B22;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 2px #E8B93C, inset 0 0 0 4px #9E1B22;
}

.logo-mark b {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 23px;
  color: #E8B93C;
  line-height: 1;
  transform: translateY(-1px)
}

.logo-txt strong {
  display: block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 14px;
  line-height: 1.15;
  color: #9E1B22;
  letter-spacing: .01em
}

.logo-txt span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .055em;
  color: #7A6968;
  text-transform: uppercase;
  margin-top: 2px
}

.logo2.on-dark .logo-mark {
  background: #fff;
  box-shadow: inset 0 0 0 2px #E8B93C, inset 0 0 0 4px #fff
}

.logo2.on-dark .logo-mark b {
  color: #9E1B22
}

.logo2.on-dark .logo-txt strong {
  color: #fff
}

.logo2.on-dark .logo-txt span {
  color: rgba(255, 255, 255, .72)
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px
}

.sec {
  padding: 88px 0
}

.sec.tight {
  padding: 64px 0
}

.sec.ivory {
  background: #F7F2EB;
}

.sec.ivory2 {
  background: #EFE7DC;
}

.sec-head {
  max-width: 660px;
  margin-bottom: 40px
}

.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.sec-head h2 {
  font-size: clamp(27px, 3.5vw, 38px);
  margin-top: 14px;
  letter-spacing: -.015em
}

.sec-head p {
  margin-top: 14px;
  color: #4A3C3C;
  font-size: 16.5px
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c01e2e;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: #c01e2e;
}

.btn-sm {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px
}

.btn-outline {
  border: 1.5px solid #9E1B22;
  background: linear-gradient(90deg, rgba(192, 30, 46, 1) 0%, rgba(248, 170, 63, 1) 100%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  height: 46px;
  padding: 0 22px;
  border-radius: 2px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .16s, color .16s, border-color .16s;
  white-space: nowrap;
}

.btn:hover {
  color: #fff;
}

.g4 {
  grid-template-columns: repeat(4, 1fr)
}

.grid {
  display: grid;
  gap: 24px
}

.face {
  background: #D8CDC2;
  background-image:
  radial-gradient(circle at 50% 33%, #F0E5D8 0 15%, transparent 15.5%),
  radial-gradient(ellipse 34% 26% at 50% 88%, #F0E5D8 0 100%, transparent 100%),
  linear-gradient(170deg, var(--f1, #BFC8CB), var(--f2, #8E9AA0));
}

.exp {
  background: #fff;
  border: 1px solid #E2D8CD;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.exp .face {
  height: 210px
}

.exp-b {
  padding: 18px
}

.exp-b h3 {
  font-size: 18px
}

.exp-b .role {
  font-size: 13.5px;
  color: #7A6968;
  margin-top: 3px;
  min-height: 38px
}

.exp-b .chip {
  margin-top: 10px
}

.chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9E1B22;
  background: #F7EAE9;
  border: 1px solid #E4C9C7;
  border-radius: 2px;
  padding: 3px 9px;
}

.ftr {
  background: #2A1D1E;
  color: rgba(255, 255, 255, .74);
  font-size: 14.5px
}

.ftr .wrap {
  padding-top: 56px;
  padding-bottom: 26px
}

.ftr-g {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.15fr;
  gap: 40px
}

.ftr h4 {
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px
}

.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.ftr a {
  color: rgba(255, 255, 255, .74)
}

.ftr a:hover {
  color: #E8B93C
}

.ftr .tag {
  margin-top: 16px;
  font-family: "Roboto Condensed", sans-serif;
  font-style: italic;
  color: #E8B93C;
  font-size: 15px
}

.ftr .addr {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ftr .addr div {
  display: flex;
  gap: 10px
}

.ftr .addr i {
  color: #E8B93C;
  font-style: normal;
  font-family: "Roboto Condensed", sans-serif;
  flex: none;
  width: 18px;
  text-align: center
}

.ftr-map {
  margin-top: 14px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, .16)
}

.ftr-bot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   2. CSS TÁCH TỪ CÁC THẺ <style> (dùng chung cho mọi trang)
   ========================================================================== */

/* -------- 2.2 Hiệu ứng nền ảnh của Flatsome (.bg) — ĐÃ BỎ --------
   Bản gốc: .bg{opacity:0} rồi flatsome.js gắn thêm .bg-loaded{opacity:1} sau khi ảnh
   tải xong. Trang tĩnh không còn flatsome.js nên .bg-loaded không bao giờ được gắn
   -> ảnh nền sẽ trong suốt vĩnh viễn. Vì vậy bỏ cả 2 rule để ảnh nền luôn hiện.
   ---------------------------------------------------------------------------- */

/* -------- 2.3 custom-css — tuỳ biến theme (màu, header, typography) -------- */
:root {--primary-color: #c0232e;}
.full-width .ubermenu-nav,
.container,
.row {max-width: 1170px}
.row.row-collapse {max-width: 1140px}
.row.row-small {max-width: 1162.5px}
.row.row-large {max-width: 1200px}
.header-main {height: 90px}
#logo img {max-height: 90px}
.header-top {min-height: 30px}
.transparent .header-main {height: 90px}
.transparent #logo img {max-height: 90px}
.has-transparent + .page-title:first-of-type,
.has-transparent + #main > .page-title,
.has-transparent + #main > div > .page-title,
.has-transparent + #main .page-header-wrapper:first-of-type .page-title {padding-top: 90px;}
.header.show-on-scroll,
.stuck .header-main {height:70px!important}
.stuck #logo img {max-height: 70px!important}
.header-bg-color,
.header-wrapper {background-color: #ffffff}
.header-bottom {background-color: #f1f1f1}
@media (max-width: 549px) {.header-main{height: 70px}#logo img{max-height: 70px}}
.header-top {background-color:#404041!important;}

/* Color */
.accordion-title.active,
.has-icon-bg .icon .icon-inner,
.logo a,
.primary.is-underline,
.primary.is-link,
.badge-outline .badge-inner,
.nav-outline > li.active> a,
.nav-outline >li.active > a,
.cart-icon strong,
[data-color='primary'],
.is-outline.primary {color: #c0232e;}
/* Color !important */
.--white .accordion-title.active {
  color: #E8B93C !important;
}
[data-text-color="primary"] {color: #c0232e!important;}
/* Background Color */
[data-text-bg="primary"] {background-color: #c0232e;}
/* Background */
.scroll-to-bullets a,
.featured-title,
.label-new.menu-item > a:after,
.nav-pagination > li > .current,
.nav-pagination > li > span:hover,
.nav-pagination > li > a:hover,
.has-hover:hover .badge-outline .badge-inner,
button[type="submit"],
.button.wc-forward:not(.checkout):not(.checkout-button),
.button.submit-button,
.button.primary:not(.is-outline),
.featured-table .title,
.is-outline:hover,
.has-icon:hover .icon-label,
.nav-dropdown-bold .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold > li > a:hover,
.nav-dropdown-bold.dark .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold.dark > li > a:hover,
.tagcloud a:hover,
.grid-tools a,
input[type='submit']:not(.is-form),
.box-badge:hover .box-text,
input.button.alt,
.nav-box > li > a:hover,
.nav-box > li.active > a,
.nav-pills > li.active > a,
.current-dropdown .cart-icon strong,
.cart-icon:hover strong,
.nav-line-bottom > li > a:before,
.nav-line-grow > li > a:before,
.nav-line > li > a:before,
.banner,
.header-top,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.primary.is-outline:hover,
input[type='submit'].primary,
input[type='reset'].button,
input[type='button'].primary,
.badge-inner {background-color: #c0232e;}
/* Border */
.nav-vertical.nav-tabs > li.active > a,
.scroll-to-bullets a.active,
.nav-pagination > li > .current,
.nav-pagination > li > span:hover,
.nav-pagination > li > a:hover,
.has-hover:hover .badge-outline .badge-inner,
.accordion-title.active,
.featured-table,
.is-outline:hover,
.tagcloud a:hover,
blockquote,
.has-border,
.cart-icon strong:after,
.cart-icon strong,
.blockUI:before,
.processing:before,
.loading-spin,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.primary.is-outline:hover {border-color: #c0232e}
.nav-tabs > li.active > a {border-top-color: #c0232e}
.widget_shopping_cart_content .blockUI.blockOverlay:before { border-left-color: #c0232e }
.woocommerce-checkout-review-order .blockUI.blockOverlay:before { border-left-color: #c0232e }
/* Fill */
.slider .flickity-prev-next-button:hover svg,
.slider .flickity-prev-next-button:hover .arrow {fill: #c0232e;}
/* Secondary */
[data-icon-label]:after,
.secondary.is-underline:hover,
.secondary.is-outline:hover,
.icon-label,
.button.secondary:not(.is-outline),
.button.alt:not(.is-outline),
.badge-inner.on-sale,
.button.checkout,
.single_add_to_cart_button,
.current .breadcrumb-step { background-color:#d96b36; }
[data-text-bg="secondary"] {background-color: #d96b36;}
.secondary.is-underline,
.secondary.is-link,
.secondary.is-outline,
.stars a.active,
.star-rating:before,
.woocommerce-page .star-rating:before,
.star-rating span:before,
.color-secondary {color: #d96b36}
[data-text-color="secondary"] {color: #d96b36!important;}
.secondary.is-outline:hover {border-color:#d96b36}
/* Success */
.success.is-underline:hover,
.success.is-outline:hover,
.success {background-color: #f5a33e}
.success-color,
.success.is-link,
.success.is-outline {color: #f5a33e;}
.success-border {border-color: #f5a33e!important;}
[data-text-color="success"] {color: #f5a33e!important;}
[data-text-bg="success"] {background-color: #f5a33e;}
/* Alert */
.alert.is-underline:hover,
.alert.is-outline:hover,
.alert {background-color: #404041}
.alert.is-link,
.alert.is-outline,
.color-alert {color: #404041;}
[data-text-color="alert"] {color: #404041!important;}
[data-text-bg="alert"] {background-color: #404041;}
/* Typography */
body {font-size: 100%;}
@media screen and (max-width: 549px) {body{font-size: 100%;}}
body {font-family:"Roboto Condensed", sans-serif; color: #000000;}
.nav > li > a {font-family:"Roboto Condensed", sans-serif;}
.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-family:"Roboto Condensed", sans-serif;}
.nav > li > a {font-weight: 700;}
.mobile-sidebar-levels-2 .nav > li > ul > li > a {font-weight: 700;}
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {font-family: "Roboto Condensed", sans-serif;}
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.banner h1,
.banner h2 {font-weight: 700;}
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {color: #404041;}
.alt-font {font-family: "Roboto Condensed", sans-serif; font-weight: 0!important;}
a {color: #c0232e;}
.absolute-footer,
html {background-color: #404041}
.label-new.menu-item > a:after {content:"New";}
.label-hot.menu-item > a:after {content:"Hot";}
.label-sale.menu-item > a:after {content:"Sale";}
.label-popular.menu-item > a:after {content:"Popular";}

/* -------- 2.4 wp-custom-css — CSS tuỳ biến dùng chung cho mọi trang -------- */
.copyright-footer {border-top: 1px solid; padding-top: 10px;}
.headline_content {font-size: 28px; margin-bottom: 0px;}
.accordion-title.active {border: transparent;}
.font-14 {font-size: 14px;}
.text-cus-1 {font-size: 28px;}
.no-bottom,
.bottom-0 .col,
.no-image .col {padding-bottom: 0px !important;}
.no-bottom,
.bottom-0 .col,
.entry-header-text-top {padding-bottom: 0px !important;}
.no-image .box-text {border-bottom: 1px dashed;}
.no-image .post-title:last-child .box-text {border-bottom: none;}
.tintuc-home .post-title {margin: 0; font-weight: 700; font-size: 14px;}
.tintuc-home .box-vertical .box-image {vertical-align: top !important}
.tintuc-home .is-divider,
.no-image .box-image {display: none;}
.no-image .post-title {font-weight: normal;}
.no-image .box-text h5:before {font-family: 'fl-icons' !important;content: "\f105"; margin-right: 10px;}
#footer p {font-size: 14px; margin-bottom: 10px;}
.slide-doitac,
.button-cus {background: linear-gradient(90deg,rgba(192,30,46,1) 0%,rgba(248,170,63,1) 100%);}
.cat-links,
.posted-on,
.byline {display: none;}
.lightbox-content {background: linear-gradient(90deg,rgba(192,30,46,1) 0%,rgba(248,170,63,1) 100%);border-radius: 20px; border: 3px dashed #fff;}
.lightbox-content p {color: #fff;}
.doitac .col-inner>.img:not(:last-child) {margin-bottom: 0px !important;}
.cus-diamond .col-inner.text-center:before {
  content: "";
  display: block;
  z-index: -1;
  opacity: .1;
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: #ff3b2b;
  border-style: solid;
  border-width: 8px;
  width: 9.375em;
  height: 9.375em;
  margin-top: -4.6875em;
  transform: rotate(45deg);
  border-radius: 4px;
}
.bottom-0 .is-divider,
.no-image .is-divider {display: none;}
.boxService .col-inner {position: relative; background: url(../images/service_bg.webp) no-repeat center center/cover #f6f6f6;}
.box-shadow-3-hover:hover {box-shadow: 0 10px 20px rgb(192 30 46 / 19%), 0 6px 6px rgb(0 0 0 / 22%);}
.box-shadow-3-hover:hover h4 {color: #c01e2e;}
.subTitle {color: #c01e2e;}
.--gold {
  color: #E8B93C !important;
}
.--white {
  color: #ffffff !important;
}
.subTitle span {
  display: inline-block;
  width: 50px;
  height: 2px;
  background: #c01e2e;
  margin-right: 20px;
  position: relative;
  top: -5px;
}
.--gold span {
  background: #E8B93C !important;;
}
.subTitle .bright {margin-right: 0; margin-left: 20px;}
.border-radius-button {border-radius: 99px !important;}
.form-tuvan .col-inner {background: url(../images/contact_bg.webp) no-repeat; background-size: cover;}
/* Chữ chạy (mục "Tôn chỉ hoạt động").
   h2 chạy từ translateX(-100%) sang translateX(100%), phần thò ra ngoài làm cả
   trang bị cuộn ngang.
   KHÔNG cắt ở .marqueeText: khối này nằm trong .row rộng tối đa 1170px, cắt ở đây
   thì chữ biến mất trước khi tới mép màn hình.
   KHÔNG dùng width:100vw: khi có thanh cuộn dọc thì 100vw rộng hơn vùng nhìn
   thấy vài chục pixel, lại sinh ra cuộn ngang đúng như cũ.
   Cách dùng: cắt ở chính thẻ <section> — nó rộng đúng bằng bề ngang màn hình,
   nên chữ chạy được từ mép trái sang mép phải và bị cắt gọn tại đó.  */
.marqueeText { width: 100%; }
.marqueeText h2 { white-space: nowrap; }
#section_559191335 { overflow: hidden; }

.marqueeText h2 {
  font-size: 80px;
  line-height: 80px;
  text-transform: capitalize;
  color: rgba(237,27,36);
  margin-bottom: 0px;
}
.runLeft h2 {animation: example2 20s linear infinite;}
@keyframes example2 {
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/*-- CSS icon trang chủ --*/
.ibMeta {
  position: relative;
  z-index: 3;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin: 0 0 27px;
  transition: all ease 400ms;
}
.ibMeta span {
  font-size: 60px;
  line-height: 82px;
  font-family: poppins,sans-serif;
  font-weight: 700;
  color: rgba(255,255,255,.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 1;
  transition: all ease 400ms;
}
.ibMeta i {
  font-family: icomoons;
  font-size: 40px;
  line-height: 80px;
  color: var(--theme-color);
  border-radius: 50%;
  border: 2px solid var(--theme-color);
  height: 100%;
  width: 100%;
  display: block;
  transition: all ease 400ms;
}
.icons-monitoring:before {content: "\e90b"; position: relative; top: 3px;}
.brleft {
  position: absolute;
  left: 1px;
  top: 18px;
  width: 10px;
  height: 10px;
  background: #fff;
  transition: all ease 300ms;
}
.brleft:after,
.brright:after {
  width: 5px;
  height: 5px;
  content: '';
  background: var(--theme-color);
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.brright {
  position: absolute;
  right: 2px;
  bottom: 15px;
  width: 10px;
  height: 10px;
  background: #fff;
  transition: all ease 300ms;
}
/*-- End CSS icon trang chủ --*/

@media screen and (min-width: 850px) {
  .home-blog .post-title{min-height: 45px;}
}
.wp-block-image figcaption {text-align: center;}
h6.entry-category.is-xsmall {font-size: 25px;}
td {text-align: justify;}
p {text-align: justify;}
.header.show-on-scroll,
.stuck .header-main {height: 90px !important;}
.logo-center .logo {margin-right: -25px !important;}

/* -------- 2.5 wp-custom-css — phần chỉ dùng cho 12 trang con (.page-legacy) --------
   Đây là các rule của bản WordPress cũ mà index.html (đã thiết kế lại) không dùng nữa.
   Bọc trong :where(.page-legacy) để chỉ áp dụng cho các trang con và KHÔNG làm thay đổi
   độ ưu tiên (:where luôn có specificity = 0), nhờ vậy các class tiện ích ở mục 3
   vẫn đè lên được như khi còn viết inline.
   -------------------------------------------------------------------------------- */
/* Bề rộng cột logo của bản cũ (logo là ảnh 140x90).
   index.html đã đổi sang logo chữ .logo2 nên KHÔNG áp dụng rule này. */
/* (đã bỏ) :where(.page-legacy) #logo{width:140px} — dành cho logo ảnh 140x90 cũ.
   12 trang con nay dùng chung bố cục .logo2 nên rule này làm bóp méo huy hiệu. */

:where(.page-legacy) .cus-diamond .col-inner.text-center:before {content: ""; display: block; z-index: -1; opacity: .1; position: absolute; top: 50%; left: 50%; border-color: #ff3b2b; border-style: solid; border-width: 8px; width: 9.375em; height: 9.375em; margin-top: -4.6875em; border-width: 8px; -webkit-transform: rotate( 45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate( 45deg); border-radius: 4px;}

:where(.page-legacy) .brleft:after { width: 5px; height: 5px; content: ''; background: var(--theme-color); border-radius: 50%; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

:where(.page-legacy) .brright:after { width: 5px; height: 5px; content: ''; background: var(--theme-color); border-radius: 50%; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

/* -------- 2.6 wpforms — biến CSS của form liên hệ -------- */
:root {
  --wpforms-field-border-radius: 3px;
  --wpforms-field-border-style: solid;
  --wpforms-field-border-size: 1px;
  --wpforms-field-background-color: #ffffff;
  --wpforms-field-border-color: rgba( 0, 0, 0, 0.25 );
  --wpforms-field-border-color-spare: rgba( 0, 0, 0, 0.25 );
  --wpforms-field-text-color: rgba( 0, 0, 0, 0.7 );
  --wpforms-field-menu-color: #ffffff;
  --wpforms-label-color: rgba( 0, 0, 0, 0.85 );
  --wpforms-label-sublabel-color: rgba( 0, 0, 0, 0.55 );
  --wpforms-label-error-color: #d63637;
  --wpforms-button-border-radius: 3px;
  --wpforms-button-border-style: none;
  --wpforms-button-border-size: 1px;
  --wpforms-button-background-color: #066aab;
  --wpforms-button-border-color: #066aab;
  --wpforms-button-text-color: #ffffff;
  --wpforms-page-break-color: #066aab;
  --wpforms-background-image: none;
  --wpforms-background-position: center center;
  --wpforms-background-repeat: no-repeat;
  --wpforms-background-size: cover;
  --wpforms-background-width: 100px;
  --wpforms-background-height: 100px;
  --wpforms-background-color: rgba( 0, 0, 0, 0 );
  --wpforms-background-url: none;
  --wpforms-container-padding: 0px;
  --wpforms-container-border-style: none;
  --wpforms-container-border-width: 1px;
  --wpforms-container-border-color: #000000;
  --wpforms-container-border-radius: 3px;
  --wpforms-field-size-input-height: 43px;
  --wpforms-field-size-input-spacing: 15px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-field-size-line-height: 19px;
  --wpforms-field-size-padding-h: 14px;
  --wpforms-field-size-checkbox-size: 16px;
  --wpforms-field-size-sublabel-spacing: 5px;
  --wpforms-field-size-icon-size: 1;
  --wpforms-label-size-font-size: 16px;
  --wpforms-label-size-line-height: 19px;
  --wpforms-label-size-sublabel-font-size: 14px;
  --wpforms-label-size-sublabel-line-height: 17px;
  --wpforms-button-size-font-size: 17px;
  --wpforms-button-size-height: 41px;
  --wpforms-button-size-padding-h: 15px;
  --wpforms-button-size-margin-top: 10px;
  --wpforms-container-shadow-size-box-shadow: none;
}

/* -------- 2.7 Hotline / Tư vấn nổi (khối cố định góc màn hình) -------- */
.mobile-hotline {display:none}

.hotline {
  position: fixed;
  left: 20px;
  bottom: 10px;
  z-index: 9000;
  display: block;
  background: #fac100;
  color: red;
  padding: 5px 12px;
  border-radius: 99px;
}
.hotline .hotline-number {font-size:20px; color: #b20000; font-weight: bold}

.support {
  position: fixed;
  left: 20px;
  bottom: 60px;
  z-index: 9000;
  display: block;
  background: #fac100;
  color: red;
  padding: 5px 12px;
  border-radius: 99px;
}
.support .text-support {font-size:20px; color: #b20000; font-weight: bold}

@media (max-width: 767px) {
  .hotline, .support {display: none;}
  .mobile-hotline{display: block; bottom: 0; width: 100%; background:rgba(0,0,0,0.5); height: 60px; position: fixed; z-index:9999999}
  .mobile-hotline .mobile-hotline-left{width: 45%; float: left; text-align: center; background: rgb(192,30,46); margin-left: 10px; margin-right:5px; margin-top: 7px; height: 45px; border-radius: 4px}
  .mobile-hotline .mobile-hotline-left a{color: white; line-height: 46px; font-size:16px; font-weight: bold}
  .mobile-hotline .mobile-hotline-right{width: 45%; float: right; text-align: center; background: rgb(248,170,63); margin-left: 5px; margin-right: 10px; margin-top: 7px; height: 45px; border-radius: 4px}
  .mobile-hotline .mobile-hotline-right a{color: #fff; line-height: 46px; font-size: 16px; font-weight: bold}
}

/* -------- 2.8 CSS theo từng section / col / gap của index.html -------- */

/* Section: TƯ VẤN DỊCH VỤ (một block dùng chung PC + SP) */
#section_1144144903 {
  padding-top: 70px;
  padding-bottom: 70px;
}
/* Nền ngà như mục Giá trị cốt lõi / Chuyên gia (trước là đỏ đậm #6E1218 —
   khách thấy không ăn nhập với phần còn lại của site). Chữ và accordion
   chuyển sang tông sáng ở mục 20. */
#section_1144144903 .section-bg {
  position: absolute;
  inset: 0;
  background: #F7F2EB;
  border-top: 1px solid #EDE3DA;
  border-bottom: 1px solid #EDE3DA;
}

#col-381027505 > .col-inner { padding: 60px 30px 30px 30px; }
#col-1705270591 > .col-inner { padding: 0px 0px 0px 40px; }

/* Section: ĐỐI TÁC */
#section_1092990423 { padding-top: 15px; padding-bottom: 15px; }

/* Section: DỊCH VỤ */
#section_400538625 { padding-top: 50px; padding-bottom: 50px; }
#col-1911581417 > .col-inner { padding: 70px 30px 40px 30px; }
#col-62610981 > .col-inner,
#col-997052117 > .col-inner,
#col-500785679 > .col-inner,
#col-1305052266 > .col-inner,
#col-1316316551 > .col-inner,
#col-1168047441 > .col-inner { padding: 30px 20px 20px 20px; }   /* bù gap 30px */

/* bù div gap 15px ở cuối thẻ dịch vụ bản mobile */
.icon-box-center .icon-box-text { padding-bottom: 15px; }

/* Section: GIỚI THIỆU / TÔN CHỈ */
#section_559191335 {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgb(246, 246, 246);
}
#col-1991944271 > .col-inner { padding: 0px 30px 0px 0px; }

/* Section: SỐ LIỆU + TIN TỨC */
#section_536130618,
#section_95357039 { padding-top: 30px; padding-bottom: 30px; }

/* ==========================================================================
   3. CSS TÁCH TỪ THUỘC TÍNH style="..." TRÊN THẺ HTML
   (mỗi giá trị lặp lại nhiều lần chỉ khai báo 1 lần → dùng chung)
   ========================================================================== */

/* --- khoảng cách --- */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }   /* thay div gap 15px */
.mt-30 { margin-top: 30px; }   /* thay div gap 30px */
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.pb-0 { padding-bottom: 0px; }
.p-15 { padding: 15px; }
.gap-element { display: block; height: auto; }

/* --- hiển thị / căn chữ / màu --- */
.is-hidden { display: none; }
.text-justify { text-align: justify; }
.text-primary { color: #c01e2e; }

/* --- kích thước ảnh & icon --- */
.w-100 { width: 100px; }
.w-80 { width: 80px; }
.h-20 { height: 20px; }
.h-50 { height: 50px; }
.h-70 { height: 70px; }
.fs-15 { font-size: 15px; }
.mw-600 { max-width: 600px; }
.img-fluid { width: 100%; }   /* thay cho #image_* khi đã bỏ 2 lớp div bọc ảnh */

/* --- chiều rộng khối ux-logo (trước đây ghi inline) --- */
.ux-w-58 { max-width: 100% !important; width: 58.571428571429px !important; }
.ux-w-101 { max-width: 100% !important; width: 101.42857142857px !important; }
.ux-w-193 { max-width: 100% !important; width: 193.55140186916px !important; }
.ux-w-200 { max-width: 100% !important; width: 200.31496062992px !important; }
.ux-w-248 { max-width: 100% !important; width: 248.01526717557px !important; }
.ux-w-265 { max-width: 100% !important; width: 265.62px !important; }
.ux-w-268 { max-width: 100% !important; width: 268.09523809524px !important; }

/* --- tiêu đề nhỏ --- */
.doitac-title { line-height: 22px; letter-spacing: 1px; margin-bottom: 0px; }
.sec-sub { margin-bottom: 5px; letter-spacing: 0px; font-size: 14px; color: #c01e2e; }

/* --- số liệu funfact --- */
.funfact-num { font-size: 60px; margin-bottom: 0px; color: #c01e2e; }
.funfact-num-sm { font-size: 40px; margin-bottom: 0px; color: #c01e2e; }

/* --- chữ chạy nền (bản mobile) --- */
.marquee-static { font-size: 30px; color: #c0232e; opacity: .3; text-align: center; margin-bottom: 0px; }

/* --- khối tiêu đề "Đội ngũ chuyên gia" --- */
.sec-head-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: none;
  gap: 24px;
  flex-wrap: wrap;
}
.sec-head-title { font-size: clamp(26px, 3.4vw, 36px); margin-top: 14px; }

/* --- màu ảnh đại diện chuyên gia --- */
.face-1 { --f1: #BFC8CB; --f2: #8E9AA0; }
.face-2 { --f1: #C9C1B4; --f2: #9A907F; }
.face-3 { --f1: #C3C8BB; --f2: #8F9788; }
.face-4 { --f1: #CDBFC4; --f2: #9C8B92; }

/* --- ảnh tin tức --- */
.pt-65 { padding-top: 65%; }
.pt-75 { padding-top: 75%; }

/* --- footer --- */
.ftr-desc { margin-top: 14px; font-size: 14px; }

/* --- BỔ SUNG: các giá trị inline lấy từ 12 trang con --- */

/* khoảng cách / kích thước */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.p-20 { padding: 20px; }
.w-90 { width: 90px; }
.w-35p { width: 35%; }
.h-150 { height: 150px; }
.mw-100 { max-width: 100px; }
.mw-800 { max-width: 800px; }
.ux-w-299 { max-width: 100% !important; width: 299.70954356846px !important; }

/* tỉ lệ khung ảnh (padding-top là chiều cao theo % chiều rộng) */
.pt-5625 { padding-top: 56.25%; }   /* 16:9 */

/* chữ */
.fs-90 { font-size: 90%; }
.fs-95 { font-size: 95%; }
.fs-30 { font-size: 30px; }
.fs-35 { font-size: 35px; }
.fw-400 { font-weight: 400; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* màu */
.c-white { color: #fff; }
.text-accent { color: #f8a93f; }
.link-white-underline { color: #fff; text-decoration: underline; }
.bg-brand-red { background-color: rgb(192, 35, 46); }
.bg-brand-orange { background-color: rgb(209, 88, 51); }
.bg-brand-amber { background-color: rgb(239, 157, 70); }

/* số liệu funfact (biến thể màu vàng) */
.funfact-num-accent { font-size: 60px; margin-bottom: 0; color: #f8a93f; }

/* viền */
.no-border { border: 0; }
.br-99 { border-radius: 99px; }

/* ==========================================================================
   4. CSS RIÊNG CỦA TỪNG TRANG CON
   Tách từ các thẻ <style> rời nằm trong <body> của mỗi trang (Flatsome sinh ra
   một khối <style> cho mỗi section / row / col / gap / ảnh). Selector đều là #id
   duy nhất nên không đụng nhau; rule nào đã có ở mục 2.8 (index.html) thì bỏ.
   ========================================================================== */

/* -------- 4.1  gioi-thieu.html — Giới thiệu -------- */
/* Trang đã dựng lại theo phong cách trang chủ — toàn bộ CSS nằm ở mục 11.
   Các rule theo id Flatsome cũ (page-header, section, col, gap…) đã bỏ vì
   markup tương ứng không còn. */

/* -------- 4.2  dich-vu-tham-dinh-gia.html — Dịch vụ thẩm định giá -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.3  tham-dinh-gia-bat-dong-san.html — Thẩm định giá bất động sản -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.4  tham-dinh-gia-dong-san.html — Thẩm định giá động sản -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.5  tham-dinh-du-an-dau-tu.html — Thẩm định dự án đầu tư -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.6  tham-dinh-tai-san-vo-hinh.html — Thẩm định tài sản vô hình -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.7  tham-dinh-tai-san-tai-chinh.html — Thẩm định tài sản tài chính -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.8  tham-dinh-gia-tri-doanh-nghiep.html — Thẩm định giá trị doanh nghiệp -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.9  du-an-tieu-bieu.html — Dự án tiêu biểu -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.10  lien-he.html — Liên hệ -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.11  cap-nhat-quy-dinh-moi-ve-hoat-dong-tham-dinh-gia-tai-san.html — Tin tức (bài mẫu) -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* -------- 4.12  dao-tao-noi-bo-cap-nhat-tieu-chuan-tham-dinh-gia-viet-nam.html — Tin tức (bài mẫu) -------- */
/* Trang đã dựng lại theo giao diện mới — CSS nằm ở mục 12 (và mục 11 cho banner).
   Các rule theo id Flatsome cũ đã bỏ vì markup tương ứng không còn. */

/* ==========================================================================
   5. CHỐNG TRÀN NGANG TRÊN MÀN HÌNH HẸP
   Đặt cuối file để đè được các mục trên mà không phải sửa CSS ở mục 1.
   Mỗi rule dưới đây tương ứng một chỗ đã đo được là làm trang cuộn ngang.
   ========================================================================== */

/* 5.1 Menu xổ xuống ở nhóm nav bên phải bị thò ra ngoài mép phải.
   Dropdown là position:absolute, rộng tối thiểu 260px và chỉ ẩn bằng
   visibility nên vẫn chiếm chỗ -> vẫn tính vào bề rộng cuộn.
   Đo ở 850px: mép phải chạm 1010px. Cho nhóm bên phải mở ngược vào trong. */
.nav-right .nav-dropdown,
.header-nav.nav-right .nav-dropdown {
  left: auto;
  right: 0;
}

/* 5.2 Lưới footer để cứng 4 cột, không có breakpoint nên dưới ~560px thì
   tràn (đo ở 500px: cần 551px). Xếp lại thành 2 cột rồi 1 cột. */
@media screen and (max-width: 849px) {
  .ftr-g {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media screen and (max-width: 549px) {
  .ftr-g {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* 5.3 iframe bản đồ Google ở trang Liên hệ có thuộc tính width="600"
   nên không co lại theo khung (đo ở 504px: mép phải chạm 630px). */
iframe {
  max-width: 100%;
}

/* 5.4 Trong khối .box-vertical (ảnh trái – chữ phải), phần chữ là flex item
   nên mặc định min-width:auto, không co nhỏ hơn nội dung được -> tràn.
   Đo ở 550px trên các trang dịch vụ: mép phải chạm 575px. */
.box-vertical .box-text,
.box-vertical .box-text-inner {
  min-width: 0;
}

/* 5.5 Chuỗi dài không có dấu cách (email, số điện thoại) không thể xuống dòng
   nên đẩy rộng cả cột. Đo ở 550px: "info@thamdinhgiavng.com" làm mép phải chạm
   568px. break-word chỉ ngắt khi thật sự hết chỗ, chữ bình thường không đổi. */
body {
  overflow-wrap: break-word;
}


/* ==========================================================================
   6. TINH CHỈNH BẢN ĐIỆN THOẠI
   Đo trên màn 390px. Đặt cuối file để đè được CSS ở mục 1 mà không phải
   sửa trực tiếp vào đó.
   ========================================================================== */

/* 6.1 Khối "Đội ngũ chuyên gia" (.grid.g4) giữ nguyên 4 cột ở mọi bề ngang.
   Đo ở 390px: mỗi cột chỉ còn 63.5px, ô chức danh 26px — chữ vỡ từng chữ cái.
   Xuống 2 cột từ 850px trở xuống. */
@media screen and (max-width: 849px) {
  .grid.g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6.2 Nới chỗ cho màn hình hẹp: bớt padding, thu nhỏ thẻ chuyên gia */
@media screen and (max-width: 549px) {
  .wrap {
    padding: 0 20px;
  }
  .sec {
    padding: 40px 0;
  }
  .sec.tight {
    padding: 40px 0;
  }
  .sec-head {
    margin-bottom: 26px;
  }
  .grid {
    gap: 16px;
  }
  .exp .face {
    height: 150px;
  }
  .exp-b {
    padding: 13px;
  }
  .exp-b h3 {
    font-size: 15.5px;
  }
  .exp-b .role {
    font-size: 12.5px;
    min-height: 0;
  }
  .ftr .wrap {
    padding-top: 40px;
  }
}

/* 6.3 Thanh hotline là position:fixed cao 60px, đè lên phần cuối trang.
   Đo: #wrapper có padding-bottom 0 nên dòng bản quyền bị che.
   Thanh này chỉ hiện dưới 768px (xem mục 2.7) nên chừa chỗ đúng khoảng đó. */
@media screen and (max-width: 767px) {
  #wrapper {
    padding-bottom: 68px;
  }
}

/* 6.4 Khung form "Tư vấn dịch vụ" trên điện thoại, dưới 550px.
   Trang chủ dùng MỘT block cho cả PC và SP: #section_1144144903 (xuất hiện 2
   lần — đầu trang và trước mục Khách hàng), form #col-381027505, chữ
   #col-1705270591. Block SP riêng trước đây đã xoá.
   Đo ở 390px trước khi sửa:
     - padding khung 40px 15px 0 -> nút "Gửi yêu cầu" dính sát đáy khung
     - .col lồng trong form thêm 15px mỗi bên -> tiêu đề thụt 15px nhưng
       ô nhập thụt 30px, hai mép lệch nhau, ô nhập chỉ còn 300/360px
   Sửa: padding nhỏ gọn hơn, có lề dưới, bỏ padding ngang của cột lồng để ô
   nhập thẳng mép với tiêu đề. */
@media screen and (max-width: 549px) {
  #col-381027505 > .col-inner {
    padding: 24px 16px 24px;
  }
  #col-381027505 .wpcf7-form .row > .col {
    padding-left: 0;
    padding-right: 0;
  }
  #col-381027505 h2 {
    font-size: 22px;
    margin-bottom: 6px;
  }
  /* Điện thoại: cột chữ lên TRÊN, form xuống DƯỚI (HTML vẫn là form trước,
     đổi thứ tự bằng order của flex nên bản máy tính không bị ảnh hưởng).
     Cột chữ bỏ thụt trái 40px; khoảng cách với form do padding-bottom 30px
     của .col đảm nhận nên không cần padding trên/dưới nữa. */
  #col-1705270591 {
    order: -1;
  }
  #col-1705270591 > .col-inner {
    padding: 0;
  }
}

/* 6.5 Block PC dùng chung cho máy tính bảng / điện thoại
   Trước đây trang chủ có block SP riêng (.show-for-medium) cho Tôn chỉ, Số
   liệu, Tư vấn, Tin tức; nay chỉ giữ block PC nên phải tự co lại ở màn hẹp. */

/* --- Dịch vụ (#section_400538625 — trang chủ và trang Giới thiệu) ---------
   Thẻ dịch vụ là .medium-3 (25%): ở 550–849px chỉ còn ~140px, dưới 550px xếp
   1 cột dài ~2700px -> đổi thành lưới 2 cột, khối giới thiệu dịch vụ rộng hết.
   Selector phải có #section_400538625 mới thắng padding theo #col-… ở mục 2.8;
   display:flex giúp 2 thẻ cùng dòng cao bằng nhau. */
@media screen and (max-width: 849px) {
  #section_400538625 .row-small > .boxService {
    width: 100%;
  }
  #section_400538625 .row-small > .col:not(.boxService) {
    display: flex;
    width: 50%;
  }
  #section_400538625 .row-small > .col:not(.boxService) > .col-inner {
    width: 100%;
  }
}
@media screen and (max-width: 549px) {
  #section_400538625 .row-small > .col {
    padding: 0 6px 12px;
  }
  #section_400538625 .row-small > .col:not(.boxService) > .col-inner {
    padding: 18px 14px 16px;
  }
  #section_400538625 .boxService > .col-inner {
    padding: 32px 20px 28px;
  }
  #section_400538625 .headline_content {
    font-size: 24px;
  }
  #section_400538625 .icon-box-img {
    width: 56px;
    margin-bottom: 10px;
  }
  #section_400538625 .icon-box-text h4 {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.3;
  }
  #section_400538625 .icon-box-text p {
    margin-bottom: 0;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
  }
  #section_400538625 .icon-box-text .button.is-link {
    margin-top: 10px;
    font-size: 13px;
  }
}

/* --- Tôn chỉ hoạt động (#section_559191335) + Số liệu (#section_536130618) --- */
@media screen and (max-width: 549px) {
  /* chữ chạy 80px cao gần bằng nửa màn hình điện thoại */
  #section_559191335 .marqueeText h2 {
    font-size: 44px;
    line-height: 56px;
  }
  /* ảnh xếp chồng trên chữ: bỏ đệm phải 30px dành cho bố cục 2 cột */
  #col-1991944271 > .col-inner {
    padding: 0;
  }
  /* 4 con số 60px xếp dọc chiếm gần hết màn hình -> lưới 2 x 2 */
  #section_536130618 .col.medium-3 {
    width: 50%;
    margin-bottom: 18px;
    padding-left: 6px;
    padding-right: 6px;
  }
  #section_536130618 .col.medium-3 > .col-inner {
    text-align: center;
  }
  #section_536130618 .funfact-num {
    font-size: 34px;
  }
  /* cột chỉ ~120px: căn đều hai bên làm chữ giãn lỗ chỗ -> căn giữa */
  #section_536130618 .col.medium-3 p {
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
  }
}

/* 6.6 Bớt khoảng trắng dọc trên điện thoại (dưới 550px)
   Đo ở 390px trước khi sửa (khoảng trống từ mép section tới nội dung):
     - Tư vấn: padding section 70px + padding-bottom 30px của cột form (form
       nằm cuối do order) -> ~100px nền đỏ trống dưới form
     - Dịch vụ: trên 112px (section 50 + hàng .mt-30 30 + cột), dưới 66px
     - Tôn chỉ: dưới 86px (section 40 + cột 30 + margin nút 16)
   Khoảng .sec (chuyên gia, trang Giới thiệu) chỉnh ở mục 6.2. */
@media screen and (max-width: 549px) {
  #section_1144144903 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #col-381027505 {
    padding-bottom: 0;
  }
  #section_400538625 {
    padding-top: 32px;
    padding-bottom: 20px;
  }
  #section_400538625 > .section-content > .row.mt-30:first-child {
    margin-top: 0;
  }
  #section_400538625 > .section-content > .row.align-middle.mt-30 {
    margin-top: 8px;
  }
  #section_400538625 .button-cus,
  #section_559191335 .button-cus {
    margin-bottom: 0;
  }
  #section_559191335 {
    padding-top: 32px;
    padding-bottom: 10px;
  }
}

/* ==========================================================================
   7. LOGO MỚI (images/logo.webp)
   Ảnh gốc 562x762, chỉ một màu vàng #F8D858 trên nền TRONG SUỐT (77% pixel
   trong suốt) — đặt trên nền trắng sẽ gần như không nhìn thấy. Vì vậy biểu
   tượng được đặt trong huy hiệu tròn nền đỏ thương hiệu, đúng cách bố cục cũ.

   Bố cục ảnh theo chiều dọc (đo bằng canvas):
     rows   0–586  biểu tượng (đôi rồng + chữ S)
     rows 621–679  dòng chữ "STC VIETNAM"
   Huy hiệu chỉ hiện phần biểu tượng; dòng chữ đã có sẵn ở .logo-txt bên cạnh
   nên không lặp lại. Cách cắt: đẩy ảnh lên sao cho TÂM BIỂU TƯỢNG (ở 38.5%
   chiều cao ảnh) trùng tâm huy hiệu -> translateY(-38.5%).
   ========================================================================== */
.logo-mark {
  width: 54px;
  height: 54px;
  overflow: hidden;
  /* bỏ 2 vòng inset cũ: bản thân logo đã có vòng rồng, thêm vòng nữa sẽ rối */
  box-shadow: none;
}
.logo-mark img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: auto;
  transform: translate(-50%, -38.5%);
  /* Cắt bỏ hẳn phần dưới của ảnh (dòng chữ nằm từ 77% chiều cao trở xuống).
     Chỉ dựa vào overflow của huy hiệu thì vẫn hở một vạch mỏng ~0.6px ở đáy. */
  clip-path: inset(0 0 23% 0);
}
.logo2.on-dark .logo-mark {
  /* nền tối: giữ nguyên đỏ thương hiệu để logo vàng vẫn nổi */
  background: #9E1B22;
  box-shadow: none;
}
.logo-mark b { display: none; }   /* chữ S vẽ bằng CSS của bản trước */

/* Đồng bộ sắc vàng của site theo đúng màu logo (#E8B93C -> #F8D858) */
.--gold,
.--white .accordion-title.active {
  color: #F8D858 !important;
}
.--gold span {
  background: #F8D858 !important;
}
.ftr a:hover,
.ftr .tag,
.ftr .addr i {
  color: #F8D858;
}
.logo2.on-dark .logo-txt strong {
  color: #F8D858;
}

/* Huy hiệu không được co lại khi nằm trong flex của #logo (trang con bị bóp
   thành hình bầu dục và lộ cả dòng chữ nằm trong ảnh). */
.logo-mark {
  flex: 0 0 auto;
}

/* Header của 12 trang con là loại trong suốt/nền tối (.nav-dark) nên chữ cạnh
   logo phải sáng, không dùng màu đỏ như trên nền trắng của trang chủ. */
.nav-dark .logo2 .logo-txt strong {
  color: #F8D858;
}
.nav-dark .logo2 .logo-txt span {
  color: rgba(255, 255, 255, .78);
}

/* Hai điểm nhấn vàng ở thẻ tin tức cũng lấy theo màu logo */
.home-blog .box-image::after {
  background: linear-gradient(90deg, #9E1B22, #F8D858);
}
.home-blog .post-date::before {
  background: #F8D858;
}


/* ==========================================================================
   8. ĐỘI NGŨ CHUYÊN GIA — nút "Xem thêm"
   Thẻ KHÔNG bị ẩn sẵn ở đây; js/script.js?ver=1.0.2 gắn .exp-hidden từ thẻ thứ 5 trở đi
   khi trang tải xong. Nhờ vậy nếu JS lỗi thì vẫn hiện đủ chuyên gia.
   ========================================================================== */
.exp-hidden {
  display: none;
}
.exp-more {
  margin-top: 28px;
  text-align: center;
}
.exp-more .btn {
  min-width: 220px;
}
/* nút rỗng (chưa có ai để hiện thêm) thì không chiếm chỗ */
.exp-more .btn:empty {
  display: none;
}

/* --- Nút "Xem thêm": con trỏ, phông chữ và hiệu ứng rê chuột ---------------
   .btn vốn được viết cho thẻ <a> nên thiếu 2 thứ khi dùng trên <button>:
     - cursor: mặc định của <button> là "default", không phải bàn tay
     - font-family: <button> KHÔNG thừa kế phông của trang, đang ra Arial
   Hiệu ứng: nền gradient trượt ngang + nhấc nhẹ + đổ bóng đỏ thương hiệu. */
.btn {
  cursor: pointer;
  font-family: inherit;
}

.exp-more .btn {
  border: 0;
  /* vẽ gradient rộng gấp đôi rồi trượt vị trí -> chuyển màu mượt khi hover */
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position .45s ease, transform .2s ease, box-shadow .25s ease;
}
.exp-more .btn:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(158, 27, 34, .3);
}
.exp-more .btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(158, 27, 34, .28);
}
.exp-more .btn:focus-visible {
  outline: 2px solid #9E1B22;
  outline-offset: 3px;
}

/* mũi tên chỉ xuống, lật lên khi đã mở hết (dựa vào aria-expanded) */
.exp-more .btn::after {
  content: "";
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.exp-more .btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .exp-more .btn,
  .exp-more .btn::after {
    transition: none;
  }
  .exp-more .btn:hover {
    transform: none;
  }
}


/* ==========================================================================
   9. HIỆU ỨNG HIỆN DẦN KHI CUỘN
   Phần tử mang data-reveal="left|right|up" sẽ mờ dần + trượt vào chỗ khi lọt
   vào khung nhìn (js/script.js?ver=1.0.2 dùng IntersectionObserver gắn .is-revealed).

   Trạng thái ẩn ban đầu CHỈ áp dụng khi <html> có class .js-reveal — class này
   được gắn ở dòng đầu script.js?ver=1.0.2, chạy đồng bộ trong <head> trước khi trang vẽ.
   Nhờ vậy: không nháy nội dung lúc tải, mà nếu JS lỗi thì cũng không mất gì.
   ========================================================================== */

/* Cắt tràn ngang: lúc chưa hiện, cột bị đẩy lệch 48px sang hai bên. */
[data-reveal-wrap] {
  overflow: hidden;
}

.js-reveal [data-reveal] {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal="left"] {
  transform: translateX(-48px);
}
.js-reveal [data-reveal="right"] {
  transform: translateX(48px);
  transition-delay: .12s;      /* lệch nhịp nhẹ cho đỡ đơn điệu */
}
.js-reveal [data-reveal="up"] {
  transform: translateY(36px);
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   10. HEADER & MENU ĐIỆN THOẠI (dưới 850px)
   Đo ở 390px trước khi sửa:
     - .header-main cao 70px nhưng .header-inner để min-height 90px -> nội dung
       tràn 20px, huy hiệu logo đè xuống khối đỏ bên dưới
     - cột "Mobile Left Elements" rỗng vẫn chiếm chỗ (flex: 1) nên logo lệch
       sang phải, không trái cũng không giữa
     - nút hamburger là viên thuốc đỏ bo 99px, 51x37
     - menu mở ra: không có lớp phủ, chạm ra ngoài / nhấn Esc không đóng; nút ×
       chỉ rộng 14px; bấm × thì trang nhảy lên đầu (href="#"); thanh
       "Tư vấn / Gọi điện" (z-index 9999999) đè lên đáy menu; lúc đóng vẫn lộ
       bóng xám ở mép phải màn hình; chữ căn giữa, menu con đỏ, nút tìm màu cam
   Cách sửa: logo trái – nút phải; menu mở/đóng bằng JS (js/script.js?ver=1.0.2 gắn
   html.menu-open). Không có JS thì :target ở mục 0.8 vẫn chạy như cũ.
   ========================================================================== */

/* --- 10.1 Thanh header --------------------------------------------------- */
@media screen and (max-width: 849px) {
  #masthead.header-main {
    height: 64px;
  }
  #masthead .header-inner {
    height: 64px;
    min-height: 64px;
    padding: 0 16px;
  }
  /* cột trái rỗng: bỏ hẳn để logo nằm sát trái */
  #masthead .header-inner > .flex-col.show-for-medium.flex-left {
    display: none;
  }
  #masthead .header-inner > #logo {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  #masthead .header-inner > .flex-col.show-for-medium.flex-right {
    order: 2;
    flex: 0 0 auto;
  }
  /* đường kẻ dưới header cắt ngang ảnh tiêu đề ở trang con */
  #masthead .top-divider {
    display: none;
  }

  /* logo gọn lại cho vừa thanh 64px */
  #masthead .logo2 {
    gap: 10px;
  }
  #masthead .logo-mark {
    width: 44px;
    height: 44px;
  }
  #masthead .logo-txt strong {
    font-size: 17px;
  }
  #masthead .logo-txt span {
    font-size: 9.5px;
    letter-spacing: .04em;
  }

  /* nút hamburger: ô vuông bo góc 44x44 (đủ lớn để chạm) */
  #masthead .header-button .button {
    width: 44px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background-color: #9E1B22;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(158, 27, 34, .25);
    transition: background-color .2s, transform .2s;
  }
  #masthead .header-button .button:hover {
    opacity: 1;
    background-color: #7F141A;
  }
  #masthead .header-button .button:active {
    transform: scale(.94);
  }
  #masthead .header-button .icon-menu::before {
    border-radius: 2px;
  }
  /* trang con: header trong suốt nằm trên ảnh tối -> nút kính mờ */
  #masthead.nav-dark .header-button .button {
    border: 1px solid rgba(255, 255, 255, .35);
    background-color: rgba(255, 255, 255, .14);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  #masthead.nav-dark .header-button .button:hover {
    background-color: rgba(255, 255, 255, .24);
  }
}

/* --- 10.2 Panel menu ----------------------------------------------------- */
/* Panel không tự cuộn: thanh tiêu đề + nút × đứng yên, chỉ danh sách bên
   dưới (.sidebar-menu) cuộn. */
.mobile-sidebar.mfp-hide {
  display: flex !important;
}
.mobile-sidebar {
  flex-direction: column;
  width: 340px;
  max-width: 86vw;
  padding: 0;
  overflow: hidden;
  background: #fff;
  z-index: 10000001;          /* trên thanh .mobile-hotline (9999999) */
  visibility: hidden;         /* đóng thì không nhận Tab / chạm */
  box-shadow: none;           /* bóng chỉ có khi mở, hết lộ dải xám mép phải */
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s, visibility 0s linear .32s;
}
.mobile-sidebar:target,
html.menu-open .mobile-sidebar {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -16px 0 40px rgba(0, 0, 0, .22);
  transition-delay: 0s;
}

/* thanh tiêu đề */
.mobile-sidebar::before {
  content: "Menu";
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: #9E1B22;
  color: #F8D858;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* nút đóng: vẽ dấu × bằng 2 gạch, vùng chạm 44x44 */
.mobile-sidebar-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-size: 0;
  transition: background-color .2s;
}
.mobile-sidebar-close::before,
.mobile-sidebar-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.mobile-sidebar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-sidebar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mobile-sidebar-close:hover,
.mobile-sidebar-close:focus-visible {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* vùng danh sách cuộn được */
.mobile-sidebar .sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

/* ô tìm kiếm: nút tìm nằm gọn bên trong ô */
.mobile-sidebar .nav-vertical > li.header-search-form {
  padding: 16px 20px 8px;
}
#main-menu .searchform .flex-row {
  position: relative;
  gap: 0;
}
#main-menu .searchform .flex-col {
  position: static;
}
#main-menu .searchform .flex-grow {
  flex: 1 1 auto;
}
#main-menu .search-field {
  height: 46px;
  margin: 0;
  padding: 0 52px 0 16px;
  border: 1px solid #ECE4E4;
  border-radius: 12px;
  background: #F7F3F3;
  font-size: 15px;
}
#main-menu .search-field:focus {
  border-color: #9E1B22;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(158, 27, 34, .12);
}
#main-menu .ux-search-submit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background-color: #9E1B22;
  color: #fff;
  font-size: 16px;
}

/* mục cấp 1 */
.mobile-sidebar .nav-vertical > li.menu-item {
  position: relative;
  border-bottom: 1px solid #F1EAEA;
}
.mobile-sidebar .nav-vertical > li > a {
  display: block;
  padding: 15px 56px 15px 20px;
  border-bottom: 0;
  color: #2A2A2A;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: normal;
}
.mobile-sidebar .nav-vertical > li > a:hover,
.mobile-sidebar .nav-vertical li.is-current > a {
  color: #9E1B22;
}
/* vạch đỏ bên trái: trang đang xem (hoặc nhóm chứa trang đang xem) */
.mobile-sidebar .nav-vertical > li.is-current > a,
.mobile-sidebar .nav-vertical > li.has-current > a {
  box-shadow: inset 3px 0 0 #9E1B22;
}

/* nút mũi tên mở menu con (JS chèn vào) */
.mobile-sidebar .sub-toggle {
  position: absolute;
  top: 3px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9E1B22;
  font-size: 16px;
  cursor: pointer;
}
.mobile-sidebar .sub-toggle:hover {
  background: #F7F0F0;
}
.mobile-sidebar .sub-toggle .icon-angle-down {
  transition: transform .25s;
}
.mobile-sidebar .sub-toggle[aria-expanded="true"] .icon-angle-down {
  transform: rotate(180deg);
}

/* menu con */
.mobile-sidebar .nav-vertical .children {
  margin: 0;
  padding: 0 20px 12px;
}
.mobile-sidebar .nav-vertical .children li > a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 2px solid #EEE3E3;
  color: #555;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}
.mobile-sidebar .nav-vertical .children li > a:hover,
.mobile-sidebar .nav-vertical .children li.is-current > a {
  border-left-color: #9E1B22;
  color: #9E1B22;
}

/* --- 10.3 Lớp phủ + khoá cuộn trang khi menu mở ------------------------- */
.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  background: rgba(24, 6, 8, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s, visibility 0s linear .32s;
  -webkit-tap-highlight-color: transparent;
}
html.menu-open .mobile-sidebar-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sidebar,
  .mobile-sidebar-overlay {
    transition: none;
  }
}


/* ==========================================================================
   11. TRANG GIỚI THIỆU (gioi-thieu.html)
   Dựng lại theo phong cách trang chủ thay cho bố cục Flatsome cũ (ảnh
   placeholder, tiêu đề trơn + gạch đỏ, icon-box trống, footer xám).
   Dùng lại thành phần của trang chủ: .subTitle, .text-cus-1, .sec / .sec.ivory,
   .funfact-num, lưới chuyên gia .grid.g4 + nút "Xem thêm", khối dịch vụ
   #section_400538625, hiệu ứng data-reveal và footer .ftr.
   Class riêng của trang đều bắt đầu bằng .ab- nên không đụng trang khác.
   ========================================================================== */

/* --- 11.1 Banner đầu trang ---------------------------------------------- */
/* Header trang con trong suốt, position:absolute cao 90px (64px trên điện
   thoại, mục 10.1) nằm đè lên banner -> padding-top phải chừa đủ chỗ. */
.ab-hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 84px;
  background:
    linear-gradient(115deg, rgba(62, 10, 14, .96) 0%, rgba(110, 18, 24, .9) 48%, rgba(158, 27, 34, .78) 100%),
    url(../images/about_img.webp) center / cover no-repeat;
  color: #fff;
}
/* huy hiệu logo mờ ở góc phải */
.ab-hero::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -40px;
  width: 420px;
  height: 420px;
  background: url(../images/logo.webp) center / contain no-repeat;
  opacity: .07;
  transform: translateY(-42%);
  pointer-events: none;
}
.ab-hero .wrap {
  position: relative;
  z-index: 1;
}
.ab-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ab-crumbs a {
  color: #F8D858;
}
.ab-crumbs a:hover {
  color: #fff;
}
.ab-hero-title {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.ab-hero-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 18px;
  background: linear-gradient(90deg, #F8D858, rgba(248, 216, 88, 0));
}
.ab-hero-lead {
  max-width: 580px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: 17px;
  line-height: 1.6;
}

/* --- 11.2 Về chúng tôi + số liệu ---------------------------------------- */
.ab-intro-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* ảnh có khung vàng lệch phía sau + huy hiệu năm thành lập */
.ab-intro-media {
  position: relative;
  padding: 0 0 28px 28px;
}
.ab-intro-media::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 75%;
  border: 2px solid #E8B93C;
}
.ab-intro-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .18);
}
/* Huy hiệu đặt ở góc TRÊN TRÁI: góc dưới phải của ảnh có chữ
   "STC VIETNAM – Tài chính hiệu quả…" in sẵn, đặt ở đó sẽ che mất chữ. */
.ab-badge {
  position: absolute;
  top: -44px;
  left: -24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #9E1B22;
  box-shadow: 0 12px 30px rgba(158, 27, 34, .35);
  color: #fff;
  text-align: center;
}
.ab-badge strong {
  color: #F8D858;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 38px;
  line-height: 1;
}
.ab-badge span {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ab-intro-text .text-cus-1,
.ab-team-g .text-cus-1 {
  margin-bottom: 18px;
}
.ab-intro-text .text-justify,
.ab-team-g .text-justify {
  color: #4A3C3C;
}

.ab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid #EDE3DA;
}
.ab-stat {
  text-align: center;
}
.ab-stat .funfact-num {
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
}
.ab-stat p {
  margin: 10px 0 0;
  text-align: center;
  color: #7A6968;
  font-size: 14.5px;
  line-height: 1.45;
}

/* --- 11.3 Giá trị cốt lõi ----------------------------------------------- */
.ab-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.ab-head .text-cus-1 {
  margin-bottom: 0;
}
.ab-values-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ab-values-g > div {
  display: flex;
}
.ab-value {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 40px 32px 34px;
  border-top: 3px solid #9E1B22;
  background: #fff;
  box-shadow: 0 6px 20px rgba(42, 29, 30, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ab-value:hover {
  box-shadow: 0 10px 20px rgba(192, 30, 46, .19), 0 6px 6px rgba(0, 0, 0, .12);
  transform: translateY(-6px);
}
/* vạch vàng chạy dưới đáy khi rê chuột, giống thẻ tin tức trang chủ */
.ab-value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #9E1B22, #F8D858);
  transition: width .4s ease;
}
.ab-value:hover::after {
  width: 100%;
}
.ab-value-no {
  position: absolute;
  top: 14px;
  right: 22px;
  color: #F7EAE9;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  transition: color .3s;
}
.ab-value:hover .ab-value-no {
  color: #F1D6D4;
}
.ab-value-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #F7EAE9;
  color: #9E1B22;
  transition: background-color .3s, color .3s;
}
.ab-value-icon svg {
  width: 32px;
  height: 32px;
}
.ab-value:hover .ab-value-icon {
  background: #9E1B22;
  color: #F8D858;
}
.ab-value h3 {
  position: relative;
  margin: 22px 0 8px;
  color: #2A1D1E;
  font-size: 30px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ab-value p {
  position: relative;
  margin: 0;
  color: #4A3C3C;
  font-size: 15.5px;
  line-height: 1.6;
}

/* --- 11.4 Đội ngũ nhân sự ----------------------------------------------- */
.ab-team-g {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 64px;
}
.ab-checks {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.ab-checks li {
  position: relative;
  padding-left: 32px;
  color: #2A1D1E;
  font-weight: 700;
}
/* chấm tròn đỏ + dấu tick vàng */
.ab-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9E1B22;
}
.ab-checks li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #F8D858;
  border-bottom: 2px solid #F8D858;
  transform: rotate(45deg);
}
.ab-team-head {
  padding-top: 48px;
  border-top: 1px solid #EDE3DA;
}

/* --- 11.5 Dịch vụ -------------------------------------------------------- */
/* Khối chép từ trang chủ (#section_400538625). Bố cục trên máy tính bảng /
   điện thoại dùng chung CSS mục 6.5 với trang chủ. */
.ab-services {
  background: #F7F2EB;
}

/* --- 11.6 Kêu gọi liên hệ ----------------------------------------------- */
.ab-cta {
  padding: 72px 0;
  background:
    linear-gradient(90deg, rgba(110, 18, 24, .97) 0%, rgba(110, 18, 24, .9) 100%),
    url(../images/contact_bg.webp) center / cover no-repeat;
}
.ab-cta-g {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
}
.ab-cta-text {
  flex: 1 1 520px;
}
.ab-cta .text-cus-1 {
  margin-bottom: 10px;
}
.ab-cta-lead {
  margin: 0;
  color: rgba(255, 255, 255, .8);
}
.ab-cta-act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ab-cta-act .button {
  min-height: 52px;
  margin: 0;
  padding: 0 32px;
  font-size: 16px;
}
.ab-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #F8D858;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ab-cta-tel i {
  font-style: normal;
}
.ab-cta-tel:hover {
  color: #fff;
}

/* --- 11.7 Máy tính bảng & điện thoại ------------------------------------ */
@media screen and (max-width: 849px) {
  .ab-hero {
    padding: 116px 0 56px;
  }
  .ab-hero::after {
    right: -90px;
    width: 280px;
    height: 280px;
  }
  .ab-intro-g,
  .ab-team-g {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ab-team-g {
    margin-bottom: 48px;
  }
  .ab-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
    margin-top: 48px;
  }
  .ab-values-g {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ab-cta-act {
    width: 100%;
  }
}
@media screen and (max-width: 549px) {
  .ab-hero-lead {
    font-size: 15.5px;
  }
  .ab-intro-media {
    padding: 0 0 18px 18px;
  }
  /* ảnh hẹp: huy hiệu nhỏ lại và đẩy lên/sang trái nhiều hơn để chỉ đè góc
     tường trống, không che mặt người trong ảnh */
  .ab-badge {
    top: -36px;
    left: -10px;
    width: 88px;
    height: 88px;
  }
  .ab-badge strong {
    font-size: 26px;
  }
  .ab-badge span {
    margin-top: 4px;
    font-size: 8.5px;
    letter-spacing: .08em;
  }
  .ab-value {
    padding: 32px 22px 28px;
  }
  .ab-value-no {
    font-size: 52px;
  }
  .ab-team-head {
    padding-top: 40px;
  }
  .ab-cta {
    padding: 56px 0;
  }
  .ab-cta-act {
    align-items: stretch;
  }
  .ab-cta-tel {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-value,
  .ab-value::after,
  .ab-value-no,
  .ab-value-icon {
    transition: none;
  }
  .ab-value:hover {
    transform: none;
  }
}


/* --- 11.8 Nội dung theo Hồ sơ năng lực STC VIETNAM ---------------------- */
/* Phần tiếp của Thư ngỏ: khối chữ nền ngà, vạch đỏ bên trái */
.ab-letter {
  margin-top: 40px;
  padding: 26px 30px;
  border-left: 3px solid #9E1B22;
  background: #F7F2EB;
}
.ab-letter p {
  margin: 0 0 12px;
  color: #4A3C3C;
}
.ab-letter p:last-child {
  margin-bottom: 0;
}

/* số liệu dạng mã số (475/TĐG): phần "/TĐG" nhỏ lại */
.ab-stat .funfact-num small {
  margin-left: 2px;
  font-size: .5em;
}

/* Lĩnh vực hoạt động: dùng lại thẻ .ab-value (mục 11.3), tiêu đề dài hơn nên nhỏ lại */
.ab-head-lead {
  max-width: 660px;
  margin: 14px auto 0;
  color: #4A3C3C;
  font-size: 16px;
}
.ab-fields .ab-value h3 {
  font-size: 22px;
  letter-spacing: .02em;
}
.ab-value-tag {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 8px;
  border: 1px solid #E4C9C7;
  border-radius: 2px;
  background: #F7EAE9;
  color: #9E1B22;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Năng lực nhân sự: chữ bên trái, sơ đồ tổ chức bên phải */
.ab-team-g--org {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.ab-org-card {
  padding: 28px;
  border: 1px solid #EDE3DA;
  background: #fff;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .08);
}
.ab-org-title {
  margin: 0 0 22px;
  color: #2A1D1E;
  font-size: 18px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
/* sơ đồ: HĐQT -> Ban Giám đốc -> 3 phòng -> Cộng tác viên.
   Đường nối vẽ bằng ::before/::after, màu #E4C9C7. */
.ab-org {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ab-org-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #F7EAE9;
  color: #9E1B22;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.ab-org-box--top,
.ab-org-box--mid,
.ab-org-box--low {
  min-width: 210px;
}
.ab-org-box--top {
  background: #6E1218;
  color: #F8D858;
}
.ab-org-box--mid {
  background: #9E1B22;
  color: #fff;
}
.ab-org-box--low {
  border: 1px dashed #E4C9C7;
  background: #FBF6F2;
  color: #7A6968;
}
/* đường dọc dưới HĐQT và dưới Ban Giám đốc */
.ab-org > .ab-org-box--top,
.ab-org > .ab-org-box--mid {
  margin-bottom: 26px;
}
.ab-org > .ab-org-box--top::after,
.ab-org > .ab-org-box--mid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 26px;
  background: #E4C9C7;
  transform: translateX(-50%);
}
/* hàng 3 phòng: thanh ngang phía trên + nhánh dọc xuống từng phòng */
.ab-org-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-bottom: 26px;
  padding-top: 22px;
}
.ab-org-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 24px) / 6);
  right: calc((100% - 24px) / 6);
  height: 2px;
  background: #E4C9C7;
}
.ab-org-row > .ab-org-box::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 22px;
  background: #E4C9C7;
  transform: translateX(-50%);
}
/* đường dọc từ hàng phòng xuống Cộng tác viên */
.ab-org-row::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 26px;
  background: #E4C9C7;
  transform: translateX(-50%);
}

@media screen and (max-width: 849px) {
  .ab-team-g--org {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 549px) {
  .ab-letter {
    padding: 20px 18px;
  }
  .ab-org-card {
    padding: 22px 14px;
  }
  .ab-org-row {
    gap: 8px;
  }
  .ab-org-box {
    min-height: 48px;
    padding: 8px 6px;
    font-size: 12.5px;
  }
  .ab-org-box--top,
  .ab-org-box--mid,
  .ab-org-box--low {
    min-width: 180px;
    font-size: 14px;
  }
}


/* ==========================================================================
   12. TRANG CON (Dịch vụ, chi tiết dịch vụ, Dự án tiêu biểu, Liên hệ, Tin tức)
   Dựng lại theo cùng giao diện với trang chủ và trang Giới thiệu:
     - banner: dùng chung .ab-hero / .ab-crumbs / .ab-hero-title (mục 11.1)
     - tiêu đề khối: .subTitle + .text-cus-1 trong .ab-head (mục 11.3)
     - cuối trang: block Tư vấn #section_1144144903 + footer .ftr của trang chủ
   Tiền tố class: .sv- (trang dịch vụ + sidebar), .pj- (dự án), .ct- (liên hệ),
   .nw- (bài tin tức).
   ========================================================================== */

/* --- 12.1 Banner cho bài tin tức (tiêu đề dài) -------------------------- */
.ab-hero--post .ab-hero-title {
  max-width: 920px;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.3;
  text-transform: none;
}
.ab-hero-meta {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  letter-spacing: .08em;
}

/* --- 12.2 Bố cục 2 cột: nội dung + sidebar ------------------------------ */
.sv-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

/* --- 12.3 Nội dung trang dịch vụ ---------------------------------------- */
.sv-article {
  color: #3A2E2E;
  font-size: 16px;
  line-height: 1.75;
}
/* đoạn mở đầu (in đậm sẵn trong nội dung gốc) thành đoạn dẫn có vạch đỏ */
.sv-article > p:first-child {
  margin-bottom: 18px;
  padding-left: 18px;
  border-left: 3px solid #9E1B22;
  color: #2A1D1E;
  font-size: 17.5px;
}
.sv-figure {
  margin: 28px 0;
}
.sv-figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .14);
}
/* danh sách: gạch đầu dòng hình thoi đỏ */
.sv-article ul,
.nw-article ul {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.sv-article ul li,
.nw-article ul li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 24px;
}
.sv-article ul li::before,
.nw-article ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  background: #9E1B22;
  transform: rotate(45deg);
}

/* accordion nội dung: mỗi mục là một thẻ, mục đang mở viền đỏ bên trái */
.sv-acc {
  margin-top: 32px;
}
.sv-acc .accordion-item {
  margin-bottom: 12px;
  border: 1px solid #EDE3DA;
  border-left: 3px solid #EDE3DA;
  background: #fff;
  box-shadow: 0 4px 14px rgba(42, 29, 30, .05);
  transition: border-color .2s, box-shadow .2s;
}
.sv-acc .accordion-item:has(> .accordion-title.active) {
  border-left-color: #9E1B22;
  box-shadow: 0 10px 24px rgba(158, 27, 34, .1);
}
.sv-acc .accordion-title {
  padding: 16px 20px;
  color: #2A1D1E;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 17px;
  letter-spacing: .02em;
}
.sv-acc .accordion-title:hover,
.sv-acc .accordion-title.active {
  color: #9E1B22;
}
/* mũi tên sang phải, trong ô tròn */
.sv-acc .accordion-title .toggle {
  display: grid;
  flex: none;
  order: 2;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: #F7EAE9;
  color: #9E1B22;
}
.sv-acc .accordion-inner {
  padding: 0 22px 18px;
}

/* --- 12.4 Sidebar ------------------------------------------------------- */
.sv-side {
  display: grid;
  gap: 24px;
}
.sv-card {
  padding: 24px;
  border: 1px solid #EDE3DA;
  background: #fff;
}
.sv-card-title {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1EAEA;
  color: #2A1D1E;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sv-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: #9E1B22;
}
.sv-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* menu dịch vụ */
.sv-nav li + li {
  border-top: 1px dashed #EDE3DA;
}
.sv-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  color: #3A2E2E;
  font-weight: 600;
  transition: color .2s, padding-left .2s;
}
.sv-nav a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .45;
  transform: rotate(-45deg);
}
.sv-nav a:hover,
.sv-nav .is-current a {
  color: #9E1B22;
}
.sv-nav a:hover {
  padding-left: 6px;
}
.sv-nav .is-current a {
  padding-left: 12px;
  box-shadow: inset 3px 0 0 #9E1B22;
}

/* thẻ hotline */
.sv-contact {
  border: 0;
  background: linear-gradient(135deg, #6E1218 0%, #9E1B22 100%);
  color: #fff;
}
.sv-contact .sv-card-title {
  border-bottom-color: rgba(255, 255, 255, .16);
  color: #F8D858;
}
.sv-contact .sv-card-title::after {
  background: #F8D858;
}
.sv-contact p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  line-height: 1.55;
}
.sv-contact-tel {
  display: block;
  margin: 14px 0 18px;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sv-contact-tel:hover {
  color: #F8D858;
}
.sv-contact .button {
  width: 100%;
  margin: 0;
}

/* tin tức nổi bật: ảnh nhỏ + tiêu đề 3 dòng */
.sv-news li + li {
  border-top: 1px dashed #EDE3DA;
}
.sv-news a {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}
.sv-news-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #F7F2EB;
}
.sv-news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.sv-news a:hover .sv-news-thumb img {
  transform: scale(1.08);
}
.sv-news-title {
  display: -webkit-box;
  overflow: hidden;
  color: #2A1D1E;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sv-news a:hover .sv-news-title {
  color: #9E1B22;
}

/* --- 12.5 Bài tin tức --------------------------------------------------- */
.nw-article {
  color: #3A2E2E;
  font-size: 16.5px;
  line-height: 1.8;
}
.nw-article p {
  margin: 0 0 1.1em;
}
.nw-article h2 {
  margin: 36px 0 14px;
  padding-left: 16px;
  border-left: 4px solid #9E1B22;
  color: #2A1D1E;
  font-size: 26px;
  line-height: 1.3;
}
.nw-article figure {
  margin: 28px 0 10px;
}
.nw-article figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* chú thích ảnh */
.nw-article .has-text-align-center {
  color: #7A6968;
  font-size: 14.5px;
  text-align: center;
}
/* Bài Pickleball: WordPress bọc chú thích ảnh trong <blockquote class="wp-block-quote">
   nên bị dính vạch đỏ bên trái của blockquote mặc định (mục 0) -> bỏ đi */
.nw-article .wp-block-quote {
  margin: 0 0 1.1em;
  padding: 0;
  border-left: 0;
}
/* chú thích dùng <sub> làm chữ nhỏ và tụt xuống dưới dòng */
.nw-article .has-text-align-center sub {
  font-size: inherit;
  vertical-align: baseline;
}
.nw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid #EDE3DA;
  font-size: 14.5px;
}
.nw-back {
  color: #9E1B22;
  font-weight: 700;
}
.nw-back:hover {
  color: #6E1218;
}
.nw-date {
  color: #7A6968;
}

/* --- 12.6 Dự án tiêu biểu (theo Hồ sơ năng lực, trang 34–37) --------------- */
/* Khối trọng tâm: ảnh (khung vàng lệch) + 2 mảng giá đất */
.pj-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.pj-feature-img {
  position: relative;
  padding: 0 0 22px 22px;
}
.pj-feature-img::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  border: 2px solid #E8B93C;
}
.pj-feature-img img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .16);
}
.pj-feature-list {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.pj-feature-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid #EDE3DA;
  border-left: 3px solid #9E1B22;
  background: #fff;
  box-shadow: 0 6px 20px rgba(42, 29, 30, .06);
}
.pj-feature-no {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #9E1B22;
  color: #F8D858;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.pj-feature-list strong {
  color: #2A1D1E;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* 4 nhóm dự án: thẻ có ảnh bìa + danh sách */
.pj-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}
.pj-cats-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pj-cats > div,
.pj-cats-col > div {
  display: flex;
}
.pj-cat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  border: 1px solid #EDE3DA;
  background: #fff;
  box-shadow: 0 6px 20px rgba(42, 29, 30, .06);
  transition: box-shadow .3s ease, transform .3s ease;
}
.pj-cat:hover {
  box-shadow: 0 16px 34px rgba(42, 29, 30, .12);
  transform: translateY(-4px);
}
.pj-cat-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #F7F2EB;
}
.pj-cat-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pj-cat:hover .pj-cat-img img {
  transform: scale(1.05);
}
/* vạch đỏ–vàng chạy dưới ảnh khi rê chuột */
.pj-cat-img::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #9E1B22, #F8D858);
  transition: width .4s ease;
}
.pj-cat:hover .pj-cat-img::after {
  width: 100%;
}
.pj-cat-body {
  padding: 24px 26px 26px;
}
.pj-cat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1EAEA;
}
.pj-cat-no {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F7EAE9;
  color: #9E1B22;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 17px;
  font-weight: 700;
}
.pj-cat-head h3 {
  margin: 0;
  color: #2A1D1E;
  font-size: 19px;
  line-height: 1.3;
  text-transform: uppercase;
}
.pj-cat-count {
  color: #9E1B22;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pj-cat-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-cat-list li {
  position: relative;
  padding-left: 22px;
  color: #3A2E2E;
  font-size: 15px;
  line-height: 1.6;
}
.pj-cat-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .7em;
  width: 7px;
  height: 7px;
  background: #9E1B22;
  transform: rotate(45deg);
}

@media screen and (max-width: 849px) {
  .pj-feature {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .pj-cats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media screen and (max-width: 549px) {
  .pj-feature-list li {
    gap: 14px;
    padding: 16px;
  }
  .pj-feature-no {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .pj-feature-list strong {
    font-size: 17px;
  }
  .pj-cat-body {
    padding: 20px 18px 22px;
  }
  .pj-cat-head h3 {
    font-size: 17px;
  }
  .pj-cat-list li {
    font-size: 14.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pj-cat,
  .pj-cat-img img,
  .pj-cat-img::after {
    transition: none;
  }
  .pj-cat:hover {
    transform: none;
  }
}

/* --- 12.7 Liên hệ (lien-he.html) ---------------------------------------- */
/* Trái: thẻ thông tin công ty nền đỏ. Phải: form liên hệ. Dưới: bản đồ. */
.ct-g {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: start;
}

/* thẻ thông tin */
/* cùng kiểu thẻ form bên phải (.ct-form-card): nền trắng, viền be, bóng nhẹ */
.ct-info {
  padding: 32px;
  border: 1px solid #EDE3DA;
  background: #fff;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .08);
  color: #2A1D1E;
}
.ct-info-name {
  margin: 0 0 6px;
  color: #9E1B22;
  font-size: 22px;
  line-height: 1.3;
  text-transform: uppercase;
}
.ct-info-en {
  margin: 0 0 24px;
  color: #7A6968;
  font-size: 14px;
}
.ct-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ct-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F7F2EB;
  color: #9E1B22;
  font-size: 17px;
  font-style: normal;
}
.ct-lbl {
  display: block;
  margin-bottom: 2px;
  color: #7A6968;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ct-val {
  display: block;
  color: #2A1D1E;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
a.ct-val:hover {
  color: #9E1B22;
}
.ct-legal {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #EDE3DA;
  color: #7A6968;
  font-size: 13.5px;
  line-height: 1.6;
}
.ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.ct-actions a {
  display: inline-flex;
  flex: 1 1 140px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 99px;
  font-weight: 700;
  transition: background-color .2s, opacity .2s;
}
.ct-call {
  background: linear-gradient(90deg, #C01E2E 0%, #F8AA3F 100%);
  color: #fff;
}
.ct-call:hover {
  color: #fff;
  opacity: .9;
}
.ct-mail {
  border: 1.5px solid #9E1B22;
  color: #9E1B22;
}
.ct-mail:hover {
  background: #F7F2EB;
  color: #9E1B22;
}

/* form liên hệ */
.ct-form-card {
  padding: 32px;
  border: 1px solid #EDE3DA;
  background: #fff;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .08);
  scroll-margin-top: 24px;
}
.ct-form-title {
  margin: 0 0 6px;
  color: #2A1D1E;
  font-size: 24px;
  text-transform: uppercase;
}
.ct-form-lead {
  margin: 0 0 22px;
  color: #7A6968;
  font-size: 15px;
}
/* thuộc tính hidden phải thắng display của .ct-err / .ct-status */
[data-ct-form] [hidden] {
  display: none !important;
}
.ct-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.ct-field {
  margin: 0;
}
.ct-field--full {
  grid-column: 1 / -1;
}
.ct-field label {
  display: block;
  margin-bottom: 6px;
  color: #2A1D1E;
  font-size: 14px;
  font-weight: 700;
}
.ct-field label b {
  color: #C0232E;
}
.ct-form input[type="text"],
.ct-form input[type="tel"],
.ct-form input[type="email"],
.ct-form select,
.ct-form textarea {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #E6DCD3;
  border-radius: 6px;
  background: #FBF8F5;
  color: #2A1D1E;
  font-size: 15px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.ct-form textarea {
  height: auto;
  min-height: 140px;
  padding: 12px 14px;
  resize: vertical;
}
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  border-color: #9E1B22;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(158, 27, 34, .12);
}
.ct-field.is-error input,
.ct-field.is-error textarea {
  border-color: #C0232E;
  background: #FFF6F6;
}
.ct-err {
  display: block;
  margin-top: 6px;
  color: #C0232E;
  font-size: 13px;
}
.ct-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 22px;
}
.ct-note {
  margin: 0;
  color: #7A6968;
  font-size: 13.5px;
}
.ct-form .button {
  min-height: 48px;
  margin: 0;
  padding: 0 32px;
  font-size: 15px;
}
.ct-status {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 3px solid #2E7D32;
  background: #EEF7EE;
  color: #1F5F23;
  font-size: 14.5px;
  line-height: 1.55;
}

/* bản đồ */
.ct-map {
  overflow: hidden;
  height: 420px;
  margin-top: 40px;
  border: 1px solid #EDE3DA;
  background: #F7F2EB;
}
.ct-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 1023px) {
  .ct-g {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 24px;
  }
  .ct-info,
  .ct-form-card {
    padding: 26px;
  }
}
@media screen and (max-width: 849px) {
  .ct-g {
    grid-template-columns: 1fr;
  }
  .ct-map {
    height: 340px;
  }
}
@media screen and (max-width: 549px) {
  .ct-info,
  .ct-form-card {
    padding: 22px 20px;
  }
  .ct-info-name {
    font-size: 19px;
  }
  .ct-fields {
    grid-template-columns: 1fr;
  }
  .ct-form .button {
    width: 100%;
  }
  .ct-map {
    height: 300px;
    margin-top: 28px;
  }
}

/* --- 12.8 Máy tính bảng & điện thoại ------------------------------------ */
@media screen and (max-width: 849px) {
  .sv-g {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media screen and (max-width: 549px) {
  .sv-article > p:first-child {
    font-size: 16.5px;
  }
  .sv-acc .accordion-title {
    padding: 14px 16px;
    font-size: 15.5px;
  }
  .sv-acc .accordion-inner {
    padding: 0 16px 16px;
  }
  .sv-card {
    padding: 20px;
  }
  .nw-article {
    font-size: 16px;
  }
  .nw-article h2 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-news-thumb img,
  .sv-nav a {
    transition: none;
  }
}


/* ==========================================================================
   13. TRANG VĂN BẢN PHÁP LUẬT (van-ban-phap-luat.html)
   Khung trang dùng chung mục 11.1 (banner) và mục 12 (.sv-g 2 cột + sidebar).
   Lọc chuyên mục / tìm kiếm / "Xem thêm" do js/script.js?ver=1.0.2 xử lý.
   ========================================================================== */

/* Mọi phần tử có thuộc tính hidden trong danh sách phải ẩn thật: .vb-item là
   grid, nút "Xem thêm" là .button (inline-flex) — đều thắng [hidden] mặc định
   của trình duyệt nếu không có !important. */
[data-vb] [hidden] {
  display: none !important;
}

/* --- 13.1 Thanh công cụ: tab chuyên mục + ô tìm kiếm ------------------- */
/* Không có JS thì lọc không chạy -> ẩn luôn thanh công cụ, danh sách vẫn
   hiện đủ. Cờ .js-reveal được script.js?ver=1.0.2 gắn lên <html> ngay khi chạy. */
.vb-tools {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 20px;
}
.js-reveal .vb-tools {
  display: flex;
}
.vb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  border: 1px solid #EDE3DA;
  border-radius: 99px;
  background: #fff;
  color: #3A2E2E;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.vb-tab span {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #F7EAE9;
  color: #9E1B22;
  font-size: 12px;
  text-align: center;
}
.vb-tab:hover {
  border-color: #E4C9C7;
  color: #9E1B22;
}
.vb-tab.is-active {
  border-color: #9E1B22;
  background: #9E1B22;
  color: #fff;
}
.vb-tab.is-active span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}
.vb-search {
  position: relative;
  flex: 0 1 280px;
  margin: 0;
}
.vb-search .icon-search {
  position: absolute;
  top: 50%;
  left: 15px;
  color: #9E1B22;
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}
.vb-search input[type="search"] {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 16px 0 40px;
  border: 1px solid #ECE4E4;
  border-radius: 99px;
  background: #F7F3F3;
  font-size: 14.5px;
}
.vb-search input[type="search"]:focus {
  border-color: #9E1B22;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(158, 27, 34, .12);
}
.vb-summary {
  margin: 0 0 12px;
  color: #7A6968;
  font-size: 14px;
}
.vb-summary strong {
  color: #9E1B22;
}

/* --- 13.2 Danh sách văn bản -------------------------------------------- */
.vb-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid #EDE3DA;
  list-style: none;
}
.vb-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 8px;
  border-bottom: 1px solid #EDE3DA;
  transition: background-color .2s;
}
.vb-item:hover {
  background: #FBF7F3;
}
/* biểu tượng tệp: tờ giấy gấp góc, đỏ = PDF, xanh = Word */
.vb-file {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 44px;
  height: 54px;
  padding-bottom: 8px;
  border-radius: 3px;
  background: #C0232E;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%);
}
.vb-file--doc {
  background: #2B579A;
}
.vb-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}
.vb-title a {
  color: #2A1D1E;
}
.vb-title a:hover {
  color: #9E1B22;
}
.vb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 7px 0 0;
  color: #7A6968;
  font-size: 13.5px;
}
.vb-type {
  padding: 2px 8px;
  border: 1px solid #E4C9C7;
  border-radius: 2px;
  background: #F7EAE9;
  color: #9E1B22;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.vb-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid #9E1B22;
  border-radius: 99px;
  color: #9E1B22;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.vb-dl::before {
  content: "↓";
  font-weight: 700;
}
.vb-dl:hover {
  background: #9E1B22;
  color: #fff;
}
.vb-empty {
  margin: 16px 0 0;
  padding: 32px 20px;
  border: 1px dashed #E4C9C7;
  color: #7A6968;
  text-align: center;
}
.vb-more {
  margin-top: 28px;
  text-align: center;
}
.vb-more .button {
  margin: 0;
}

/* --- 13.3 Điện thoại ---------------------------------------------------- */
@media screen and (max-width: 549px) {
  .vb-search {
    flex: 1 1 100%;
  }
  .vb-tab {
    padding: 7px 10px 7px 12px;
    font-size: 13px;
  }
  .vb-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
    padding: 16px 4px;
  }
  .vb-file {
    width: 36px;
    height: 44px;
    padding-bottom: 6px;
    font-size: 9.5px;
  }
  .vb-title {
    font-size: 15px;
  }
  .vb-dl {
    grid-column: 2;
    justify-self: start;
    padding: 6px 14px;
    font-size: 13px;
  }
}


/* ==========================================================================
   14. TRANG TIN TỨC (tin-tuc.html)
   Khung trang dùng chung mục 11.1 (banner), mục 12 (.sv-g + sidebar) và thanh
   công cụ .vb-tools / .vb-summary / .vb-more của mục 13. Lọc chuyên mục, tìm
   kiếm, "Xem thêm" dùng chung đoạn JS của trang Văn bản pháp luật.
   ========================================================================== */

/* --- 14.1 Lưới thẻ tin ------------------------------------------------- */
.tt-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.tt-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #EDE3DA;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tt-card:hover {
  box-shadow: 0 14px 30px rgba(42, 29, 30, .1);
  transform: translateY(-4px);
}
/* ảnh: tỉ lệ 16:10, vạch đỏ–vàng chạy dưới đáy khi rê chuột */
.tt-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #F7F2EB;
}
.tt-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.tt-card:hover .tt-img img {
  transform: scale(1.06);
}
.tt-img::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #9E1B22, #F8D858);
  transition: width .4s ease;
}
.tt-card:hover .tt-img::after {
  width: 100%;
}
.tt-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.tt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
  color: #7A6968;
  font-size: 13px;
}
.tt-cat {
  padding: 2px 8px;
  border: 1px solid #E4C9C7;
  border-radius: 2px;
  background: #F7EAE9;
  color: #9E1B22;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tt-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 8px;
  color: #2A1D1E;
  font-size: 17px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.tt-title a {
  color: inherit;
}
.tt-card:hover .tt-title a {
  color: #9E1B22;
}
.tt-excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 14px;
  color: #5A4B4B;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* "Đọc tiếp" dính đáy thẻ để các thẻ cùng hàng thẳng nhau */
.tt-more,
.tt-soon {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tt-more {
  color: #9E1B22;
}
.tt-more::after {
  content: " →";
  transition: margin-left .2s;
}
.tt-more:hover {
  color: #6E1218;
}
/* bài chưa có trang chi tiết trong bản HTML tĩnh */
.tt-soon {
  color: #A89A99;
}

/* --- 14.2 Điện thoại ---------------------------------------------------- */
@media screen and (max-width: 549px) {
  .tt-g {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tt-body {
    padding: 16px 16px 18px;
  }
  .tt-title {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-card,
  .tt-img img,
  .tt-img::after {
    transition: none;
  }
  .tt-card:hover {
    transform: none;
  }
}


/* ==========================================================================
   15. FOOTER — CỘT LIÊN HỆ
   Trước: 3 dòng chữ trơn + một ô viền rỗng (.ftr-map) chờ ảnh bản đồ.
   Sau: icon trong vòng tròn vàng, hotline/email bấm được, bản đồ Google thật
   tông tối cho hợp nền footer, nút "Chỉ đường" mở Google Maps.
   Ghi đè lên rule gốc ở mục 1 (.ftr .addr, .ftr-map) — không sửa rule gốc.
   ========================================================================== */
.ftr .addr {
  gap: 12px;
}
.ftr .addr div {
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}
.ftr .addr i {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(248, 216, 88, .1);
  color: #F8D858;
  font-size: 14px;
}
.ftr .addr span,
.ftr .addr a {
  padding-top: 4px;
}
.ftr .addr a {
  color: rgba(255, 255, 255, .85);
  transition: color .2s;
}
.ftr .addr a:hover {
  color: #F8D858;
}

/* bản đồ nhỏ */
.ftr .ftr-map {
  position: relative;
  overflow: hidden;
  height: 150px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: #221718;
}
/* đảo màu + xoay sắc độ: bản đồ sáng thành tối, ghim đỏ vẫn giữ màu đỏ */
.ftr .ftr-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95);
  pointer-events: none;   /* chỉ để xem; muốn thao tác thì bấm "Chỉ đường" */
}
/* Máy tính: cột footer chỉ rộng ~260px, bản đồ nhúng của Google ở giao diện
   desktop không vẽ được khi khung nhỏ như vậy (ra ô trống). Cho iframe rộng gấp
   đôi rồi thu nhỏ 50% để Google vẽ ở ~520px, ghim vẫn nằm giữa khung.
   Điện thoại khung ~350px và Google dùng giao diện mobile nên không cần. */
@media screen and (min-width: 550px) {
  .ftr .ftr-map iframe {
    width: 200%;
    max-width: none;   /* mục 5.3 giới hạn iframe max-width:100% -> phải gỡ ra */
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
  }
}
.ftr-map-link {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 14px;
  border-radius: 99px;
  background: #9E1B22;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background-color .2s, color .2s;
}
.ftr-map-link:hover {
  background: #F8D858;
  color: #2A1D1E !important;
}

@media screen and (max-width: 549px) {
  .ftr .ftr-map {
    height: 180px;
  }
}


/* ==========================================================================
   16. MỤC KHÁCH HÀNG — LOGO THẬT TỪ HỒ SƠ NĂNG LỰC
   16 đơn vị ở trang "Quý khách hàng, đối tác tiêu biểu" của Hồ sơ năng lực,
   logo cắt tròn lưu ở images/khach-hang/*.webp. Nhiều đơn vị dùng chung Quốc huy
   nên mỗi thẻ có thêm tên đơn vị bên dưới. Ghi đè lên rule gốc của mục Khách hàng.
   ========================================================================== */
/* 6 thẻ mỗi hàng: trừ 5 khoảng cách 16px rồi chia 6 */
.kh-item {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  width: calc((100% - 80px) / 6);
  min-height: 196px;
  padding: 18px 14px 14px;
  border-radius: 6px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kh-item:hover {
  border-color: #E4C9C7;
  box-shadow: 0 10px 22px rgba(42, 29, 30, .08);
  transform: translateY(-3px);
}
/* logo giữ màu thật (bỏ xám của rule gốc): con dấu, quốc huy xám đi khó nhận ra */
.kh-item img {
  flex: none;
  width: 96px;
  height: 96px;
  max-width: none;
  max-height: none;
  border-radius: 50%;
  opacity: 1;
  filter: none;
}
.kh-name {
  display: -webkit-box;
  overflow: hidden;
  color: #4A3C3C;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.kh-item:hover .kh-name {
  color: #9E1B22;
}

/* Máy tính bảng: 4 thẻ mỗi hàng */
@media screen and (max-width: 1023px) {
  .kh-item {
    width: calc((100% - 48px) / 4);
  }
}
/* Điện thoại: 3 thẻ mỗi hàng, thu nhỏ logo + chữ để 26 thẻ không quá dài */
@media screen and (max-width: 549px) {
  .kh-list {
    gap: 8px;
  }
  .kh-item {
    gap: 8px;
    width: calc((100% - 16px) / 3);
    min-height: 0;
    padding: 12px 6px 10px;
  }
  .kh-item img {
    width: 56px;
    height: 56px;
  }
  .kh-name {
    font-size: 11px;
    line-height: 1.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kh-item {
    transition: none;
  }
  .kh-item:hover {
    transform: none;
  }
}

/* Footer: link trỏ tới chính trang đang xem hiện màu vàng, giống menu header */
.ftr ul a[aria-current="page"] {
  color: #F8D858;
}


/* ==========================================================================
   17. SƠ ĐỒ TRANG (so-do-trang.html)
   3 thẻ nhóm: Công ty / Dịch vụ thẩm định / Tin tức. Mỗi thẻ là danh sách
   link, mục con thụt vào có vạch dọc. Banner dùng chung mục 11.1.
   ========================================================================== */
.sm-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.sm-g > div {
  display: flex;
}
.sm-card {
  width: 100%;
  border: 1px solid #EDE3DA;
  border-top: 3px solid #9E1B22;
  background: #fff;
  box-shadow: 0 6px 20px rgba(42, 29, 30, .06);
}
.sm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid #F1EAEA;
}
.sm-no {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F7EAE9;
  color: #9E1B22;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.sm-head h2 {
  margin: 0;
  color: #2A1D1E;
  font-size: 19px;
  line-height: 1.3;
  text-transform: uppercase;
}
.sm-count {
  display: block;
  margin-top: 2px;
  color: #9E1B22;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sm-list,
.sm-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sm-list {
  padding: 10px 24px 18px;
}
.sm-list > li + li {
  border-top: 1px dashed #EDE3DA;
}
.sm-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  color: #2A1D1E;
  font-weight: 700;
  transition: color .2s, padding-left .2s;
}
/* mũi tên nhỏ bên phải mỗi link */
.sm-list a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .4;
  transform: rotate(-45deg);
}
.sm-list a:hover {
  padding-left: 6px;
  color: #9E1B22;
}
/* mục con */
.sm-sub {
  margin: 0 0 10px 4px;
  padding-left: 16px;
  border-left: 2px solid #F1EAEA;
}
.sm-sub a {
  padding: 7px 0;
  color: #5A4B4B;
  font-size: 15px;
  font-weight: 400;
}

@media screen and (max-width: 1023px) {
  .sm-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 649px) {
  .sm-g {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sm-head,
  .sm-list {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sm-list a {
    transition: none;
  }
}


/* ==========================================================================
   18. MENU HEADER — HIỆU ỨNG HOVER + TRANG ĐANG XEM
   Rê chuột: chữ vàng + gạch chân chạy từ trái sang phải.
   Trang đang xem (li.active): chữ vàng + gạch chân hiện sẵn.
   Header nền tối (.nav-dark, 11 trang con): vàng logo #F8D858.
   Header nền trắng (trang chủ, bài tin tức): #F8D858 trên nền trắng gần như
   không đọc được -> chữ dùng vàng đậm #C58F12, gạch chân vẫn vàng #E8B93C.
   ========================================================================== */
.header-nav > li > a.nav-top-link {
  position: relative;
  transition: color .25s ease;
}
.header-nav > li > a.nav-top-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #E8B93C;
  transition: width .3s ease;
}
/* li:hover (không chỉ a:hover): đang mở dropdown thì gạch chân vẫn giữ */
.header-nav > li:hover > a.nav-top-link::after,
.header-nav > li > a.nav-top-link:focus-visible::after,
.header-nav > li.active > a.nav-top-link::after {
  width: 100%;
}
.header-nav > li:hover > a.nav-top-link,
.header-nav > li > a.nav-top-link:focus-visible,
.header-nav > li.active > a.nav-top-link {
  color: #C58F12;
}

/* header nền tối */
.nav-dark .header-nav > li > a.nav-top-link::after {
  background: #F8D858;
}
.nav-dark .header-nav > li:hover > a.nav-top-link,
.nav-dark .header-nav > li > a.nav-top-link:focus-visible,
.nav-dark .header-nav > li.active > a.nav-top-link {
  color: #F8D858;
}

@media (prefers-reduced-motion: reduce) {
  .header-nav > li > a.nav-top-link,
  .header-nav > li > a.nav-top-link::after {
    transition: none;
  }
}


/* ==========================================================================
   19. KHỐI SỐ LIỆU (#section_536130618 — trang chủ, trang Dịch vụ)
   4 cột số liệu theo Hồ sơ năng lực. "/TĐG" nhỏ lại; máy tính bảng 4 cột hẹp
   (~150px) nên số nhỏ lại cho "475/TĐG" không tràn.
   ========================================================================== */
.funfact-num small {
  margin-left: 2px;
  font-size: .5em;
}
@media screen and (min-width: 550px) and (max-width: 849px) {
  #section_536130618 .funfact-num {
    font-size: 42px;
  }
  /* cột hẹp: căn đều hai bên làm chữ giãn lỗ chỗ -> căn trái */
  #section_536130618 .col.medium-3 p {
    text-align: left;
  }
}


/* ==========================================================================
   20. KHỐI TƯ VẤN DỊCH VỤ (#section_1144144903) — NỀN NGÀ
   Nền đổi từ đỏ đậm sang ngà #F7F2EB nên chữ trắng/vàng (class --white,
   --gold) đã gỡ khỏi HTML; phần dưới đây tô lại theo tông sáng: tiêu đề nâu
   đậm, chữ nâu nhạt, nhấn đỏ thương hiệu. Thẻ form để trắng + bóng đổ cho
   nổi trên nền ngà.
   ========================================================================== */
#section_1144144903 .text-cus-1 {
  color: #2A1D1E;
}
#section_1144144903 .text-justify {
  color: #4A3C3C;
}
#section_1144144903 .form-tuvan > .col-inner {
  background: #fff;
  border: 1px solid #EDE3DA;
  box-shadow: 0 18px 40px rgba(42, 29, 30, .08);
}
/* accordion: viền trắng của nền tối không nhìn thấy trên nền ngà */
#section_1144144903 .accordion-item {
  border-bottom-color: #E4D9CC;
}
#section_1144144903 .accordion-title {
  color: #2A1D1E;
}
#section_1144144903 .accordion-title:hover,
#section_1144144903 .accordion-title.active {
  color: #9E1B22;
}
#section_1144144903 .accordion-inner {
  color: #4A3C3C;
}

/* Cột phải mở sẵn cả 3 mục (data-acc-open="all") nên thu gọn khoảng cách:
   tiêu đề 13px -> 9px, phần nội dung 16px -> 10px, đoạn cuối bỏ lề dưới. */
#section_1144144903 .accordion {
  margin-top: 18px;
}
#section_1144144903 .accordion-title {
  padding: 9px 0;
}
#section_1144144903 .accordion-inner {
  padding: 0 0 10px;
}
#section_1144144903 .accordion-inner > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   21. TIÊU ĐỀ NHỎ (.subTitle) KHI TÊN CÔNG TY DÀI XUỐNG DÒNG
   Sau khi thay tên ngắn "STC VIETNAM" bằng tên pháp lý đầy đủ, dòng tiêu đề
   nhỏ có gạch đỏ bên trái bị xuống 2 dòng trên điện thoại; dòng thứ hai lại
   bắt đầu ngay mép trái, chui xuống dưới gạch trông lệch.
   Cách xử lý: thụt cả khối vào 70px (gạch 50px + margin-right 20px) rồi kéo
   riêng dòng đầu ngược lại -70px, nhờ vậy mọi dòng đều thẳng hàng sau gạch.
   Chỉ áp dụng cho tiêu đề canh trái (có .bleft và KHÔNG có .bright) — các
   tiêu đề canh giữa dùng cả hai gạch nên bị loại trừ.
   ========================================================================== */
@media (max-width: 549px) {
  .subTitle:has(.bleft):not(:has(.bright)) {
    padding-left: 70px;
    text-indent: -70px;
  }
}

/* ==========================================================================
   22. KHỐI SỐ LIỆU CÒN 3 Ô
   Đã bỏ ô "Khách hàng, đối tác tiêu biểu" nên khối .ab-stats ở trang Giới
   thiệu chỉ còn 3 mục. Mục 11 chia 4 cột (và 2 cột dưới 850px) sẽ để trống
   một ô, nhìn lệch sang trái — nên chia lại:
     - từ 850px trở lên: 3 cột bằng nhau
     - 550–849px       : vẫn 3 cột, số và nhãn đủ chỗ
     - dưới 550px      : xếp dọc 1 cột, vì 3 cột chỉ còn ~100px mỗi cột thì
                         nhãn dài sẽ vỡ thành 4–5 dòng
   ========================================================================== */
.ab-stats {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 849px) {
  .ab-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 549px) {
  .ab-stats {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   23. DỰ ÁN TIÊU BIỂU — THẺ NHÓM KHÔNG CÓ ẢNH (nhóm 05–07)
   Các nhóm thêm sau chưa có ảnh bìa. Thay vì để ảnh giữ chỗ xám, thẻ chỉ có
   phần chữ và một vạch đỏ–vàng 4px ở đầu thẻ (cùng dải màu với vạch chạy
   dưới ảnh khi rê chuột ở mục 12) để vẫn liền mạch với các thẻ có ảnh.
   Tổng cộng 7 thẻ trong lưới 2 cột nên thẻ cuối đứng một mình — cho nó trải
   hết chiều ngang để hàng cuối không bị hụt một nửa.
   ========================================================================== */
.pj-cat--text {
  border-top: 0;
  background:
    linear-gradient(90deg, #9E1B22, #F8D858) top / 100% 4px no-repeat,
    #fff;
}
.pj-cat--text .pj-cat-body {
  padding-top: 30px;
}

/* ==========================================================================
   24. MỤC KHÁCH HÀNG — THÊM LOGO + KHÁCH HÀNG CHƯA CÓ LOGO
   Lưới logo nay có 26 đơn vị (16 cũ + 10 từ file "Bổ sung tên khách hàng").
   Các đơn vị chưa có logo không đưa vào lưới (một ô trống/ảnh giữ chỗ sẽ
   lạc lõng giữa hàng con dấu) mà gom thành một câu mô tả chung ngay dưới lưới;
   tên chi tiết giữ trong chú thích HTML.
   ========================================================================== */
/* Logo không phải hình tròn (hình thoi, logo chữ): bỏ bo tròn để không mất góc */
.kh-item--free img {
  border-radius: 0;
  object-fit: contain;
}

/* Câu mô tả khách hàng chưa có logo: một dòng chữ nghiêng, canh giữa ngay dưới lưới,
   hai gạch mảnh hai bên ở phía trên để tách khỏi lưới mà không thành một khối riêng */
.kh-more {
  position: relative;
  max-width: 760px;
  margin: 36px auto 0;
  padding: 22px 16px 0;
  color: #4A3C3C;
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  text-align: center;
}
.kh-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 2px;
  background: #E8B93C;
  transform: translateX(-50%);
}
.kh-more strong {
  color: #9E1B22;
  font-style: normal;
  font-weight: 600;
}
@media screen and (max-width: 549px) {
  .kh-more {
    margin-top: 26px;
    padding-top: 18px;
    font-size: 14.5px;
  }
}

/* ==========================================================================
   25. KHỐI TÔN CHỈ (trang chủ) — NỀN NGÀ, ĐỒNG BỘ VỚI CÁC KHỐI KHÁC
   - Nền ngà #F7F2EB giống .sec.ivory (khối Ngành nghề, Tư vấn dịch vụ…), viền
     mảnh #E2D8CD trên/dưới để tách khỏi các khối trắng xung quanh.
     (Bản trước dùng nền nâu đậm + quầng đỏ: quá nổi, lệch tông cả trang.)
   - Chữ chạy: đỏ thương hiệu rất mờ, chỉ làm hoạ tiết nền, không tranh với tiêu đề.
   - Chiều chạy đảo lại: dùng animation-direction: reverse trên keyframes cũ
     (example2 ở mục 1), tức chạy từ phải sang trái.
   - Tiêu đề, nhãn nhỏ, đoạn văn giữ màu mặc định của web.
   ========================================================================== */
#section_559191335 {
  position: relative;
  overflow: hidden;
  background: #F7F2EB;
  border-top: 1px solid #E2D8CD;
  border-bottom: 1px solid #E2D8CD;
}
.runLeft h2 {
  animation-direction: reverse;
}
#section_559191335 .marqueeText h2 {
  color: rgba(158, 27, 34, .08);
}
/* ảnh: bóng nhẹ như các thẻ khác trên web */
#section_559191335 img {
  box-shadow: 0 18px 40px rgba(42, 29, 30, .1);
}

/* ==========================================================================
   26. DỰ ÁN TIÊU BIỂU — HÀNG 3 THẺ CAO BẰNG NHAU + NÚT "XEM THÊM"
   JS (js/script.js?ver=1.0.2, mục "THU GỌN DANH SÁCH DÀI") lấy danh sách ngắn nhất
   trong hàng .pj-cats làm chuẩn, cắt bớt danh sách dài hơn bằng max-height
   và chèn nút .pj-more. Không có JS thì danh sách hiện đầy đủ.
   ========================================================================== */
/* phần thân giãn hết chiều cao thẻ để nút luôn nằm sát đáy, 3 nút thẳng hàng */
.pj-cats .pj-cat-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.pj-cats .pj-cat-list {
  position: relative;
  overflow: hidden;
  transition: max-height .45s ease;
}
/* dải mờ dần ở đáy danh sách đang bị cắt: phủ lên phần hé ra của dự án kế tiếp (34px, xem
   biến HE trong JS) — cao 40px nên chỉ lấn vào khoảng cách 10px giữa hai dự án,
   dự án cuối cùng hiển thị vẫn đọc rõ */
.pj-cats .pj-cat-list.is-clamped::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}
/* đang mở một thẻ: các thẻ còn lại không bị kéo dài theo (tránh khoảng trắng lớn) */
.pj-cats.has-open {
  align-items: start;
}
.pj-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border: 0;
  background: none;
  color: #9E1B22;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
/* mũi tên nhỏ, xoay ngược khi đã mở */
.pj-more::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease, margin .3s ease;
}
.pj-more[aria-expanded="true"]::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.pj-more:hover,
.pj-more:focus-visible {
  color: #C58F12;
}
@media (prefers-reduced-motion: reduce) {
  .pj-cats .pj-cat-list,
  .pj-more::after {
    transition: none;
  }
}

/* ==========================================================================
   27. DỰ ÁN TIÊU BIỂU — NỀN MỜ CHO THẺ DỰ ÁN
   Thẻ trắng đặt trên nền trang trắng nên bị chìm. Đổi nền thẻ sang ngà rất nhạt
   (một màu phẳng, không dùng gradient) — dải mờ của nút "Xem thêm" (mục 26)
   phải trùng đúng màu nền thì mới không lộ vệt, nên màu để chung một biến.
   ========================================================================== */
.pj-cat {
  --pj-nen: #FAF6F1;
  background: var(--pj-nen);
}
.pj-cat--text {
  background:
    linear-gradient(90deg, #9E1B22, #F8D858) top / 100% 4px no-repeat,
    var(--pj-nen);
}
.pj-cats .pj-cat-list.is-clamped::after {
  background: linear-gradient(rgba(250, 246, 241, 0), var(--pj-nen) 85%);
}
/* trên nền ngà: vòng số thứ tự đổi sang trắng, đường kẻ dưới tiêu đề đậm hơn chút */
.pj-cat-no {
  background: #fff;
}
.pj-cat-head {
  border-bottom-color: #EADFD3;
}

/* ==========================================================================
   28. HEADER DÍNH TRÊN ĐẦU KHI CUỘN (#header.has-sticky)
   - Trang chủ + 2 bài tin: header nằm trong luồng -> position: sticky, không
     làm nội dung nhảy.
   - Trang con: header trong suốt vốn đã position: absolute (nằm đè ảnh tiêu đề)
     -> đổi sang fixed, bố cục giữ nguyên.
   JS (script.js?ver=1.0.2) gắn .stuck khi đã cuộn: nền trắng + bóng, và bỏ .nav-dark để
   chữ/logo trở về màu cho nền trắng.
   ========================================================================== */
.header.has-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header.transparent.has-sticky {
  position: fixed;
}
.header.has-sticky .header-wrapper {
  transition: background-color .25s ease, box-shadow .25s ease;
}
.header.has-sticky.stuck .header-wrapper,
.header.transparent.has-sticky.stuck .header-wrapper {
  background-color: #fff;
  box-shadow: 0 4px 18px rgba(42, 29, 30, .1);
}
.header.has-sticky.stuck .top-divider {
  display: none;
}

/* điện thoại: giữ chiều cao 64px của mục 10.1, không để rule .stuck 90px đè */
@media screen and (max-width: 849px) {
  .header.has-sticky.stuck #masthead.header-main {
    height: 64px !important;
  }
}

/* link neo (#tuvan, #goc-bao-chi…) không bị header che mất phần đầu */
html {
  scroll-padding-top: 90px;
}
@media screen and (max-width: 849px) {
  html {
    scroll-padding-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header.has-sticky .header-wrapper {
    transition: none;
  }
}

/* ==========================================================================
   29. BANNER TRANG CON DƯỚI HEADER NỀN TRẮNG
   Mọi trang nay dùng header nền trắng như trang chủ (nằm trong luồng, không
   còn đè lên banner) nên bỏ phần padding-top chừa cho header trong suốt cũ
   (90px máy tính / 64px điện thoại, mục 11.1 và 11.7).
   ========================================================================== */
.header:not(.transparent) + #main .ab-hero {
  padding-top: 84px;
}
@media screen and (max-width: 849px) {
  .header:not(.transparent) + #main .ab-hero {
    padding-top: 56px;
  }
}

/* ==========================================================================
   30. KHÁCH HÀNG — DẢI LOGO CHẠY TỪ PHẢI SANG TRÁI, MỖI CỘT 2 LOGO
   JS (script.js?ver=1.0.2) gắn .kh-slide cho .kh-grid[data-kh-slide], bọc danh sách
   vào .kh-track và nối thêm một bản chép. Dải dịch sang trái -50% rồi lặp
   lại -> chạy liên tục. Mỗi .kh-list xếp theo cột, 2 hàng.
   Khoảng cách giữa hai bản dùng padding-right (không dùng gap của .kh-track)
   để hai nửa dài đúng bằng nhau, lặp lại không bị giật.
   Không có JS: vẫn là lưới tĩnh của mục 16.
   ========================================================================== */
.kh-grid.kh-slide {
  --kh-col: 172px;     /* bề rộng một cột logo */
  --kh-gap: 16px;
  --kh-time: 60s;      /* thời gian chạy hết một vòng */
  max-width: none;
  padding: 6px 0;      /* chừa chỗ cho thẻ nhấc lên khi rê chuột */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kh-slide .kh-track {
  display: flex;
  width: max-content;
  animation: kh-chay var(--kh-time) linear infinite;
}
.kh-slide:hover .kh-track,
.kh-slide:focus-within .kh-track {
  animation-play-state: paused;
}
.kh-slide .kh-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: var(--kh-col);
  gap: var(--kh-gap);
  padding-right: var(--kh-gap);
}
.kh-slide .kh-item {
  width: auto;
}
@keyframes kh-chay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media screen and (max-width: 549px) {
  .kh-grid.kh-slide {
    --kh-col: 112px;
    --kh-gap: 8px;
    --kh-time: 45s;
  }
}

/* Người dùng tắt hiệu ứng chuyển động: dừng dải, cho vuốt/cuộn ngang bằng tay */
@media (prefers-reduced-motion: reduce) {
  .kh-grid.kh-slide {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kh-slide .kh-track {
    animation: none;
  }
  .kh-slide .kh-list[aria-hidden="true"] {
    display: none;
  }
}