/*
Theme Name: Vinh Loc An Gia
Theme URI: https://angiahomes.com.vn
Author: Le Nhung
Author URI: https://angiahomes.com.vn
Description: WordPress Theme for Vinh Loc An Gia (angiainvest.com.vn) — An Gia projects advisory, Tailwind CSS.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lenhung-angia
*/

/* ==========================================================================
   Site Logo
   ========================================================================== */
.site-logo {
	height: 32px;
	width: auto;
	display: block;
}

@media (min-width: 768px) {
	.site-logo { height: 40px; }
}

/* Show Units Redesign */
.show-unit-desc p {
    margin-bottom: 1.5rem;
}

.show-units-swiper .swiper-slide {
    height: auto;
}

.show-unit-card img {
    filter: brightness(0.95);
    transition: all 0.5s ease;
}

.show-unit-card:hover img {
    filter: brightness(1.05);
}

/* Custom Swiper Navigation */
.show-units-swiper ~ .swiper-button-prev,
.show-units-swiper ~ .swiper-button-next {
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
}

.show-units-swiper ~ .swiper-button-prev:hover,
.show-units-swiper ~ .swiper-button-next:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 15px 30px -5px rgba(200, 16, 46, 0.5);
}

.show-units-swiper ~ .swiper-button-prev:after,
.show-units-swiper ~ .swiper-button-next:after {
    display: none !important;
}

/* Header & Global Styles */
html { scroll-behavior: smooth; }
body.skin-vinhloc,
body {
    background-color: #f3f3f4;
    background-image:
        linear-gradient(180deg, rgba(10,10,11,0.03), transparent 220px),
        linear-gradient(90deg, rgba(220,31,46,0.04) 0, transparent 40%),
        repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(10,10,11,0.025) 48px),
        repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(10,10,11,0.025) 48px);
    color: #141416;
}
[data-reveal] {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 34px, 0) scale(0.985);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
    .hero-slide { transition: none; }
}
.hero-slide {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .9s ease, transform 1.4s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-copy { transition: opacity .35s ease, transform .35s ease; }
.hero-copy.is-changing { opacity: 0; transform: translateY(10px); }
.clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}
.news-modern-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.news-modern-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 45px -30px rgba(15, 23, 42, 0.45);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease;
}
.news-modern-card:hover {
    transform: translateY(-6px);
    border-color: rgba(220, 31, 46, 0.35);
    box-shadow: 0 28px 65px -30px rgba(15, 23, 42, 0.55);
}
.news-modern-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.news-modern-image img {
    height: 100%; width: 100%; object-fit: cover;
    filter: (100%);
    transform: scale(1.01);
    transition: filter .45s ease, transform .55s ease;
}
.news-modern-card:hover .news-modern-image img {
    filter: (0%);
    transform: scale(1.06);
}
.news-modern-image::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.05));
}
.news-modern-content {
    padding: 1.15rem 1.15rem 1.25rem;
    background: #fff;
    border-top: 2px solid #DC1F2E;
}
.news-modern-title {
    color: #0A0A0B;
    font-family: "Sora", "Be Vietnam Pro", sans-serif;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}
.news-modern-link {
    margin-top: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #64748b;
    transition: color .25s ease, transform .25s ease;
}
.news-modern-card:hover .news-modern-link {
    color: #e51b23;
    transform: translateX(2px);
}
.news-modern-badge {
    position: absolute; left: .85rem; top: .85rem; z-index: 2;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    padding: .32rem .65rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
}
@media (max-width: 900px) {
    .news-modern-grid { grid-template-columns: 1fr; }
    .news-modern-title { font-size: 1.22rem; }
}
.footer-ink, .footer-gold {
    background:
        linear-gradient(135deg, rgba(220, 31, 46, 0.18) 0%, transparent 42%),
        linear-gradient(180deg, #0A0A0B 0%, #141416 55%, #0A0A0B 100%);
    border-top: 3px solid #DC1F2E;
}
.footer-title {
    font-family: "Sora", "Be Vietnam Pro", sans-serif;
    font-size: 15px;
    letter-spacing: 0.18em;
    line-height: 1.35;
    color: #fff;
    text-transform: uppercase;
}
.footer-input {
    height: 2.9rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: .25rem;
    background: #ffffff;
    padding: .55rem .9rem;
    font-size: .95rem;
    color: #0f172a;
}
.footer-input:focus {
    outline: 2px solid rgba(220, 31, 46, 0.35);
    outline-offset: 1px;
    border-color: rgba(220, 31, 46, 0.45);
}
.footer-textarea { min-height: 5.2rem; resize: vertical; }
.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-weight: 700;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.footer-social:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.9);
}
.footer-bottom {
    background: #050506;
    color: #cbd5e1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Fluent Form Footer Compact Styles */
.footer-ink .fluentform .ff-el-group { margin-bottom: 0.85rem; }
.footer-ink .fluentform .ff-el-form-control { 
    height: 2.75rem; 
    font-size: 0.85rem; 
    background: #ffffff !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.footer-ink .fluentform textarea.ff-el-form-control { height: 4.5rem; }
.footer-ink .fluentform .ff-el-input--label label { 
    color: #cbd5e1; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.footer-ink .fluentform .ff-btn-submit {
    width: auto !important;
    min-width: 160px;
    background: linear-gradient(135deg, #DC1F2E 0%, #8F101A 100%) !important;
    border: none !important;
    padding: 0.8rem 2rem !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 15px rgba(220, 31, 46, 0.3) !important;
    transition: all 0.3s ease !important;
}
.footer-ink .fluentform .ff-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 31, 46, 0.4) !important;
    filter: brightness(1.1);
}
/* Ensure 2-column layout in footer form for desktop */
@media (min-width: 768px) {
    .footer-ink .fluentform .ff-t-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }
    .footer-ink .fluentform .ff-t-container .ff-t-column {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Premium Popup Form Styles */
.premium-form .ff-el-form-control {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
}
.premium-form .ff-el-form-control:focus {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(220, 31, 46, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(220, 31, 46, 0.1) !important;
    outline: none !important;
}
.premium-form .ff-el-form-control::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}
.premium-form .ff-el-input--label label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
}
.premium-form .ff-btn-submit {
    width: 100% !important;
    height: 3.5rem !important;
    background: linear-gradient(135deg, #E51B23 0%, #a91117 100%) !important;
    border: none !important;
    border-radius: 1rem !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.15em !important;
    box-shadow: 0 10px 25px -5px rgba(220, 31, 46, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.premium-form .ff-btn-submit:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 15px 30px -5px rgba(220, 31, 46, 0.5) !important;
}
.premium-form .ff_form_instance_1 .ff-message-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
}

/* Premium Light Popup Form Styles */
.premium-form-light .ff-el-form-control {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.premium-form-light .ff-el-form-control:focus {
    background-color: #ffffff !important;
    border-color: #E51B23 !important;
    box-shadow: 0 0 0 4px rgba(220, 31, 46, 0.1) !important;
    outline: none !important;
}
.premium-form-light .ff-el-form-control::placeholder {
    color: #94a3b8 !important;
}
.premium-form-light .ff-el-input--label label {
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
}
.premium-form-light .ff-btn-submit {
    width: 100% !important;
    height: 3.5rem !important;
    background: linear-gradient(135deg, #E51B23 0%, #a91117 100%) !important;
    border: none !important;
    border-radius: 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    letter-spacing: 0.15em !important;
    box-shadow: 0 10px 25px -5px rgba(220, 31, 46, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}
.premium-form-light .ff-btn-submit:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 15px 30px -5px rgba(220, 31, 46, 0.5) !important;
}
.premium-form-light .ff_form_instance_1 .ff-message-success {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #16a34a !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
}

/* Mobile Menu Drawer Styles */
#mobile-menu {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(100%);
}
#mobile-menu.is-active {
    transform: translateX(0);
}
#mobile-menu-overlay {
    transition: opacity 0.4s ease;
    pointer-events: none;
    opacity: 0;
}
#mobile-menu-overlay.is-active {
    pointer-events: auto;
    opacity: 1;
}

