/*
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: 'Montserrat', 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: 'Montserrat', 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 defined in Section 6 below) */

/* 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;
}
/* (Legacy desktop .sub-menu rules replaced by section 4) */

/* (Legacy mobile submenu styles removed - see Section 6) */

/* ===== 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: 'Montserrat', 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);
}

@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: 'Montserrat', sans-serif;
	letter-spacing: 0.02em;
}

#hero-title-sub {
	font-family: 'Montserrat', sans-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: 'Montserrat', sans-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: 'Montserrat', sans-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;
}


/* ==========================================================================
   TONE VÀNG KIM CHỦ ĐẠO (LUXURY GOLD ACCENTS & THEME)
   ========================================================================== */
:root {
	--tt-gold: #c5a880;
	--tt-gold-light: #e5c99b;
	--tt-gold-bright: #d4af37;
	--tt-gold-dark: #aa8040;
	--tt-gold-gradient: linear-gradient(135deg, #d4af37 0%, #ecd599 30%, #c5a880 70%, #a27b37 100%);
	--tt-gold-glow: 0 8px 25px rgba(212, 175, 55, 0.28);
	--color-brand-500: #c5a880;
	--color-brand-600: #aa8040;
}

.text-brand-500,
.text-brand-600 {
	color: #c5a880 !important;
}

.bg-brand-500 {
	background-color: #c5a880 !important;
	color: #080f1d !important;
}

.bg-brand-600 {
	background-color: #aa8040 !important;
	color: #ffffff !important;
}

.border-brand-500 {
	border-color: #c5a880 !important;
}

.border-brand-600 {
	border-color: #aa8040 !important;
}

/* Header & Wordmark */
.header-accent-bar {
	height: 3px;
	background: var(--tt-gold-gradient);
	width: 100%;
}

.site-wordmark {
	font-family: 'Montserrat', sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #ffffff;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.site-wordmark .gold-tag {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.18em;
	padding: 2px 7px;
	background: var(--tt-gold-gradient);
	color: #080f1d;
	border-radius: 2px;
}

/* Swiper Hero Controls */
.tt-slider-prev,
.tt-slider-next {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: rgba(8, 15, 29, 0.75) !important;
	border: 1px solid rgba(212, 175, 55, 0.5) !important;
	backdrop-filter: blur(8px) !important;
	color: #d4af37 !important;
	transition: all 0.3s ease !important;
}

.tt-slider-prev:after,
.tt-slider-next:after {
	font-size: 18px !important;
	font-weight: bold !important;
}

.tt-slider-prev:hover,
.tt-slider-next:hover {
	background: #d4af37 !important;
	color: #080f1d !important;
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.6) !important;
}

.tt-slider-dots .swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
	background: rgba(255, 255, 255, 0.4) !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
	border: 1px solid transparent !important;
}

.tt-slider-dots .swiper-pagination-bullet-active {
	width: 32px !important;
	border-radius: 6px !important;
	background: #d4af37 !important;
	border-color: #f3e5ab !important;
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.8) !important;
}

/* Unit Card Luxury Hover */
.unit-card {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.unit-card:hover {
	transform: translateY(-4px);
}

.gio-hang-tab-btn.active {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%) !important;
	color: #ffffff !important;
	border: 1px solid #d4af37 !important;
	box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}


/* ==========================================================================
   HUYNH HIEU LAND TYPOGRAPHY SYSTEM (MONTSERRAT + DANCING SCRIPT + PLAY)
   ========================================================================== */
:root {
	--font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	--font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	--font-serif: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	--font-accent: 'Dancing Script', cursive !important;
	--font-play: 'Play', 'Montserrat', sans-serif !important;
}

/* Huynh Hieu Land Typography System: Montserrat + Dancing Script + Play */
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.font-sans, .font-display, .font-serif, .font-main,
.skin-vinhloc, .skin-vinhloc h1, .skin-vinhloc h2, .skin-vinhloc h3, .skin-vinhloc .font-display,
.home-tt, .home-tt .tt-h2, .home-tt .tt-hero__wordmark,
.vl-hero-heading, #hero-title-main, #hero-title-sub,
.site-wordmark, .brand-text, .gold-tag,
.vl-primary-menu, .vl-primary-menu a, .vl-primary-menu li,
.unit-card, .unit-card-title, .unit-card-price, .unit-card-meta,
.footer-title, .footer-vl, .footer-content,
.project-vl, .project-vl h1, .project-vl h2, .project-vl h3,
.project-hero-title, .project-section-title,
.wp-block-button__link, .tt-btn {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Headings H1 */
h1, .h1, .font-display.text-3xl, .font-display.text-4xl, .font-display.text-5xl, .font-display.text-6xl, .font-display.text-7xl {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
}

/* Headings H2 */
h2, .h2, .home-tt .tt-h2 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
}

/* Headings H3-H6 */
h3, .h3, h4, .h4, h5, h6 {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
}

/* Paragraphs & Meta */
p, span, li, dt, dd, td, th {
	font-family: 'Montserrat', sans-serif !important;
}

/* Accent Script (Dancing Script) */
.font-script, .tt-script, .accent-script, .dancing-script {
	font-family: 'Dancing Script', cursive !important;
}

/* Number font Play */
.font-play, .tech-number {
	font-family: 'Play', 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   LUXURY TOP HEADER & NAVIGATION MENU (HO CHI MINH PROPERTY)
   ========================================================================== */

/* 1. Header Khung Cố Định Ở Trên Cùng */
#site-header,
.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99999 !important;
	background: rgba(8, 15, 29, 0.98) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(212, 175, 55, 0.15) !important;
	transition: all 0.3s ease !important;
}

body.admin-bar #site-header {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar #site-header {
		top: 46px !important;
	}
}

.header-accent-bar {
	height: 3px !important;
	width: 100% !important;
	background: linear-gradient(90deg, #aa8040 0%, #d4af37 25%, #fceda2 50%, #d4af37 75%, #aa8040 100%) !important;
	box-shadow: 0 1px 6px rgba(212, 175, 55, 0.6) !important;
}

/* Logo Wordmark HỒ CHÍ MINH PROPERTY */
.site-wordmark {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	color: #ffffff !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}
.site-wordmark .brand-text {
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	letter-spacing: 0.08em !important;
}
.site-wordmark .gold-tag {
	background: linear-gradient(135deg, #d4af37 0%, #fceda2 50%, #aa8040 100%) !important;
	color: #080f1d !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	padding: 2px 7px !important;
	border-radius: 3px !important;
	letter-spacing: 0.15em !important;
	box-shadow: 0 2px 6px rgba(212, 175, 55, 0.4) !important;
}

/* 2. Responsive Breakpoint Desktop vs Mobile */
.desktop-nav {
	display: flex !important;
	align-items: center !important;
	gap: 22px !important;
}
.desktop-hotline {
	display: flex !important;
	align-items: center !important;
}
.mobile-toggle-btn {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px !important;
	background: rgba(212, 175, 55, 0.1) !important;
	border: 1px solid rgba(212, 175, 55, 0.5) !important;
	border-radius: 6px !important;
	color: #d4af37 !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
}
.mobile-toggle-btn:hover {
	background: #d4af37 !important;
	color: #080f1d !important;
}

@media (max-width: 1023px) {
	.desktop-nav {
		display: none !important;
	}
	.desktop-hotline {
		display: none !important;
	}
	.mobile-toggle-btn {
		display: flex !important;
	}
}

/* 3. Desktop Primary Menu - CHỮ NỔI BẬT DỄ NHÌN */
#site-header .vl-primary-menu {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	align-items: center !important;
	gap: 22px !important;
}
#site-header .vl-primary-menu > li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#site-header .vl-primary-menu > li > a {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	padding: 12px 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: relative !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
	transition: all 0.25s ease !important;
}

/* HIỆU ỨNG KHI RÊ CHUỘT (Hover Effects) */
#site-header .vl-primary-menu > li > a:hover,
#site-header .vl-primary-menu > li.current-menu-item > a,
#site-header .vl-primary-menu > li.current-menu-ancestor > a {
	color: #fceda2 !important;
	transform: translateY(-2px) !important;
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.9), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Dải gạch chân phát sáng vàng kim chuyển động đồng bộ 100% cho mọi mục menu kể cả Tin tức */
#site-header .vl-primary-menu > li > a::before {
	content: "" !important;
	position: absolute !important;
	bottom: 0px !important;
	left: 50% !important;
	width: 85% !important;
	height: 2.5px !important;
	background: linear-gradient(90deg, #aa8040, #fceda2, #d4af37) !important;
	border-radius: 2px !important;
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.9), 0 0 4px #d4af37 !important;
	transition: all 0.28s ease !important;
	transform: translateX(-50%) !important;
	opacity: 1 !important;
}
#site-header .vl-primary-menu > li:hover > a::before,
#site-header .vl-primary-menu > li.current-menu-item > a::before,
#site-header .vl-primary-menu > li.current-menu-ancestor > a::before {
	width: 95% !important;
	opacity: 1 !important;
	box-shadow: 0 0 16px rgba(212, 175, 55, 1), 0 0 6px #fceda2 !important;
}

/* Mũi tên chỉ mục dropdown xoay khi hover */
#site-header .vl-primary-menu > li.menu-item-has-children > a::after {
	content: "" !important;
	display: inline-block !important;
	width: 5px !important;
	height: 5px !important;
	border-right: 2px solid #d4af37 !important;
	border-bottom: 2px solid #d4af37 !important;
	transform: rotate(45deg) !important;
	margin-left: 4px !important;
	margin-bottom: 3px !important;
	transition: transform 0.25s ease, border-color 0.25s ease !important;
}
#site-header .vl-primary-menu > li.menu-item-has-children:hover > a::after {
	transform: rotate(-135deg) !important;
	border-color: #fceda2 !important;
}

/* 4. Menu Thả Xuống (Dropdown Sub-menu) */
#site-header .vl-primary-menu .sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: -12px !important;
	min-width: 270px !important;
	background: rgba(8, 15, 29, 0.98) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	border: 1px solid rgba(212, 175, 55, 0.45) !important;
	border-top: 3px solid #d4af37 !important;
	border-radius: 8px !important;
	padding: 8px 0 !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.25) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(12px) !important;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 1000 !important;
	list-style: none !important;
	margin: 0 !important;
	pointer-events: none !important;
}
#site-header .vl-primary-menu li:hover > .sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(2px) !important;
	pointer-events: auto !important;
}
#site-header .vl-primary-menu .sub-menu li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#site-header .vl-primary-menu .sub-menu li a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 11px 22px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	border-left: 3px solid transparent !important;
	background: transparent !important;
	transition: all 0.2s ease !important;
}
#site-header .vl-primary-menu .sub-menu li a:hover,
#site-header .vl-primary-menu .sub-menu li.current-menu-item > a {
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
	color: #fceda2 !important;
	border-left-color: #d4af37 !important;
	padding-left: 28px !important;
}
#site-header .vl-primary-menu .sub-menu .sub-menu {
	top: -8px !important;
	left: 100% !important;
	margin-left: 4px !important;
	min-width: 250px !important;
}

/* 5. Nút Hotline Header */
.header-hotline-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 9px 20px !important;
	border-radius: 9999px !important;
	background: linear-gradient(135deg, #d4af37 0%, #fceda2 50%, #aa8040 100%) !important;
	color: #080f1d !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45) !important;
	transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	position: relative !important;
	overflow: hidden !important;
}
.header-hotline-btn::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: -80% !important;
	width: 50% !important;
	height: 100% !important;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) !important;
	transform: skewX(-20deg) !important;
	transition: left 0.6s ease !important;
}
.header-hotline-btn:hover {
	transform: translateY(-2px) scale(1.03) !important;
	box-shadow: 0 8px 25px rgba(212, 175, 55, 0.65) !important;
	filter: brightness(1.08) !important;
}
.header-hotline-btn:hover::before {
	left: 130% !important;
}

/* ==========================================================================
   6. MENU MOBILE DRAWER & ACCORDION (LUXURY GOLD EDITION)
   ========================================================================== */