/* Hamburger Button Styles */
.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -8px;
}
.hamburger-inner::after {
    bottom: -8px;
}

/* Mobile Navigation - Styling matching Premium aesthetic */
.mobile-nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0f172a;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.mobile-nav-link:hover {
    color: #E51B23;
    padding-left: 0.5rem;
}
/* Submenu (Dropdown) Styles */
.menu-item-has-children {
    position: relative;
}
.sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    padding: 1rem 0;
    margin-top: 0.5rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}
.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sub-menu .menu-item {
    display: block;
    width: 100%;
}
.sub-menu .menu-item a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.2s ease;
}
.sub-menu .menu-item a:hover {
    color: #E51B23;
    background: rgba(220, 31, 46, 0.04);
    padding-left: 1.75rem;
}
.sub-menu .current-menu-item > a {
    color: #E51B23 !important;
    background: rgba(220, 31, 46, 0.04);
}

/* Mobile Submenu Styles */
@media (max-width: 767px) {
    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0 0 0 1rem;
        margin-top: 0;
        display: none; /* Will toggle via JS or just show all if desired */
    }
    .menu-item-has-children.is-open > .sub-menu {
        display: block;
    }
    #mobile-menu .menu-item-has-children > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    #mobile-menu .menu-item-has-children > a::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }
    #mobile-menu .menu-item-has-children.is-open > a::after {
        transform: rotate(180deg);
        color: #E51B23;
    }
}

/* Active Menu Highlight (Color Only) */
.current-menu-item > a,
.current-menu-ancestor > a {
    color: #E51B23 !important;
}

/* Mobile Menu Items Specifically */
#mobile-menu .menu-item a {
    display: block;
    padding: 1.15rem 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #0f172a;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: all 0.3s ease;
}
#mobile-menu .menu-item a:hover {
    color: #e51b23;
    padding-left: 0.5rem;
}

/* Ensure no padding interference for the arrow */
@media (max-width: 767px) {
    #mobile-menu .menu-item-has-children > a {
        padding-right: 1.5rem;
    }
}

/* ===== Single post content — bảng + p + heading (24/07/2026) ===== */
.single .prose,
article .prose,
.prose {
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.prose > p {
  margin: 0 0 1.25rem;
  color: #475569;
}

.prose > p:first-of-type {
  font-size: 1.125rem;
  color: #334155;
}

.prose h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #0f172a;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #e2e8f0;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0b2046;
  margin: 1.75rem 0 0.75rem;
  line-height: 1.35;
}

.prose h2 + p,
.prose h3 + p {
  margin-top: 0.5rem;
}

.prose a {
  color: #E51B23;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: #0b2046;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}
.prose li {
  margin: 0.4rem 0;
  padding-left: 0.25rem;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: #E51B23; }

.prose .table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35);
  border: 1px solid #e2e8f0;
  background: #fff;
}

.prose table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 1.75rem 0 2rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35);
  border: 1px solid #e2e8f0;
  background: #fff;
}

.prose .table-wrap table {
  margin: 0;
  box-shadow: none;
  border: none;
  border-radius: 0;
  min-width: 560px;
}

.prose thead th {
  background: linear-gradient(180deg, #0b2046 0%, #12305f 100%);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.95rem 1.1rem;
  white-space: nowrap;
  border: none;
}

.prose tbody td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: top;
  background: #fff;
}