/* 6.1. Mobile Menu Overlay */
#mobile-menu-overlay,
.mobile-menu-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(3, 7, 18, 0.82) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 999998 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
#mobile-menu-overlay.is-active,
.mobile-menu-overlay.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* 6.2. Mobile Menu Drawer */
#mobile-menu,
.mobile-menu-drawer {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 320px !important;
	max-width: 86vw !important;
	height: 100% !important;
	background: #080f1d !important;
	background-color: #080f1d !important;
	border-left: 1px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.12) !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	transform: translateX(100%) !important;
	visibility: hidden !important;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
	overflow: hidden !important;
}
#mobile-menu.is-active,
.mobile-menu-drawer.is-active {
	transform: translateX(0) !important;
	visibility: visible !important;
}

/* 6.3. Drawer Header */
.mobile-drawer-header {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 15px 18px !important;
	background: #050a14 !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.mobile-drawer-logo {
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
}
.mobile-drawer-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	background: rgba(212, 175, 55, 0.1) !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	color: #d4af37 !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
}
.mobile-drawer-close:hover,
.mobile-drawer-close:active {
	background: #d4af37 !important;
	color: #080f1d !important;
	transform: rotate(90deg) !important;
}

/* 6.4. Drawer Navigation Scrollable */
.mobile-drawer-nav {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 16px 12px 24px !important;
}
.mobile-drawer-nav::-webkit-scrollbar {
	width: 4px;
}
.mobile-drawer-nav::-webkit-scrollbar-thumb {
	background: rgba(212, 175, 55, 0.35);
	border-radius: 4px;
}

/* 6.5. Mobile Navigation List */
.mobile-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}
.mobile-nav-list li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

.mobile-nav-item-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	border-radius: 6px !important;
	transition: background-color 0.2s ease !important;
}
.mobile-nav-item-wrap:hover {
	background: rgba(212, 175, 55, 0.08) !important;
}
.mobile-nav-list li.current-menu-item > .mobile-nav-item-wrap,
.mobile-nav-list li.current-menu-ancestor > .mobile-nav-item-wrap {
	background: rgba(212, 175, 55, 0.14) !important;
}

.mobile-nav-list > li > .mobile-nav-item-wrap > a,
.mobile-nav-list > li > a {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	text-decoration: none !important;
	padding: 11px 12px !important;
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.mobile-nav-list > li > .mobile-nav-item-wrap > a:hover,
.mobile-nav-list > li.current-menu-item > .mobile-nav-item-wrap > a,
.mobile-nav-list > li.current-menu-ancestor > .mobile-nav-item-wrap > a {
	color: #fceda2 !important;
	padding-left: 16px !important;
}

.mobile-submenu-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	color: rgba(212, 175, 55, 0.85) !important;
	cursor: pointer !important;
	border-radius: 6px !important;
	transition: all 0.25s ease !important;
}
.mobile-submenu-toggle:hover {
	color: #fceda2 !important;
	background: rgba(212, 175, 55, 0.18) !important;
}
.mobile-submenu-toggle svg {
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mobile-nav-list li.menu-item-has-children.is-open > .mobile-nav-item-wrap > .mobile-submenu-toggle svg {
	transform: rotate(180deg) !important;
	color: #fceda2 !important;
}

/* 6.6. Dropdown Accordion Submenus */
.mobile-nav-list .sub-menu {
	list-style: none !important;
	margin: 2px 0 6px 12px !important;
	padding: 4px 0 4px 10px !important;
	border-left: 2px solid rgba(212, 175, 55, 0.35) !important;
	display: none !important;
	flex-direction: column !important;
	gap: 2px !important;
}
.mobile-nav-list li.menu-item-has-children.is-open > .sub-menu {
	display: flex !important;
	animation: mobileNavFade 0.22s ease forwards !important;
}
@keyframes mobileNavFade {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-list .sub-menu li a {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	text-transform: none !important;
	padding: 8px 10px !important;
	display: flex !important;
	align-items: center !important;
	border-radius: 6px !important;
	transition: all 0.2s ease !important;
}
.mobile-nav-list .sub-menu li a:hover,
.mobile-nav-list .sub-menu li.current-menu-item > a {
	color: #fceda2 !important;
	background: rgba(212, 175, 55, 0.12) !important;
	padding-left: 14px !important;
}

.mobile-nav-list .sub-menu .sub-menu {
	margin: 2px 0 4px 8px !important;
	padding-left: 8px !important;
	border-left: 1.5px dashed rgba(212, 175, 55, 0.4) !important;
}
.mobile-nav-list .sub-menu .sub-menu li a {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.75) !important;
	padding: 6px 8px !important;
}

/* 6.7. Drawer Footer */
.mobile-drawer-footer {
	flex-shrink: 0 !important;
	padding: 15px 16px !important;
	background: #050a14 !important;
	border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
}
.mobile-drawer-hotline {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	padding: 12px 16px !important;
	background: linear-gradient(135deg, #c59b27 0%, #dfba52 50%, #b38719 100%) !important;
	color: #080f1d !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35) !important;
	transition: all 0.25s ease !important;
}
.mobile-drawer-hotline:hover {
	filter: brightness(1.1) !important;
	transform: translateY(-1px) !important;
}
.mobile-drawer-copyright {
	margin: 8px 0 0 0 !important;
	text-align: center !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	color: rgba(255, 255, 255, 0.45) !important;
	text-transform: uppercase !important;
}

/* Nested Sub-menus Bridge and Caret */
#site-header .vl-primary-menu .sub-menu li.menu-item-has-children {
	position: relative !important;
}
#site-header .vl-primary-menu .sub-menu li.menu-item-has-children > a::after {
	content: "" !important;
	display: inline-block !important;
	width: 5px !important;
	height: 5px !important;
	border-right: 2px solid #d4af37 !important;
	border-top: 2px solid #d4af37 !important;
	transform: rotate(45deg) !important;
	margin-left: auto !important;
	transition: transform 0.2s ease, border-color 0.2s ease !important;
}
#site-header .vl-primary-menu .sub-menu li.menu-item-has-children:hover > a::after {
	transform: rotate(45deg) scale(1.2) !important;
	border-color: #fceda2 !important;
}
#site-header .vl-primary-menu .sub-menu .sub-menu::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: -20px !important;
	width: 20px !important;
	height: 100% !important;
	background: transparent !important;
}

/* ==========================================================================
   LUXURY FOOTER - HUYNH HIEU LAND / HO CHI MINH PROPERTY REPLICA
   ========================================================================== */

.site-footer {
	position: relative !important;
	width: 100% !important;
	font-family: 'Montserrat', sans-serif !important;
	color: #ffffff !important;
	overflow: hidden !important;
	background-color: #070d18 !important;
	clear: both !important;
}

/* 1. THANH LIÊN HỆ TƯ VẤN (TOP BAR VỚI VÂN NỀN TỐI) */
.footer-consult-bar {
	position: relative !important;
	z-index: 10 !important;
	background: #111622 !important;
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 2px, transparent 2px, transparent 6px) !important;
	border-top: 1px solid rgba(212, 175, 55, 0.5) !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
	padding: 24px 20px 20px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.footer-consult-inner {
	max-width: 1240px !important;
	margin: 0 auto !important;
}

.footer-consult-title {
	font-family: 'Montserrat', sans-serif !important;
	color: #d4af37 !important;
	font-size: 16.5px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin: 0 0 14px 0 !important;
}

/* Form 1 hàng ngang chuẩn xác tuyệt đối bằng CSS Grid */
.footer-consult-form {
	display: grid !important;
	grid-template-columns: 210px 210px 1fr 150px !important;
	gap: 14px !important;
	align-items: center !important;
	width: 100% !important;
}

.footer-form-input {
	width: 100% !important;
	height: 44px !important;
	padding: 0 16px !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
	box-sizing: border-box !important;
}

.footer-form-input::placeholder {
	color: #94a3b8 !important;
	font-weight: 400 !important;
}

.footer-form-input:focus {
	outline: none !important;
	border-color: #d4af37 !important;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35) !important;
}