.prose tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.prose tbody tr:hover td {
  background: #fff7ed;
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose tbody td:first-child {
  font-weight: 700;
  color: #0f172a;
}

.prose figure {
  margin: 1.75rem 0 2rem;
}
.prose figure img {
  border-radius: 1rem;
  box-shadow: 0 12px 40px -20px rgba(15, 23, 42, 0.45);
  height: auto;
  max-width: 100%;
}
.prose figcaption {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  color: #64748b;
  font-style: italic;
  text-align: center;
}

.prose strong {
  color: #0f172a;
  font-weight: 800;
}
.prose em {
  color: #475569;
}

@media (max-width: 640px) {
  .prose table {
    font-size: 0.875rem;
  }
  .prose thead th,
  .prose tbody td {
    padding: 0.75rem 0.85rem;
  }
}


/* ===== FAQ accordion chuẩn site (.lhag-faq) ===== */
.lhag-faq {
  margin: 1.5rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lhag-faq__item {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px -18px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.lhag-faq__item.is-open {
  border-color: rgba(220, 31, 46, 0.35);
  box-shadow: 0 14px 32px -18px rgba(220, 31, 46, 0.25);
}
.lhag-faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  text-align: left;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #0f172a;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.lhag-faq__q:hover { color: #E51B23; }
.lhag-faq__q:focus-visible {
  outline: 2px solid #E51B23;
  outline-offset: 2px;
}
.lhag-faq__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lhag-faq__item.is-open .lhag-faq__icon {
  transform: rotate(45deg);
  background: #E51B23;
  border-color: #E51B23;
  color: #fff;
}
.lhag-faq__a {
  padding: 0 1.15rem 1.15rem;
  color: #475569;
  font-size: 1rem;
  line-height: 1.75;
  border-top: 1px solid #f1f5f9;
}
.lhag-faq__a p {
  margin: 0.85rem 0 0;
  color: #475569;
}
.lhag-faq__a a {
  color: #E51B23;
  font-weight: 600;
}
.lhag-faq__a[hidden] {
  display: none !important;
}



/* ==========================================================================
   PREMIUM SEPARATED PAGINATION COMPONENT (123WEBSITE)
   ========================================================================== */

ul.page-numbers,
.lhag-pagination,
.news-pagination,
.nav-links,
div.col-span-full ul {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 40px 0 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    list-style: none !important;
}

ul.page-numbers > li,
.lhag-pagination > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    list-style: none !important;
}

ul.page-numbers > li > a,
ul.page-numbers > li > span,
.lhag-pagination a,
.lhag-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

ul.page-numbers > li > a:hover,
.lhag-pagination a:hover {
    background-color: #f8fafc !important;
    border-color: #DC1F2E !important;
    color: #DC1F2E !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(220, 31, 46, 0.18) !important;
}

ul.page-numbers > li > span.current,
.lhag-pagination span.current {
    background-color: #DC1F2E !important;
    border-color: #DC1F2E !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 31, 46, 0.35) !important;
    transform: scale(1.05) !important;
}

ul.page-numbers > li > span.dots {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
}


/* ==========================================================================
   WORDPRESS ADMIN BAR OFFSET FIX FOR LOGGED-IN USERS (123WEBSITE)
   ========================================================================== */

@media screen and (min-width: 783px) {
    body.admin-bar header,
    body.admin-bar .site-header,
    body.admin-bar #site-header,
    body.admin-bar nav.fixed,
    body.admin-bar header.fixed,
    body.admin-bar header.top-0 {
        top: 32px !important;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar header,
    body.admin-bar .site-header,
    body.admin-bar #site-header,
    body.admin-bar nav.fixed,
    body.admin-bar header.fixed,
    body.admin-bar header.top-0 {
        top: 46px !important;
    }
}


/* ==========================================================================
   SKIN: Vinh Loc An Gia — distinct from Le Nhung twin
   Red-black, sharper geometry, investment tone
   ========================================================================== */
:root {
  --vl-red: #DC1F2E;
  --vl-red-dark: #8F101A;
  --vl-ink: #0A0A0B;
  --vl-ink-2: #141416;
}

body.skin-vinhloc {
  font-feature-settings: "ss01" on, "kern" on;
}

body.skin-vinhloc .font-display,
.skin-vinhloc h1,
.skin-vinhloc h2,
.skin-vinhloc h3 {
  font-family: "Sora", "Be Vietnam Pro", system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

.header-accent-bar {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--vl-red) 0%, var(--vl-red-dark) 45%, #0A0A0B 100%);
}

#site-header.scrolled,
#site-header:not([data-header-transparent="true"]) {
  background: rgba(10, 10, 11, 0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.65);
}

#site-header[data-header-transparent="true"]:not(.scrolled) {
  background: linear-gradient(180deg, rgba(10,10,11,0.55), transparent) !important;
}



.project-card { position: relative; }
.project-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vl-red);
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}
.project-card:hover::before { opacity: 1; }
.project-card .h-64 img {
  filter: saturate(0.92) contrast(1.04);
}
.project-card:hover .h-64 img { filter: none; }

.skin-vinhloc .rounded-3xl { border-radius: 0.85rem !important; }
.skin-vinhloc .rounded-2xl { border-radius: 0.65rem !important; }
.skin-vinhloc .rounded-full.bg-brand-500,
.skin-vinhloc a.rounded-full.bg-brand-500 {
  border-radius: 0.45rem !important;
}

.skin-vinhloc details summary {
  font-family: "Sora", "Be Vietnam Pro", sans-serif;
  letter-spacing: -0.01em;
}

/* Nen toi da bo 11/08/2026: lam link cap 1, nut dong va logo deu chim.
   Drawer tro ve nen sang dung theo markup bg-white/95. */

::selection {
  background: rgba(220, 31, 46, 0.2);
  color: #0A0A0B;
}

/* Single project sticky nav more ink */
.skin-vinhloc nav.sticky.top-0 {
  border-bottom: 1px solid rgba(10,10,11,0.08);
}

/* Breadcrumb denser */
.skin-vinhloc #breadcrumbs { letter-spacing: 0.14em; }


/* ==========================================================================
   HOME LAYOUT V2 — structural identity Vĩnh Lộc (not Lê Nhung grid)
   ========================================================================== */