/* NÚT GỬI ĐI VÀNG KIM - GHI ĐÈ TUYỆT ĐỐI MỌI RULE KHÁC */
button.footer-form-btn,
button[type="submit"].footer-form-btn,
form .footer-form-btn,
.footer-form-btn {
	width: 100% !important;
	height: 44px !important;
	padding: 0 20px !important;
	border-radius: 8px !important;
	background: #b28728 !important;
	background: linear-gradient(135deg, #c59733 0%, #b28728 50%, #9a721b 100%) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px rgba(178, 135, 40, 0.5) !important;
	transition: all 0.25s ease !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

button.footer-form-btn:hover,
button[type="submit"].footer-form-btn:hover,
.footer-form-btn:hover {
	background: #c59733 !important;
	filter: brightness(1.15) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 22px rgba(178, 135, 40, 0.7) !important;
}

button.footer-form-btn:active,
.footer-form-btn:active {
	transform: translateY(1px) !important;
}

.footer-consult-subtext {
	margin-top: 13px !important;
	font-size: 13px !important;
	color: #cbd5e1 !important;
	font-weight: 500 !important;
}

.footer-consult-subtext a {
	color: #d4af37 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.footer-consult-subtext a:hover {
	text-decoration: underline !important;
}

@media (max-width: 900px) {
	.footer-consult-form {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
}

/* 2. KHỐI CHÍNH NỀN HOÀNG HÔN SÀI GÒN */
.footer-main-body {
	position: relative !important;
	padding: 65px 20px !important;
	background-size: cover !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
	background-color: #080e1a !important;
}

.footer-main-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(8, 13, 23, 0.76) 0%, rgba(8, 13, 23, 0.88) 100%) !important;
	z-index: 1 !important;
}

.footer-main-container {
	position: relative !important;
	z-index: 2 !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	display: grid !important;
	grid-template-columns: 440px 1.15fr 1fr !important;
	gap: 45px !important;
	align-items: start !important;
}

@media (max-width: 1100px) {
	.footer-main-container {
		grid-template-columns: 1fr 1fr !important;
		gap: 36px !important;
	}
	.footer-card-col {
		grid-column: span 2 !important;
	}
}

@media (max-width: 768px) {
	.footer-main-container {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
	}
	.footer-card-col {
		grid-column: span 1 !important;
	}
}

/* THẺ DOANH NGHIỆP BÊN TRÁI (LEFT CARD) */
.footer-company-card {
	background: rgba(8, 13, 24, 0.90) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-radius: 16px !important;
	padding: 32px 28px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 175, 55, 0.12) !important;
	position: relative !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.footer-card-accent-line {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: linear-gradient(90deg, transparent, #d4af37, #fceda2, #d4af37, transparent) !important;
}

/* Logo xếp dọc chuẩn hình */
.footer-card-logo {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin-bottom: 16px !important;
}

.footer-card-brand-title {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	color: #d4af37 !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.footer-company-legal-name {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin: 0 0 16px 0 !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
	line-height: 1.4 !important;
}

.footer-info-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.footer-info-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 11px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: #e2e8f0 !important;
}

.footer-info-item strong {
	color: #ffffff !important;
	font-weight: 700 !important;
}

.footer-info-item svg {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
	color: #d4af37 !important;
}

.footer-info-item a {
	color: #e2e8f0 !important;
	text-decoration: none !important;
	transition: color 0.2s !important;
}

.footer-info-item a:hover {
	color: #fceda2 !important;
	text-decoration: underline !important;
}

.footer-social-row {
	margin-top: 22px !important;
	padding-top: 18px !important;
	border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.footer-social-icon {
	display: inline-block !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	transition: transform 0.2s ease, filter 0.2s ease !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}

.footer-social-icon:hover {
	transform: translateY(-2px) scale(1.08) !important;
	filter: brightness(1.1) !important;
}

.footer-social-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* CỘT 2 & 3 */
.footer-section-title {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	margin: 0 0 20px 0 !important;
	line-height: 1.3 !important;
}

.footer-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 11px !important;
}

.footer-nav-item a {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13.5px !important;
	color: #e2e8f0 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	line-height: 1.4 !important;
}

.footer-nav-item a:hover {
	color: #fceda2 !important;
	transform: translateX(4px) !important;
}

.footer-nav-item svg {
	width: 13px !important;
	height: 13px !important;
	flex-shrink: 0 !important;
	color: #d4af37 !important;
}

/* DẢI BẢN QUYỀN */
.footer-copyright-bar {
	background: #040710 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 16px 20px !important;
	font-size: 12px !important;
	color: #94a3b8 !important;
}

.footer-copyright-inner {
	max-width: 1240px !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

.footer-copyright-inner strong {
	color: #d4af37 !important;
}

.footer-copyright-inner a {
	color: #d4af37 !important;
	text-decoration: none !important;
}

.footer-copyright-inner a:hover {
	text-decoration: underline !important;
}


/* ==========================================================================
   CHARMORA-STYLE LUXURY PROJECT TEMPLATE - GOLD & NAVY THEME
   HỒ CHÍ MINH PROPERTY REPLICA
   ========================================================================== */

.clp {
	font-family: 'Montserrat', sans-serif !important;
	color: #e2e8f0 !important;
	--g: #b28728;
	--g2: #9a721b;
	--gold: #d4af37;
	--gold-light: #fceda2;
	--ink: #ffffff;
	--mut: #94a3b8;
	--bg: #080f1d;
	--bg-alt: #0b1329;
	--card-bg: #0c1427;
	--border: rgba(212, 175, 55, 0.28);
	line-height: 1.65;
	background-color: #080f1d !important;
	width: 100% !important;
	overflow-x: clip !important;
}

.clp * {
	box-sizing: border-box !important;
}

.clp .wrap {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

.clp .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: #d4af37 !important;
	margin-bottom: 12px !important;
}

.clp h2.sec {
	font-size: clamp(24px, 3.5vw, 38px) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: -0.01em !important;
}

.clp h2.sec span.gold-text {
	color: #d4af37 !important;
	background: linear-gradient(135deg, #ffe082 0%, #d4af37 50%, #aa8040 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.clp .lead {
	color: #cbd5e1 !important;
	font-size: clamp(14.5px, 1.6vw, 16.5px) !important;
	max-width: 820px !important;
	line-height: 1.65 !important;
}

/* BUTTONS */
.clp .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	border: 0 !important;
	cursor: pointer !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	letter-spacing: 0.04em !important;
	padding: 14px 28px !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	white-space: nowrap !important;
}

.clp .btn-g {
	background: #b28728 !important;
	background: linear-gradient(135deg, #c59733 0%, #b28728 50%, #9a721b 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 25px rgba(178, 135, 40, 0.45) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.clp .btn-g:hover {
	filter: brightness(1.15) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 14px 30px rgba(178, 135, 40, 0.65) !important;
	color: #ffffff !important;
}

.clp .btn-gold {
	background: #d4af37 !important;
	color: #080f1d !important;
	font-weight: 800 !important;
}

.clp .btn-out {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
	border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

.clp .btn-out:hover {
	background: rgba(212, 175, 55, 0.15) !important;
	border-color: #d4af37 !important;
	color: #fceda2 !important;
	transform: translateY(-2px) !important;
}

/* HERO */
.clp .hero {
	position: relative !important;
	min-height: clamp(560px, 86vh, 840px) !important;
	display: flex !important;
	align-items: flex-end !important;
	color: #ffffff !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: #080f1d !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.clp .hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(180deg, rgba(8, 15, 29, 0.35) 0%, rgba(8, 15, 29, 0.65) 45%, rgba(8, 15, 29, 0.96) 100%) !important;
	z-index: 1 !important;
}

.clp .hero-in {
	position: relative !important;
	z-index: 2 !important;
	padding: 0 20px 60px !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.clp .hero h1,
.clp .hero .tag,
.clp .hero .subtag {
	color: #ffffff !important;
}

.clp .hero h1 {
	font-size: clamp(34px, 6.5vw, 68px) !important;
	font-weight: 900 !important;
	letter-spacing: -0.02em !important;
	margin: 6px 0 12px 0 !important;
	line-height: 1.05 !important;
	text-transform: uppercase !important;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7) !important;
}

.clp .hero .tag {
	font-size: clamp(16px, 2.2vw, 22px) !important;
	font-weight: 700 !important;
	color: #d4af37 !important;
	margin: 0 0 6px 0 !important;
	letter-spacing: 0.05em !important;
}

.clp .hero .subtag {
	font-size: 15px !important;
	color: #cbd5e1 !important;
	opacity: 0.95 !important;
	margin: 0 0 26px 0 !important;
	letter-spacing: 0.03em !important;
	max-width: 860px !important;
}

.clp .hero .cta-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	align-items: center !important;
}

.clp .hero .hot {
	margin-left: 8px !important;
	font-size: 13.5px !important;
	color: #cbd5e1 !important;
	display: inline-flex !important;
	flex-direction: column !important;
}

.clp .hero .hot b {
	font-size: 19px !important;
	letter-spacing: 0.03em !important;
	color: #d4af37 !important;
}

.clp .hero .hot a {
	color: #d4af37 !important;
	text-decoration: none !important;
}

/* STICKY SECTION NAV */
.clp-nav {
	position: sticky !important;
	top: 70px !important;
	z-index: 900 !important;
	background: rgba(8, 15, 29, 0.96) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.clp-nav .in {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 12px !important;
	display: flex !important;
	gap: 4px !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
}

.clp-nav .in::-webkit-scrollbar {
	display: none !important;
}

.clp-nav a {
	flex: 0 0 auto !important;
	padding: 15px 14px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #94a3b8 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	border-bottom: 3px solid transparent !important;
	transition: all 0.2s ease !important;
}

.clp-nav a:hover {
	color: #d4af37 !important;
}

.clp-nav a.act {
	color: #fceda2 !important;
	border-bottom-color: #d4af37 !important;
}

.clp .blk,
.clp .stats,
.clp .units {
	scroll-margin-top: 135px !important;
}

@media(max-width: 940px) {
	.clp-nav a {
		padding: 12px 10px !important;
		font-size: 12px !important;
	}
	.clp .blk,
	.clp .stats,
	.clp .units {
		scroll-margin-top: 120px !important;
	}
}

/* STAT BAR */
.clp .stats {
	background: #0b1329 !important;
	color: #ffffff !important;
	border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.35) !important;
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.clp .stats .grid {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 0 !important;
	text-align: center !important;
}

.clp .stats .st {
	padding: 24px 12px !important;
	border-right: 1px solid rgba(212, 175, 55, 0.18) !important;
}

.clp .stats .st:last-child {
	border-right: 0 !important;
}

.clp .stats .n {
	font-size: clamp(20px, 2.5vw, 30px) !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	line-height: 1.1 !important;
}

.clp .stats .l {
	font-size: 12px !important;
	color: #cbd5e1 !important;
	opacity: 0.9 !important;
	margin-top: 6px !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
}

/* SECTION BASE */
.clp section.blk {
	padding: clamp(52px, 6.5vw, 84px) 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.clp .two {
	display: grid !important;
	grid-template-columns: 1.05fr 1fr !important;
	gap: clamp(28px, 5vw, 55px) !important;
	align-items: center !important;
}

.clp .two.rev .txt {
	order: 2 !important;
}

.clp .ph {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65) !important;
	border: 1px solid rgba(212, 175, 55, 0.3) !important;
	aspect-ratio: 4/3 !important;
	position: relative !important;
	background: #0b1329 !important;
}

.clp .ph img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
}

.clp ul.ticks {
	list-style: none !important;
	margin: 18px 0 24px !important;
	padding: 0 !important;
}

.clp ul.ticks li {
	position: relative !important;
	padding: 10px 0 10px 34px !important;
	border-bottom: 1px dashed rgba(212, 175, 55, 0.2) !important;
	color: #e2e8f0 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
}

.clp ul.ticks li:before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 13px !important;
	width: 19px !important;
	height: 19px !important;
	border-radius: 50% !important;
	background: #b28728 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
	background-size: 12px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* UNIT CARDS / GIỎ HÀNG */
.clp .units {
	background: #0b1329 !important;
}

.clp .ucards {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	margin-top: 36px !important;
}

.clp .uc {
	background: #080f1d !important;
	border-radius: 16px !important;
	padding: 24px 20px !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
	border: 1px solid rgba(212, 175, 55, 0.28) !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
	transition: all 0.25s ease !important;
	position: relative !important;
}

.clp .uc:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 25px 50px rgba(212, 175, 55, 0.2) !important;
	border-color: #d4af37 !important;
}

.clp .uc .cnt {
	display: inline-block !important;
	align-self: center !important;
	background: rgba(212, 175, 55, 0.15) !important;
	color: #d4af37 !important;
	font-weight: 800 !important;
	font-size: 12px !important;
	letter-spacing: 0.06em !important;
	padding: 5px 14px !important;
	border-radius: 999px !important;
	margin-bottom: 12px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
}

.clp .uc .ut {
	font-size: 21px !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 4px 0 !important;
}

.clp .uc .ar {
	font-size: 15px !important;
	color: #fceda2 !important;
	font-weight: 700 !important;
	margin-bottom: 14px !important;
}

.clp .uc .feat {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 20px 0 !important;
	font-size: 13.5px !important;
	color: #cbd5e1 !important;
	flex: 1 1 auto !important;
}

.clp .uc .feat li {
	padding: 6px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.clp .uc .btn {
	align-self: stretch !important;
	justify-content: center !important;
	padding: 12px 16px !important;
	font-size: 13.5px !important;
}

/* REAL INVENTORY TABS */
.clp .inv-tabs {
	display: inline-flex !important;
	padding: 6px !important;
	border-radius: 12px !important;
	background: #080f1d !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	margin-top: 24px !important;
}

.clp .inv-tab-btn {
	padding: 10px 22px !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #94a3b8 !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.clp .inv-tab-btn.active {
	background: #111a33 !important;
	color: #fceda2 !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.clp .inv-filters {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.clp .inv-filter-btn {
	padding: 6px 16px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #cbd5e1 !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.clp .inv-filter-btn:hover {
	border-color: #d4af37 !important;
	color: #ffffff !important;
}

.clp .inv-filter-btn.active {
	background: #d4af37 !important;
	color: #080f1d !important;
	border-color: #d4af37 !important;
}

/* REAL UNIT CARDS (FULL INVENTORY) */
.clp .inv-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin-top: 32px !important;
}

.clp .inv-card {
	background: #080f1d !important;
	border: 1px solid rgba(212, 175, 55, 0.28) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
	transition: all 0.3s ease !important;
	display: flex !important;
	flex-direction: column !important;
}

.clp .inv-card:hover {
	transform: translateY(-4px) !important;
	border-color: #d4af37 !important;
	box-shadow: 0 20px 45px rgba(212, 175, 55, 0.22) !important;
}

.clp .inv-card .card-thumb {
	position: relative !important;
	aspect-ratio: 16/10 !important;
	overflow: hidden !important;
	background: #0b1329 !important;
}

.clp .inv-card .card-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.45s ease !important;
}

.clp .inv-card:hover .card-thumb img {
	transform: scale(1.06) !important;
}

.clp .inv-card .card-body {
	padding: 20px !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
}

/* PHAN KHU / SUBDIVISION CARDS */
.clp .islands {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin-top: 36px !important;
}

.clp .isl {
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #0b1329 !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	transition: all 0.3s ease !important;
}

.clp .isl:hover {
	border-color: #d4af37 !important;
	transform: translateY(-4px) !important;
}

.clp .isl .im {
	aspect-ratio: 16/11 !important;
	overflow: hidden !important;
	position: relative !important;
}

.clp .isl .im img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform 0.4s ease !important;
}

.clp .isl:hover .im img {
	transform: scale(1.06) !important;
}

.clp .isl .bd {
	padding: 22px !important;
}

.clp .isl .bd h3 {
	margin: 0 0 8px 0 !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
}

.clp .isl .bd p {
	margin: 0 !important;
	font-size: 14px !important;
	color: #cbd5e1 !important;
	line-height: 1.55 !important;
}

.clp .isl .bd .st {
	display: inline-block !important;
	margin-top: 14px !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #fceda2 !important;
}

/* TIEN ICH LUXURY */
.clp .amen {
	background: linear-gradient(160deg, #080f1d 0%, #0b1428 100%) !important;
	color: #ffffff !important;
}

.clp .chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 26px !important;
}

.clp .chip {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #ffffff !important;
}

.clp .chip b {
	color: #d4af37 !important;
}

/* AMENITY & FLOOR PLAN GALLERY */
.clp .agal {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 14px !important;
	margin-top: 32px !important;
}

.clp .agal .g {
	position: relative !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	aspect-ratio: 4/3 !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	cursor: pointer !important;
	margin: 0 !important;
}

.clp .agal .g img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.45s ease !important;
}

.clp .agal .g:hover img {
	transform: scale(1.08) !important;
}

.clp .agal .g figcaption {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 24px 14px 10px !important;
	background: linear-gradient(transparent, rgba(8, 15, 29, 0.95)) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	z-index: 2 !important;
}