.home-vl #hero-stats .vl-stat-cell,
.home-vl #hero-stats > div {
  background: rgba(10, 10, 11, 0.88);
  padding: 0.85rem 0.5rem;
  text-align: center;
  border: 0;
  border-radius: 0;
}
.home-vl #hero-stats p,
.home-vl #hero-stats .text-white,
.home-vl #hero-stats [class*="text-"] {
  color: #fff !important;
}
.home-vl #hero-stats p.text-xs,
.home-vl #hero-stats .text-xs,
.home-vl #hero-stats p:last-child {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.62rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.vl-project-row { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.home-vl .hero-slide,
.home-vl .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.skin-vinhloc #site-header.bg-white\/90 {
  background: rgba(10, 10, 11, 0.96) !important;
  color: #fff;
}
body.skin-vinhloc #site-header.bg-white\/90 > div > a,
body.skin-vinhloc #site-header.bg-white\/90 nav > ul > li > a {
  color: rgba(255,255,255,0.9) !important;
}
/* Hide old centered full-bleed feel */
.home-vl #trang-chu { isolation: isolate; }


/* ===== Submenu fix: dark text on white dropdown (header ink) ===== */
#site-header.scrolled nav > ul > li > a,
#site-header:not([data-header-transparent="true"]) nav > ul > li > a,
#site-header.scrolled > div > .mx-auto > a,
#site-header #mobile-menu-toggle {
  color: rgba(255,255,255,0.9) !important;
}
/* Do NOT force white on .sub-menu links */
#site-header .sub-menu {
  background: #ffffff !important;
  border: 1px solid rgba(10, 10, 11, 0.08) !important;
  border-top: 3px solid #DC1F2E !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 18px 40px -16px rgba(10, 10, 11, 0.35) !important;
  z-index: 200;
}
#site-header .sub-menu a,
#site-header .sub-menu .menu-item a,
body.skin-vinhloc #site-header .sub-menu a,
body.skin-vinhloc #site-header.scrolled .sub-menu a,
body.skin-vinhloc #site-header .sub-menu .menu-item a {
  color: #141416 !important;
  background: transparent !important;
}
#site-header .sub-menu a:hover,
#site-header .sub-menu .menu-item a:hover,
body.skin-vinhloc #site-header .sub-menu a:hover {
  color: #DC1F2E !important;
  background: rgba(220, 31, 46, 0.06) !important;
}
#site-header .sub-menu .current-menu-item > a {
  color: #DC1F2E !important;
}
/* Mobile drawer: submenu stays light on dark */
#mobile-menu .sub-menu a {
  color: #475569 !important;
}
#mobile-menu .sub-menu a:hover {
  color: #DC1F2E !important;
}


/* Primary menu: top-level white only */
#site-header .vl-primary-menu > li > a {
  color: rgba(255, 255, 255, 0.9) !important;
}
#site-header .vl-primary-menu > li > a:hover {
  color: #ffffff !important;
}
#site-header .vl-primary-menu .sub-menu,
#site-header .sub-menu {
  background: #ffffff !important;
  color: #141416 !important;
}
#site-header .vl-primary-menu .sub-menu a,
#site-header .sub-menu a {
  color: #141416 !important;
}
#site-header .vl-primary-menu .sub-menu a:hover,
#site-header .sub-menu a:hover {
  color: #DC1F2E !important;
  background: rgba(220, 31, 46, 0.06) !important;
}


/* ==========================================================================
   FOOTER VL — layout riêng Vĩnh Lộc
   ========================================================================== */