.clp .agal .g.wide {
	grid-column: span 2 !important;
	aspect-ratio: 8/3 !important;
}

/* DESIGN & INTERIOR GRID */
.clp .dsg {
	background: #080f1d !important;
}

.clp .dgrid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 14px !important;
	margin-top: 32px !important;
}

.clp .dgrid .d {
	position: relative !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	aspect-ratio: 1/1 !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	cursor: pointer !important;
	background: #0b1329 !important;
}

.clp .dgrid .d img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.45s ease !important;
}

.clp .dgrid .d:hover img {
	transform: scale(1.08) !important;
}

.clp .dgrid .d.big {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
	aspect-ratio: auto !important;
}

.clp .dnote {
	margin-top: 24px !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}

.clp .dnote .n {
	background: #0b1329 !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	border-left: 3px solid #d4af37 !important;
	border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
	border-right: 1px solid rgba(212, 175, 55, 0.2) !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.clp .dnote .n b {
	display: block !important;
	color: #d4af37 !important;
	font-size: 14.5px !important;
	margin-bottom: 4px !important;
}

.clp .dnote .n span {
	font-size: 13.5px !important;
	color: #cbd5e1 !important;
}

/* SPEC TABLE */
.clp .spec {
	background: #080f1d !important;
}

.clp .spectab {
	margin-top: 30px !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
	border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

.clp .spectab .row {
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
	background: #080f1d !important;
}

.clp .spectab .row:last-child {
	border-bottom: 0 !important;
}

.clp .spectab .row:nth-child(odd) {
	background: #0b1329 !important;
}

.clp .spectab .k {
	padding: 14px 22px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	font-size: 14px !important;
	background: rgba(212, 175, 55, 0.08) !important;
	border-right: 1px solid rgba(212, 175, 55, 0.15) !important;
}

.clp .spectab .v {
	padding: 14px 22px !important;
	color: #e2e8f0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* POLICY */
.clp .pol {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	margin-top: 36px !important;
}

.clp .pc {
	background: #0b1329 !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	border-left: 4px solid #b28728 !important;
	border-radius: 12px !important;
	padding: 24px 22px !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.clp .pc.hl {
	border-left-color: #d4af37 !important;
	background: linear-gradient(180deg, #111a33 0%, #0b1329 100%) !important;
}

.clp .pc h3 {
	margin: 0 0 12px 0 !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.clp .pc ul {
	margin: 0 !important;
	padding-left: 18px !important;
	color: #cbd5e1 !important;
	font-size: 14px !important;
}

.clp .pc ul li {
	margin: 8px 0 !important;
	line-height: 1.5 !important;
}

/* REGISTRATION FORM */
.clp .reg {
	background: #080f1d !important;
}

.clp .regbox {
	max-width: 980px !important;
	margin: 0 auto !important;
	background: #0b1329 !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	border-radius: 20px !important;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75) !important;
	overflow: hidden !important;
	display: grid !important;
	grid-template-columns: 0.95fr 1.05fr !important;
}

.clp .regbox .side {
	background: linear-gradient(160deg, #121c38 0%, #080f1d 100%) !important;
	border-right: 1px solid rgba(212, 175, 55, 0.25) !important;
	color: #ffffff !important;
	padding: 40px 32px !important;
}

.clp .regbox .side h3 {
	margin: 0 0 14px 0 !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	color: #d4af37 !important;
	line-height: 1.25 !important;
}

.clp .regbox .side p {
	color: #cbd5e1 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 0 0 24px 0 !important;
}

.clp .regbox .side .ph2 {
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
	color: #d4af37 !important;
}

.clp .regbox .side .ph2 span {
	display: block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	opacity: 0.8 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 2px !important;
	color: #cbd5e1 !important;
}

.clp .regbox form {
	background: #080f1d !important;
	padding: 36px 32px !important;
}

.clp .regbox .fld {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	margin-bottom: 14px !important;
	font-family: 'Montserrat', sans-serif !important;
	color: #ffffff !important;
	background: #0b1329 !important;
	transition: all 0.2s ease !important;
}

.clp .regbox .fld::placeholder {
	color: #94a3b8 !important;
}

.clp .regbox .fld:focus {
	outline: none !important;
	border-color: #d4af37 !important;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25) !important;
}

.clp .regbox textarea.fld {
	resize: vertical !important;
	min-height: 85px !important;
}

.clp .regbox .btn {
	width: 100% !important;
	justify-content: center !important;
}

.clp #clp-msg {
	display: none !important;
	margin-bottom: 14px !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* FAQ */
.clp .faq details {
	background: #0b1329 !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	border-radius: 12px !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
	transition: border-color 0.2s ease !important;
}

.clp .faq details[open] {
	border-color: #d4af37 !important;
}

.clp .faq summary {
	list-style: none !important;
	cursor: pointer !important;
	padding: 18px 22px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	font-size: 15.5px !important;
	display: flex !important;
	justify-content: space-between !important;
	gap: 16px !important;
	align-items: center !important;
	line-height: 1.4 !important;
}

.clp .faq summary::-webkit-details-marker {
	display: none !important;
}

.clp .faq summary:after {
	content: "+" !important;
	color: #d4af37 !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}

.clp .faq details[open] summary:after {
	content: "\2212" !important;
}

.clp .faq .ans {
	padding: 0 22px 20px !important;
	color: #cbd5e1 !important;
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	margin-top: 4px !important;
	padding-top: 14px !important;
}

/* FLOAT QUICK CONTACT */
.clp-float {
	position: fixed !important;
	left: 18px !important;
	bottom: 22px !important;
	z-index: 9990 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.clp-float a {
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6) !important;
	text-decoration: none !important;
	transition: transform 0.2s ease !important;
}

.clp-float a:hover {
	transform: scale(1.08) !important;
}

.clp-float .call {
	background: linear-gradient(135deg, #c59733 0%, #b28728 50%, #9a721b 100%) !important;
	animation: clpring 1.6s infinite !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.clp-float .zalo {
	background: #0068ff !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

@keyframes clpring {
	0%, 100% {
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(212, 175, 55, 0.6);
	}
	50% {
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 0 12px rgba(212, 175, 55, 0);
	}
}

/* LIGHTBOX */
.clp-lb {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(4, 8, 16, 0.96) !important;
	z-index: 2147483600 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 24px !important;
}

.clp-lb.on {
	display: flex !important;
}

.clp-lb img {
	max-width: 92vw !important;
	max-height: 88vh !important;
	border-radius: 10px !important;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.9) !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

.clp-lb .x {
	position: absolute !important;
	top: 18px !important;
	right: 22px !important;
	color: #d4af37 !important;
	font-size: 40px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	background: none !important;
	border: 0 !important;
	transition: transform 0.2s !important;
}

.clp-lb .x:hover {
	transform: scale(1.15) !important;
	color: #ffffff !important;
}

.clp-lb .nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #d4af37 !important;
	font-size: 48px !important;
	cursor: pointer !important;
	background: none !important;
	border: 0 !important;
	padding: 10px 18px !important;
	opacity: 0.8 !important;
	transition: all 0.2s !important;
}

.clp-lb .nav:hover {
	opacity: 1 !important;
	color: #ffffff !important;
}

.clp-lb .prev {
	left: 8px !important;
}

.clp-lb .next {
	right: 8px !important;
}

/* RESPONSIVE MEDIA QUERIES */
@media(max-width: 1050px) {
	.clp .inv-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media(max-width: 940px) {
	.clp .two,
	.clp .regbox {
		grid-template-columns: 1fr !important;
	}
	.clp .two.rev .txt {
		order: 0 !important;
	}
	.clp .ucards {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.clp .islands {
		grid-template-columns: 1fr !important;
	}
	.clp .pol {
		grid-template-columns: 1fr !important;
	}
	.clp .stats .grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.clp .stats .st:nth-child(3) {
		border-right: 0 !important;
	}
	.clp .spectab .row {
		grid-template-columns: 160px 1fr !important;
	}
	.clp .agal,
	.clp .dgrid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.clp .agal .g.wide {
		grid-column: span 2 !important;
	}
	.clp .dgrid .d.big {
		grid-column: span 2 !important;
		grid-row: auto !important;
		aspect-ratio: 4/3 !important;
	}
	.clp .dnote {
		grid-template-columns: 1fr !important;
	}
}

@media(max-width: 700px) {
	.clp .hero {
		min-height: auto !important;
		padding-top: 140px !important;
	}
	.clp .hero-in {
		padding: 0 18px 40px !important;
	}
	.clp .hero h1 {
		font-size: clamp(30px, 9vw, 44px) !important;
		margin: 4px 0 8px 0 !important;
	}
	.clp .hero .tag {
		font-size: 15px !important;
		margin-bottom: 4px !important;
	}
	.clp .hero .subtag {
		font-size: 13.5px !important;
		line-height: 1.55 !important;
		margin-bottom: 20px !important;
	}
	.clp .hero .cta-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.clp .hero .btn {
		justify-content: center !important;
		width: 100% !important;
		padding: 13px 18px !important;
	}
	.clp .hero .hot {
		margin: 6px 0 0 0 !important;
		align-items: center !important;
	}
	.clp section.blk {
		padding: 44px 0 !important;
	}
	.clp .wrap {
		padding: 0 16px !important;
	}
	.clp h2.sec {
		font-size: clamp(22px, 6vw, 28px) !important;
	}
	.clp .lead {
		font-size: 14px !important;
	}
	.clp .stats .grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.clp .stats .st {
		padding: 16px 10px !important;
		border-right: 1px solid rgba(212, 175, 55, 0.18) !important;
		border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
	}
	.clp .stats .st:nth-child(2n) {
		border-right: 0 !important;
	}
	.clp .stats .st:last-child {
		grid-column: 1 / -1 !important;
		border-bottom: 0 !important;
		border-right: 0 !important;
	}
	.clp .ucards {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.clp .inv-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.clp .agal,
	.clp .dgrid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.clp .agal .g.wide,
	.clp .dgrid .d.big {
		grid-column: 1 / -1 !important;
		aspect-ratio: 16/10 !important;
	}
	.clp .spectab .row {
		grid-template-columns: 1fr !important;
	}
	.clp .spectab .k {
		padding: 10px 16px 4px !important;
		background: rgba(212, 175, 55, 0.12) !important;
	}
	.clp .spectab .v {
		padding: 6px 16px 12px !important;
	}
	.clp .regbox .side {
		padding: 26px 20px !important;
	}
	.clp .regbox form {
		padding: 24px 20px !important;
	}
	.clp-float {
		left: 12px !important;
		bottom: calc(12px + env(safe-area-inset-bottom)) !important;
		gap: 8px !important;
	}
	.clp-float a {
		width: 46px !important;
		height: 46px !important;
	}
}

@media(max-width: 440px) {
	.clp .agal,
	.clp .dgrid {
		grid-template-columns: 1fr !important;
	}
}

.footer-card-logo { padding-bottom: 14px !important; border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important; margin-bottom: 18px !important; }