.footer-vl { background: #0A0A0B; }
.footer-vl-cta { background: #DC1F2E; }
.footer-vl-links a {
  display: inline-block;
  color: rgba(255,255,255,0.78);
  transition: color .2s ease, transform .2s ease;
}
.footer-vl-links a:hover {
  color: #DC1F2E;
  transform: translateX(3px);
}
.footer-vl-form .footer-input {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0A0A0B !important;
  border-radius: 0.25rem !important;
}
.footer-vl-fluent .fluentform .ff-el-form-control {
  height: 2.75rem !important;
  border-radius: 0.25rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0A0A0B !important;
  font-size: 0.875rem !important;
}
.footer-vl-fluent .fluentform textarea.ff-el-form-control {
  height: 5rem !important;
}
.footer-vl-fluent .fluentform .ff-el-input--label label {
  color: #64748b !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
}
.footer-vl-fluent .fluentform .ff-btn-submit {
  width: auto !important;
  min-width: 140px;
  background: #DC1F2E !important;
  border: none !important;
  border-radius: 0.25rem !important;
  padding: 0.85rem 1.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(220,31,46,0.55) !important;
}
.footer-vl-fluent .fluentform .ff-btn-submit:hover {
  background: #B91522 !important;
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .footer-vl-fluent .fluentform .ff-t-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .footer-vl-fluent .fluentform .ff-t-container .ff-t-column {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* PROJECT VL LAYOUT */
.project-vl-bc, .project-vl-bc a { color: rgba(255,255,255,0.45) !important; }
.project-vl-bc .breadcrumb_last { color: rgba(255,255,255,0.7) !important; }
.project-vl .prose a { color: #DC1F2E; font-weight: 600; }
.project-vl .prose table { width: 100%; font-size: 0.9rem; border-collapse: collapse; }
.project-vl .prose th, .project-vl .prose td { border: 1px solid #e2e8f0; padding: 0.5rem 0.65rem; text-align: left; }
.project-vl .prose th { background: #f8fafc; }

/* === VL FAQ ACCORDION (theme) === */
.entry-content .vl-faq,
.prose .vl-faq,
.vl-faq{
  margin:1.5rem 0 2rem;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.vl-faq__item{
  border:1px solid #E8E8EC;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px -20px rgba(10,10,11,.4);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.vl-faq__item[open],
.vl-faq__item.is-open{
  border-color:rgba(220,31,46,.32);
  box-shadow:0 14px 30px -18px rgba(220,31,46,.28);
}
.vl-faq__q{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  margin:0;
  padding:18px 20px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.45;
  color:#0A0A0B;
  transition:background .2s ease, color .2s ease;
}
.vl-faq__q::-webkit-details-marker{display:none}
.vl-faq__q::marker{content:""}
.vl-faq__q:hover{background:#FAFAFB;color:#DC1F2E}
.vl-faq__item[open] .vl-faq__q,
.vl-faq__item.is-open .vl-faq__q{
  color:#DC1F2E;
  background:linear-gradient(180deg,rgba(220,31,46,.05),transparent);
}
.vl-faq__q-text{flex:1;min-width:0}
.vl-faq__icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid #E8E8EC;
  background:#FAFAFB;
  position:relative;
  display:inline-block;
  transition:transform .28s ease, background .2s ease, border-color .2s ease;
}
.vl-faq__icon::before,
.vl-faq__icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:#0A0A0B;
  border-radius:2px;
  transition:transform .28s ease, background .2s ease, opacity .2s ease;
}
/* plus horizontal */
.vl-faq__icon::before{
  width:12px;height:2px;
  transform:translate(-50%,-50%);
}
/* plus vertical */
.vl-faq__icon::after{
  width:2px;height:12px;
  transform:translate(-50%,-50%);
}
.vl-faq__item[open] .vl-faq__icon,
.vl-faq__item.is-open .vl-faq__icon{
  background:#DC1F2E;
  border-color:#DC1F2E;
}
.vl-faq__item[open] .vl-faq__icon::before,
.vl-faq__item[open] .vl-faq__icon::after,
.vl-faq__item.is-open .vl-faq__icon::before,
.vl-faq__item.is-open .vl-faq__icon::after{
  background:#fff;
}
/* open = minus (hide vertical bar) */
.vl-faq__item[open] .vl-faq__icon::after,
.vl-faq__item.is-open .vl-faq__icon::after{
  opacity:0;
  transform:translate(-50%,-50%) scaleY(0);
}
.vl-faq__a{color:#5B5B63;font-size:.98rem;line-height:1.7}
.vl-faq__a-inner{padding:0 20px 18px}
.vl-faq__a-inner p{margin:0 0 .7rem}
.vl-faq__a-inner p:last-child{margin-bottom:0}
.vl-faq__a-inner a{color:#DC1F2E;font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){
  .vl-faq__q{padding:15px 16px;font-size:1rem}
  .vl-faq__a-inner{padding:0 16px 15px}
  .vl-faq__icon{width:30px;height:30px;flex-basis:30px}
}
/* === END VL FAQ */



/* ==========================================================================
   [A] GIAO DIEN SANG — HEADER. Thu nghiem 12/08/2026.
   Xoa tu dong nay toi moc [/A] de tra ve header toi.
   Luu y: header cu co trang thai "trong suot tren anh hero"; o ban sang
   minh dat nen dac ca hai trang thai de chu luon doc duoc tren moi anh.
   ========================================================================== */
#site-header,
#site-header.scrolled,
#site-header:not([data-header-transparent="true"]),
#site-header[data-header-transparent="true"]:not(.scrolled),
body.skin-vinhloc #site-header.bg-white\/90 {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid rgba(10, 10, 11, 0.08) !important;
  box-shadow: 0 10px 30px -22px rgba(10, 10, 11, 0.28) !important;
  color: #0A0A0B !important;
}
#site-header [class*="text-white"],
#site-header .vl-primary-menu > li > a,
body.skin-vinhloc #site-header.bg-white\/90 > div > a,
body.skin-vinhloc #site-header.bg-white\/90 nav > ul > li > a {
  color: #0A0A0B !important;
}
#site-header .vl-primary-menu > li > a:hover,
#site-header .current-menu-item > a,
#site-header .current-menu-ancestor > a {
  color: #DC1F2E !important;
}
#site-header #mobile-menu-toggle { color: #0A0A0B !important; }
#site-header .sub-menu { background: #fff !important; }
#site-header .sub-menu a { color: #334155 !important; }
/* [/A] */


/* ==========================================================================
   [B] GIAO DIEN SANG — FOOTER. Thu nghiem 12/08/2026.
   Nen toi that su nam o lop Tailwind bg-ink / bg-black trong footer.php.
   Chu y: GIU nguyen nut CTA do va cot nhan toi — chu trang o do la dung.
   Xoa tu dong nay toi moc [/B] de tra ve footer toi.
   ========================================================================== */
.footer-vl { background: #F4F4F6 !important; color: #1E293B; }
.footer-vl .footer-vl-body { background: #F4F4F6 !important; }
.footer-vl .footer-vl-bottom {
  background: #E9E9ED !important;
  border-top-color: rgba(10, 10, 11, 0.10) !important;
}
/* chu tren vung sang */
.footer-vl .footer-vl-body [class*="text-white"],
.footer-vl .footer-vl-bottom [class*="text-white"] { color: #334155 !important; }
.footer-vl .footer-vl-body .text-white\/40,
.footer-vl .footer-vl-body .text-white\/70,
.footer-vl .footer-vl-bottom .text-white\/40 { color: #475569 !important; }
.footer-vl .text-slate-400 { color: #475569 !important; }
.footer-vl [class*="border-white"] { border-color: rgba(10, 10, 11, 0.12) !important; }
.footer-vl .bg-white\/10,
.footer-vl .bg-white\/20 { background-color: rgba(10, 10, 11, 0.05) !important; }
.footer-vl-links a { color: #334155 !important; }
.footer-vl-links a:hover { color: #DC1F2E !important; }
/* do thuong hieu tren nen sang: dam hon chut cho du tuong phan 4.5 */
.footer-vl [class*="text-brand"] { color: #C81828 !important; }
/* giu chu trang o cac khoi van toi hoac do — dat sau cung de thang do uu tien */
.footer-vl a.bg-ink,
.footer-vl a.bg-ink *,
.footer-vl div.bg-ink:not(.footer-vl-body),
.footer-vl div.bg-ink:not(.footer-vl-body) *,
.footer-vl .footer-vl-cta,
.footer-vl .footer-vl-cta * { color: #FFFFFF !important; }
/* cot nhan va nut van giu nen toi */
.footer-vl div.bg-ink:not(.footer-vl-body) { background-color: #0A0A0B !important; }
.footer-vl a.bg-ink { background-color: #0A0A0B !important; }
/* [/B] */

/* ==========================================================================
   [C] GIAO DIEN SANG — THAN TRANG CHU. Thu nghiem 12/08/2026.
   Xoa tu dong nay toi moc [/C] de tra ve than trang toi.
   ========================================================================== */
/* nen sang cho hai section lon va the bai noi bat */
.home-vl section.bg-ink { background-color: #F7F7F9 !important; }
.home-vl section.bg-ink .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #FFFFFF, #F3F3F6 55%, #ECECF0) !important;
}
.home-vl article.bg-ink {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(10, 10, 11, 0.08);
}
/* chu trong vung vua lam sang */
.home-vl section.bg-ink [class*="text-white"],
.home-vl article.bg-ink [class*="text-white"] { color: #1E293B !important; }
.home-vl section.bg-ink .text-white\/60,
.home-vl section.bg-ink .text-white\/70,
.home-vl article.bg-ink .text-white\/70 { color: #475569 !important; }
.home-vl section.bg-ink [class*="border-white"],
.home-vl article.bg-ink [class*="border-white"] { border-color: rgba(10, 10, 11, 0.12) !important; }
/* do thuong hieu dam hon cho du tuong phan tren nen sang */
.home-vl section.bg-ink [class*="text-brand"],
.home-vl article.bg-ink [class*="text-brand"] { color: #C81828 !important; }
/* dai thong so duoi hero */
.home-vl #hero-stats .vl-stat-cell,
.home-vl #hero-stats > div { background: rgba(10, 10, 11, 0.05) !important; }
.home-vl #hero-stats p,
.home-vl #hero-stats .text-white,
.home-vl #hero-stats [class*="text-"] { color: #1E293B !important; }

/* --- GIU NGUYEN TOI: video, nut, the noi tren anh --- */
.home-vl .aspect-video.bg-ink { background-color: #0A0A0B !important; }
.home-vl a.bg-ink { background-color: #0A0A0B !important; }
.home-vl a.bg-ink,
.home-vl a.bg-ink *,
.home-vl .aspect-video.bg-ink [class*="text-white"] { color: #FFFFFF !important; }
.home-vl .absolute.bottom-6 [class*="text-white"] { color: #FFFFFF !important; }
.home-vl .absolute.bottom-6 [class*="text-brand"] { color: #FF5A62 !important; }
/* --- va bo sung 12/08/2026 --- */
/* section mang san lop text-white -> chu con thua ke trang, phai dat lai */
.home-vl section.bg-ink,
.home-vl section.bg-ink.text-white { color: #1E293B !important; }
/* nut do: chu phai trang */
.home-vl [class*="bg-brand-"],
.home-vl [class*="bg-brand-"] * { color: #FFFFFF !important; }
/* ngay thang / chu phu qua nhat tren nen trang */
.home-vl .text-slate-400 { color: #64748B !important; }
/* nut do trong vung da lam sang: tang do uu tien de thang quy tac chu toi */
.home-vl section.bg-ink a[class*="bg-brand-"],
.home-vl section.bg-ink a[class*="bg-brand-"] *,
.home-vl article.bg-ink a[class*="bg-brand-"],
.home-vl article.bg-ink a[class*="bg-brand-"] * { color: #FFFFFF !important; }
/* ban quyen trong ngan keo mobile qua nhat */
#mobile-menu .text-slate-400 { color: #475569 !important; }
/* [/C] */

/* ==========================================================================
   [D] DO DOC CHU PHU — 12/08/2026. Chu xam qua nhat tren nen sang:
   breadcrumb va dong "Dang boi" chi dat 2.31 va 4.29 (chuan 4.5).
   Xoa toi moc [/D] de tra ve cu.
   ========================================================================== */
.skin-vinhloc .text-slate-400 { color: #64748B !important; }
.skin-vinhloc .text-slate-500 { color: #475569 !important; }
/* [/D] */


/* ==========================================================================
   [E] VA CUOI — 12/08/2026.
   1) Link menu header khong co class nen cac selector truoc do truot;
      dung selector bao trum roi tra lai mau trang cho nut CTA do.
   2) Trang bai viet KHONG co class skin-vinhloc nen khoi [D] khong ap;
      bo tien to di.
   ========================================================================== */
#site-header a { color: #0A0A0B !important; }
#site-header a:hover,
#site-header .current-menu-item > a { color: #DC1F2E !important; }
#site-header a[class*="bg-brand-"],
#site-header a[class*="bg-brand-"] *,
#site-header a[class*="bg-ink"],
#site-header a[class*="bg-ink"] * { color: #FFFFFF !important; }
.text-slate-400 { color: #64748B !important; }
.text-slate-500 { color: #475569 !important; }
/* [/E] */


/* ==========================================================================
   [F] VA DO UU TIEN — 12/08/2026.
   1) Quy tac cu #site-header .vl-primary-menu>li>a co do uu tien 0,2,1
      nen thang #site-header a (0,1,1). Phai dung selector manh hon.
   2) text-slate-400 doi thanh #64748B van chi dat 4.29 tren nen #F3F3F4,
      ha them mot bac.
   ========================================================================== */
#site-header ul.vl-primary-menu,
#site-header ul.vl-primary-menu > li > a { color: #0A0A0B !important; }
#site-header ul.vl-primary-menu > li > a:hover,
#site-header ul.vl-primary-menu > li.current-menu-item > a,
#site-header ul.vl-primary-menu > li.current-menu-ancestor > a { color: #DC1F2E !important; }
.text-slate-400 { color: #475569 !important; }
/* [/F] */


/* ========================================================================== 
   HERO PREMIUM — full-bleed search layout, 29/08/2026
   ========================================================================== */
.vl-hero-premium {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  background: #090b12;
  color: #fff;
}
.vl-hero-media,
.vl-hero-media::after,
.vl-hero-overlay {
  position: absolute;
  inset: 0;
}
.vl-hero-media { z-index: -2; }
.vl-hero-media::after {
  z-index: 2;
  content: "";
  background:
    linear-gradient(180deg, rgba(5, 7, 13, .68) 0%, rgba(5, 7, 13, .18) 26%, rgba(5, 7, 13, .44) 66%, rgba(5, 7, 13, .82) 100%),
    linear-gradient(90deg, rgba(7, 9, 15, .28), rgba(7, 9, 15, .08));
  pointer-events: none;
}
.vl-hero-overlay {
  z-index: 1;
  background: rgba(7, 9, 15, .18);
  pointer-events: none;
}
.vl-hero-media .hero-slide,
.vl-hero-media .hero-slide img {
  width: 100%;
  height: 100%;
}
.vl-hero-media .hero-slide img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.03);
}
.vl-hero-shell {
  z-index: 5;
  display: flex;
  width: min(100% - 2rem, 1120px);
  min-height: 100svh;
  margin-inline: auto;
  padding: 8.5rem 0 5.5rem;
  align-items: center;
  justify-content: center;
}
.vl-hero-copy {
  width: min(100%, 940px);
  margin-inline: auto;
  text-align: center;
}
.vl-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.55rem;
  padding: .58rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(7, 9, 15, .48);
  color: #ff5a62;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.vl-hero-heading {
  display: grid;
  justify-items: center;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 5.4vw, 5.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 4px 34px rgba(0, 0, 0, .42);
}
.vl-hero-heading #hero-title-main,
.vl-hero-heading #hero-title-sub { display: block; }
.vl-hero-heading #hero-title-sub {
  margin-top: .28em;
  max-width: 100%;
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  font-size: .5em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}
.vl-hero-description {
  width: min(100%, 720px);
  margin: 1.8rem auto 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.72;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.vl-hero-search {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  gap: .9rem;
  width: min(100%, 800px);
  margin: 2rem auto 0;
  padding: .55rem .58rem .55rem 1.15rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1rem;
  background: rgba(8, 11, 20, .62);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
}
.vl-hero-search svg {
  width: 1.25rem;
  color: #ff5a62;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.vl-hero-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: .96rem;
}
.vl-hero-search input::placeholder { color: rgba(255, 255, 255, .58); }
.vl-hero-search button {
  min-height: 3.15rem;
  padding: 0 1.8rem;
  border: 1px solid #DC1F2E;
  border-radius: .75rem;
  background: #DC1F2E;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .2s ease, background-color .2s ease;
}
.vl-hero-search button:hover { background: #EF3340; transform: translateY(-1px); }
.vl-hero-suggestions {
  display: flex;
  width: min(100%, 900px);
  margin: 1rem auto 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  font-size: .76rem;
}
.vl-hero-suggestions > span {
  margin-right: .15rem;
  color: #ff5a62;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vl-hero-suggestions a,
#site-header[data-header-transparent="true"]:not(.scrolled) a {
  color: #fff !important;
}
.vl-hero-suggestions a {
  padding: .42rem .78rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(8, 11, 20, .35);
  backdrop-filter: blur(10px);
  transition: border-color .2s ease, background-color .2s ease;
}
.vl-hero-suggestions a:hover {
  border-color: #DC1F2E;
  background: rgba(220, 31, 46, .2);
  color: #fff !important;
}
.vl-hero-actions {
  display: flex;
  margin-top: 2.25rem;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9rem;
}
.vl-hero-actions a {
  display: inline-flex;
  min-width: 14rem;
  min-height: 3.55rem;
  padding: 0 1.6rem;
  align-items: center;
  justify-content: center;
  border-radius: .78rem;
  color: #fff !important;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.vl-hero-actions a:hover { transform: translateY(-2px); color: #fff !important; }
.vl-hero-actions .vl-hero-primary {
  border: 1px solid #DC1F2E;
  background: #DC1F2E;
  color: #fff !important;
}
.vl-hero-actions .vl-hero-primary:hover { background: #EF3340; color: #fff !important; }
.vl-hero-actions .vl-hero-secondary {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(8, 11, 20, .42);
  backdrop-filter: blur(10px);
}
.vl-hero-actions .vl-hero-secondary:hover { border-color: rgba(255, 255, 255, .68); background: rgba(255, 255, 255, .12); }
.vl-hero-controls {
  position: absolute;
  z-index: 8;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  gap: .55rem;
}
.vl-hero-controls button {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(8, 11, 20, .52);
  color: #fff;
  place-items: center;
  backdrop-filter: blur(10px);
  transition: background-color .2s ease, border-color .2s ease;
}
.vl-hero-controls button:hover { border-color: #DC1F2E; background: #DC1F2E; color: #fff; }
.vl-hero-controls svg { width: 1.15rem; }

#site-header[data-header-transparent="true"]:not(.scrolled) {
  background: linear-gradient(180deg, rgba(5, 7, 13, .64), rgba(5, 7, 13, 0)) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
#site-header[data-header-transparent="true"]:not(.scrolled) ul.vl-primary-menu > li > a,
#site-header[data-header-transparent="true"]:not(.scrolled) #mobile-menu-toggle {
  color: rgba(255, 255, 255, .94) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}
#site-header[data-header-transparent="true"]:not(.scrolled) ul.vl-primary-menu > li > a:hover,
#site-header[data-header-transparent="true"]:not(.scrolled) ul.vl-primary-menu > li.current-menu-item > a {
  color: #ff5a62 !important;
}
#site-header[data-header-transparent="true"]:not(.scrolled) .site-logo {
  filter: brightness(0) invert(1);
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, .3));
}
html body #site-header#site-header[data-header-transparent="true"]:not(.scrolled) nav > ul.vl-primary-menu > li.menu-item > a {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}
html body #site-header#site-header[data-header-transparent="true"]:not(.scrolled) nav > ul.vl-primary-menu > li.current-menu-item > a,
html body #site-header#site-header[data-header-transparent="true"]:not(.scrolled) nav > ul.vl-primary-menu > li.current-menu-ancestor > a {
  color: #ff5a62 !important;
}

@media (max-width: 767px) {
  .vl-hero-premium,
  .vl-hero-shell { min-height: 780px; }
  .vl-hero-shell {
    width: min(100% - 1.25rem, 1120px);
    padding: 7rem 0 4.8rem;
  }
  .vl-hero-media .hero-slide img { object-position: 60% center; }
  .vl-hero-badge {
    margin-bottom: 1.15rem;
    padding: .48rem .85rem;
    font-size: .6rem;
    letter-spacing: .15em;
  }
  .vl-hero-heading { font-size: clamp(2.25rem, 11vw, 3.45rem); }
  .vl-hero-heading #hero-title-sub { font-size: .48em; line-height: 1.28; }
  .vl-hero-description { margin-top: 1.25rem; font-size: .9rem; line-height: 1.6; }
  .vl-hero-search {
    grid-template-columns: 1.2rem 1fr;
    gap: .65rem;
    margin-top: 1.45rem;
    padding: .8rem 1rem;
    border-radius: .8rem;
  }
  .vl-hero-search input { font-size: .87rem; }
  .vl-hero-search button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 2.85rem;
  }
  .vl-hero-suggestions { max-height: 5.2rem; overflow: hidden; gap: .42rem; }
  .vl-hero-suggestions a { padding: .35rem .62rem; font-size: .69rem; }
  .vl-hero-actions { margin-top: 1.55rem; gap: .65rem; }
  .vl-hero-actions a { min-width: 0; min-height: 3rem; padding: 0 1.05rem; font-size: .68rem; }
  .vl-hero-controls { right: .8rem; bottom: .8rem; }
  .vl-hero-controls button { width: 2.45rem; height: 2.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-hero-search button,
  .vl-hero-actions a,
  .vl-hero-controls button { transition: none; }
}

/* ==========================================================================
   SKIN THU THIEM  —  bo mau xanh navy thay cho bo do An Gia
   Khoi nay duoc them vao cuoi style.css. Xoa tu dong nay tro xuong
   la tro lai giao dien cu. Ban goc luu o style.css.bak-doangiao-dien
   ========================================================================== */

:root {
	--vl-red: #1B2A4A;        /* navy chinh, thay do */
	--vl-red-dark: #0E1A30;   /* navy dam */
	--vl-ink: #0A1220;
	--tt-navy: #1B2A4A;
	--tt-navy-deep: #0B1526;
	--tt-gold: #C8A96A;       /* nhan nhe, dung cho gach chan va badge */
	--tt-line: rgba(255, 255, 255, 0.14);
}

/* ---------- Hero: nen navy chuyen sac, khong phu thuoc anh ---------- */
.vl-hero-premium {
	background:
		radial-gradient(120% 80% at 70% 0%, rgba(40, 68, 112, 0.55) 0%, transparent 60%),
		linear-gradient(160deg, #0B1526 0%, #16294A 45%, #0B1526 100%) !important;
}

.vl-hero-premium::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(transparent 0, transparent calc(100% - 1px), var(--tt-line) 100%),
		linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--tt-line) 100%);
	background-size: 92px 92px;
	opacity: 0.35;
	pointer-events: none;
}

.vl-hero-premium > * {
	position: relative;
	z-index: 1;
}

/* Badge tren hero: gach chan vang nhat thay vi nen do */
.vl-hero-badge {
	color: var(--tt-gold) !important;
	letter-spacing: 0.22em;
}

.vl-hero-badge::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-top: 10px;
	background: var(--tt-gold);
}

/* Tieu de hero: kieu chu co chan, chu hoa thua net — giong mau Thu Thiem */
#hero-title-main {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.02em;
}

#hero-title-sub {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	opacity: 0.92;
}

/* ---------- Mau nhan: do -> navy ---------- */
.text-brand-600,
.text-brand-500 {
	color: var(--tt-navy) !important;
}

.bg-brand-600,
.bg-brand-500 {
	background-color: var(--tt-navy) !important;
}

.border-brand-600,
.border-brand-500 {
	border-color: var(--tt-navy) !important;
}

.bg-ink {
	background-color: var(--tt-navy-deep) !important;
}

/* Nut chinh */
.vl-btn-primary,
button[type="submit"],
.wp-block-button__link {
	background: var(--tt-navy) !important;
	border-color: var(--tt-navy) !important;
}

.vl-btn-primary:hover,
button[type="submit"]:hover {
	background: var(--tt-navy-deep) !important;
}

/* ---------- Tieu de muc: chu co chan cho giong mau ---------- */
.font-display {
	font-family: Georgia, "Times New Roman", serif !important;
}

/* ---------- Footer navy thay vi den ---------- */
.footer-vl {
	background: linear-gradient(180deg, #0B1526 0%, #16294A 100%) !important;
}

/* ---------- The du an: vien mong, bo goc nho, khong do ---------- */
.vl-project-card,
.home-vl article {
	border-color: rgba(27, 42, 74, 0.14) !important;
}

/* ---------- Thanh dieu huong ---------- */
#site-header.bg-ink\/95,
#site-header .bg-ink {
	background-color: rgba(11, 21, 38, 0.95) !important;
}

/* ---------- Popup bao gia: tat tu dong bat, cho bam moi hien ---------- */
#quote-modal {
	display: none !important;
}

#quote-modal.vl-open {
	display: flex !important;
}

/* wordmark thay logo anh */
.site-wordmark {
	display: inline-block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.1;
	color: #fff;
	text-transform: uppercase;
}

/* nut hotline tren hero: do -> navy vien vang */
.vl-hero-primary {
	background: var(--tt-navy) !important;
	border: 1px solid var(--tt-gold) !important;
}
.vl-hero-primary:hover {
	background: var(--tt-navy-deep) !important;
}