/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* ═══════════════════════════════════════════════════════════════
   QUY CHUẨN MÀU SẮC DỰ ÁN — TRƯƠNG HÁN SIÊU COMPLEX
   Navy (nền chính) + Gold (nhấn) + White alpha (text)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Navy Scale */
    --ths-n0: #060C1A;
    --ths-n1: #0A1528;
    --ths-n2: #0F1E3A;
    --ths-n3: #162548;
    --ths-n4: #1E3260;
    --ths-n5: #2A4278;

    /* Gold Scale */
    --ths-g0: #F5DC60;
    --ths-g1: #F0B400;
    --ths-g2: #DC9000;
    --ths-g3: #C87800;
    --ths-g4: #A05800;
    --ths-g5: #7A3C00;

    /* White Alpha */
    --ths-w0: #FFFFFF;
    --ths-w1: rgba(255, 255, 255, 0.85);
    --ths-w2: rgba(255, 255, 255, 0.55);
    --ths-w3: rgba(255, 255, 255, 0.28);
    --ths-w4: rgba(255, 255, 255, 0.10);
    --ths-w5: rgba(255, 255, 255, 0.05);

    /* Gold Alpha */
    --ths-gl: rgba(240, 180, 0, 0.18);
    --ths-gb: rgba(240, 180, 0, 0.08);

    /* Typography */
    --ths-font-serif: 'Cormorant Garamond', Georgia, serif;
    --ths-font-sans:  'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;

    /* Light Content Palette — cho các section nền sáng (Showcase→Amenities)
       Nav/Hero/Lifestyle/CTA/Footer vẫn dùng --ths-n* tối để logo nổi bật */
    --lt-bg0:   #FDFAF4;                    /* warm white — nền sáng nhất */
    --lt-bg1:   #F5EDD8;                    /* cream nhạt */
    --lt-bg2:   #EBE0C4;                    /* cream đậm / hover */
    --lt-border: rgba(160,120,40,0.20);     /* viền gold mờ */
    --lt-text0: #1A1208;                    /* chữ đậm gần đen ấm */
    --lt-text1: #3D2E14;                    /* chữ chính */
    --lt-text2: #6B5535;                    /* chữ phụ */
    --lt-text3: #9A7D50;                    /* chữ mờ / label */
    --lt-gold:  #B8880A;                    /* gold tối — đọc được trên nền sáng (contrast ≥4.5:1) */
    --lt-gold2: #A07208;                    /* gold đậm hơn cho hover */
    --lt-gold-bg: rgba(184,136,10,0.10);    /* nền gold nhạt — highlight/hover */
    --lt-sep:   rgba(160,120,40,0.15);      /* viền ngăn cách */
}

/* ═══════════════════════════════════════════════════════════════
   FONT CHỮ HỆ THỐNG — đồng nhất font + cỡ chữ toàn frontend
   (trang chủ + mọi trang con). Không đụng Admin panel.
   Cormorant Garamond = heading, Be Vietnam Pro = phần còn lại.
   ═══════════════════════════════════════════════════════════════ */

body {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    line-height: 1.75;
}

/* Heading mặc định của theme gốc (Bootstrap) nặng 700px Helvetica —
   đồng nhất sang serif + thang cỡ chữ rõ ràng cho vùng nội dung trang con.
   Trang chủ không bị ảnh hưởng vì mọi heading .lp-* đã tự set font riêng
   (selector cụ thể hơn nên luôn thắng quy tắc chung này). */
#body h1, #body h2, #body h3, #body h4, #body h5, #body h6 {
    font-family: var(--ths-font-serif);
    font-weight: 600;
    line-height: 1.25;
}
#body h1 { font-size: 38px; }
#body h2 { font-size: 30px; }
#body h3 { font-size: 24px; }
#body h4 { font-size: 20px; }
#body h5 { font-size: 17px; }
#body h6 { font-size: 15px; }

#body .bodytext,
#body .bodytext p,
#body .bodytext li {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    line-height: 1.8;
}

@media (max-width: 767px) {
    #body h1 { font-size: 28px; }
    #body h2 { font-size: 23px; }
    #body h3 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION TEXT — eyebrow / tiêu đề / đoạn mô tả dùng chung
   nhiều section (khớp chính xác .eyebrow/.s-title/.s-body gốc ths-v3.html)
   ═══════════════════════════════════════════════════════════════ */

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ths-g2);
    margin-bottom: 18px;
}

.lp-eyebrow::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 1px;
    background: var(--ths-g3);
}

.lp-section-title {
    font-family: var(--ths-font-serif);
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    color: var(--ths-w0);
}

.lp-section-title em {
    font-style: italic;
    color: var(--ths-g1);
}

.lp-section-body {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ths-w2);
    max-width: 540px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — FIXED NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════ */

#lp-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    /* Nền đặc cố định — không xuyên thấu vào nội dung phía sau, đảm bảo
       màu nav giống hệt nhau trên mọi trang (trang chủ lẫn trang con) */
    background: var(--ths-n0);
    border-bottom: 1px solid var(--ths-w4);
    /* Không co height nữa — fixed-height co lại từng lộ ra 1 dải nội dung
       phía sau (vd nền trắng #body) trong lúc cuộn, tạo khoảng hở.
       Giữ height cố định, chỉ đổi shadow để vẫn có phản hồi khi cuộn
       mà không đụng box-model/layout. */
    box-shadow: none;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
}

#lp-nav.lp-scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* —— Logo —— */
.lp-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.lp-nav-logo:hover,
.lp-nav-logo:focus {
    text-decoration: none;
}

.lp-nav-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
}

.lp-nav-logo-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lp-nav-logo-name {
    font-family: var(--ths-font-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ths-w0);
    line-height: 1.2;
    display: block;
    text-align: center;
}

.lp-nav-logo-sub {
    font-family: var(--ths-font-serif);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    color: var(--ths-g2);
    line-height: 1;
    display: block;
    text-align: center;
}

/* —— Desktop menu links (output từ [MENU_LANDING]) —— */
#lp-nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#lp-nav-links > li {
    position: relative;
}

#lp-nav-links > li > a {
    display: block;
    font-family: var(--ths-font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ths-w2);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
    white-space: nowrap;
}

#lp-nav-links > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--ths-g1);
    transition: right 0.25s ease;
}

#lp-nav-links > li > a:hover,
#lp-nav-links > li.active > a {
    color: var(--ths-g0);
    text-decoration: none;
}

#lp-nav-links > li > a:hover::after,
#lp-nav-links > li.active > a::after {
    right: 0;
}

/* —— Right cluster: CTA + hamburger —— */
.lp-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* —— CTA button —— */
.lp-nav-cta {
    display: inline-block;
    font-family: var(--ths-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ths-n0);
    background: var(--ths-g1);
    border: none;
    cursor: pointer;
    padding: 10px 24px;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s ease, transform 0.15s ease;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.lp-nav-cta:hover,
.lp-nav-cta:focus {
    background: var(--ths-g0);
    transform: translateY(-1px);
    color: var(--ths-n0);
    text-decoration: none;
}

/* —— Hamburger toggle (chỉ hiện ở mobile) —— */
.lp-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--ths-w3);
    padding: 8px 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.lp-hamburger:hover {
    border-color: var(--ths-w2);
}

.lp-hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--ths-w2);
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

.lp-hamburger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.lp-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.lp-hamburger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER
   ═══════════════════════════════════════════════════════════════ */

#lp-nav-drawer {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 899;
    background: var(--ths-n1);
    border-bottom: 1px solid var(--ths-w4);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    font-family: var(--ths-font-sans);
}

#lp-nav-drawer.is-open {
    max-height: 480px;
    overflow-y: auto;
}

#lp-nav-drawer ul {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
}

#lp-nav-drawer ul li a {
    display: block;
    padding: 14px 24px;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ths-w2);
    text-decoration: none;
    border-bottom: 1px solid var(--ths-w5);
    transition: color 0.2s ease, background 0.2s ease;
}

#lp-nav-drawer ul li:last-child a {
    border-bottom: none;
}

#lp-nav-drawer ul li a:hover {
    color: var(--ths-g1);
    background: var(--ths-w5);
    text-decoration: none;
}

/* CTA trong drawer */
.lp-drawer-cta {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--ths-w4);
}

.lp-drawer-cta a {
    display: block;
    text-align: center;
    font-family: var(--ths-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ths-n0);
    background: var(--ths-g1);
    padding: 14px;
    text-decoration: none;
    transition: background 0.2s ease;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.lp-drawer-cta a:hover {
    background: var(--ths-g0);
    color: var(--ths-n0);
    text-decoration: none;
}

/* —— Backdrop bán trong suốt —— */
#lp-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 898;
    background: rgba(6, 12, 26, 0.55);
}

#lp-drawer-backdrop.is-open {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   SUB-PAGES — bù chiều cao fixed nav (64px)
   Landing page không cần vì hero là full-screen overlay.
   Bù trừ đặt ở .lp-pageband (dải đầu trang con, xem khối PAGE HEADER
   BAND bên dưới) vì giờ nó là phần tử đầu tiên ngay dưới nav, không
   còn ở .section-body nữa.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SCROLL MARGIN — anchor links bù trừ cho fixed nav
   ═══════════════════════════════════════════════════════════════ */
#tong-quan,
#vi-tri,
#can-ho,
#bieu-do,
#tai-chinh,
#tien-ich,
#dang-ky {
    scroll-margin-top: 64px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NAV BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* Tablet: 768px – 1023px */
@media (max-width: 1023px) {
    #lp-nav {
        padding: 0 24px;
    }

    #lp-nav-links {
        gap: 20px;
    }

    #lp-nav-links > li > a {
        font-size: 10px;
        letter-spacing: 0.10em;
    }

    .lp-nav-logo-name {
        font-size: 13px;
    }

    .lp-nav-cta {
        padding: 9px 16px;
        font-size: 10px;
    }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
    #lp-nav {
        padding: 0 16px;
        height: 56px;
    }

    .lp-nav-logo-name {
        font-size: 13px;
    }

    .lp-nav-logo-sub {
        font-size: 11px;
    }

    /* Ẩn desktop links và CTA */
    #lp-nav-links {
        display: none;
    }

    .lp-nav-cta {
        display: none;
    }

    /* Hiện nút hamburger */
    .lp-hamburger {
        display: flex;
    }

    /* Drawer bắt đầu sát đáy nav */
    #lp-nav-drawer {
        top: 56px;
    }

    #tong-quan,
    #vi-tri,
    #can-ho,
    #bieu-do,
    #tai-chinh,
    #tien-ich,
    #dang-ky {
        scroll-margin-top: 56px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION — Full-screen background slider + content overlay
   ═══════════════════════════════════════════════════════════════ */

.lp-hero {
    position: relative;
    height: 100vh;
    min-height: 680px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* —— Individual slide divs with background-image inline style —— */
.lp-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 35%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.lp-hero-slide.is-active {
    opacity: 1;
}

/* —— 2-layer dark gradient overlay —— */
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right, rgba(6, 12, 26, 0.88) 0%, rgba(6, 12, 26, 0.20) 60%),
        linear-gradient(to top,   rgba(6, 12, 26, 0.60) 0%, transparent 50%);
}

/* —— Gold shimmer band (giả lập phản chiếu mặt sông) —— */
.lp-hero-shimmer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 68%,
        rgba(240, 180, 0, 0.06) 76%,
        transparent 84%);
}

/* —— Chấm hiệu ứng "real-time" trên ảnh nền — chấm đặc + vòng lan toả mờ dần —— */
.lp-hero-dots {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.lp-hero-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
}

.lp-hero-dot i {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    background: var(--ths-g1);
    box-shadow: 0 0 6px rgba(240, 180, 0, 0.85);
}

.lp-hero-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ths-g1);
    animation: lp-hero-dot-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lp-hero-dot:nth-child(2)::before { animation-delay: 0.4s; }
.lp-hero-dot:nth-child(3)::before { animation-delay: 0.8s; }
.lp-hero-dot:nth-child(4)::before { animation-delay: 1.2s; }
.lp-hero-dot:nth-child(5)::before { animation-delay: 1.6s; }

@keyframes lp-hero-dot-ping {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.2); opacity: 0; }
}

@media (max-width: 767px) {
    .lp-hero-dots { display: none; }
}

/* —— Content area (absolute để fade cùng với slide) —— */
.lp-hero-content {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 840px;
    padding: 0 52px 72px;
    width: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.lp-hero-content.is-active {
    opacity: 1;
}

/* —— Eyebrow line —— */
.lp-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ths-g1);
    margin-bottom: 20px;
}

.lp-hero-eyebrow::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 28px;
    height: 1px;
    background: var(--ths-g1);
}

/* —— Main H1 —— */
.lp-hero-title {
    font-family: var(--ths-font-serif);
    font-weight: 300;
    font-size: clamp(36px, 5vw, 70px);
    line-height: 1.08;
    color: var(--ths-w0);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}

.lp-hero-title em {
    font-style: italic;
    color: var(--ths-g1);
}

/* Dòng đầu tiêu đề — giữ nguyên 1 dòng, không tự xuống dòng giữa chừng */
.lp-hero-title-line1 {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .lp-hero-title-line1 { white-space: normal; }
}

/* —— Tagline & sub —— */
.lp-hero-tagline {
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    color: var(--ths-w2);
    margin: 0 0 8px;
}

.lp-hero-sub {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.10em;
    color: var(--ths-w3);
    margin: 0 0 36px;
}

/* —— Price + Stats row —— */
.lp-hero-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 36px;
}

.lp-hero-price {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-left: 3px solid var(--ths-g1);
    padding: 2px 0 2px 20px;
    margin-right: 40px;
}

.lp-price-lbl {
    display: block;
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin-bottom: 4px;
}

.lp-price-val {
    display: block;
    font-family: var(--ths-font-serif);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    color: var(--ths-g1);
}

.lp-price-sub {
    display: block;
    font-family: var(--ths-font-sans);
    font-size: 11px;
    font-weight: 400;
    color: var(--ths-w2);
    margin-top: 3px;
}

/* —— CTA button row —— */
.lp-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ths-font-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.15s ease;
}

.lp-btn-gold {
    padding: 14px 36px;
    color: var(--ths-n0);
    background: var(--ths-g1);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.lp-btn-gold:hover,
.lp-btn-gold:focus {
    background: var(--ths-g0);
    transform: translateY(-2px);
    color: var(--ths-n0);
    text-decoration: none;
}

.lp-btn-outline {
    padding: 13px 28px;
    color: var(--ths-w2);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.lp-btn-outline:hover,
.lp-btn-outline:focus {
    border-color: var(--ths-g1);
    color: var(--ths-g1);
    text-decoration: none;
}

/* —— Stats row —— */
.lp-hero-stats {
    display: flex;
    align-items: flex-start;
}

.lp-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 24px;
}

.lp-stat:first-child { padding-left: 0; }
.lp-stat:last-child  { padding-right: 0; }
.lp-stat + .lp-stat  { border-left: 1px solid var(--ths-w4); }

.lp-stat-val {
    font-family: var(--ths-font-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--ths-w0);
}

.lp-stat-lbl {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ths-w3);
    margin-top: 3px;
}

/* —— Scroll indicator (bouncing line) —— */
.lp-hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ths-w3);
    text-decoration: none;
    animation: lp-bounce 2s ease infinite;
}

.lp-hero-scroll span {
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--ths-g1));
}

@keyframes lp-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* —— Hotline floating badge (desktop only) —— */
.lp-hero-hotline {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: right;
}

.lp-hotline-label {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ths-w3);
    margin-bottom: 6px;
}

.lp-hotline-number {
    font-family: var(--ths-font-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--ths-g0);
    margin-bottom: 4px;
}

.lp-hotline-sub {
    font-family: var(--ths-font-sans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--ths-w2);
}

/* —— Mobile hero —— */
@media (max-width: 767px) {
    .lp-hero {
        min-height: 100svh;
    }

    .lp-hero-content {
        padding: 0 16px 56px;
        max-width: 100%;
    }

    .lp-hero-title {
        font-size: clamp(32px, 8vw, 48px);
    }

    .lp-hero-tagline {
        font-size: 16px;
    }

    .lp-hero-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 28px;
    }

    .lp-hero-price {
        margin-right: 0;
    }

    .lp-price-val {
        font-size: 34px;
    }

    .lp-hero-stats {
        flex-wrap: wrap;
        gap: 12px 0;
    }

    .lp-stat {
        padding: 0 16px;
    }

    .lp-stat:first-child { padding-left: 0; }

    .lp-hero-hotline {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DUAL SHOWCASE — 2 panel ảnh phối cảnh
   ═══════════════════════════════════════════════════════════════ */

.lp-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}

.lp-showcase-panel {
    position: relative;
    overflow: hidden;
}

.lp-showcase-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.lp-showcase-panel:hover .lp-showcase-img {
    transform: scale(1.04);
}

.lp-showcase-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 40px 36px;
    background: linear-gradient(to top, rgba(6,12,26,0.88) 0%, transparent 100%);
}

.lp-showcase-eyebrow {
    display: block;
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ths-g1);
    margin-bottom: 10px;
}

.lp-showcase-title {
    font-family: var(--ths-font-serif);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--ths-w0);
    margin: 0;
}

.lp-showcase-title p {
    margin: 0;
}

@media (max-width: 767px) {
    .lp-showcase-grid      { grid-template-columns: 1fr; }
    .lp-showcase-img       { min-height: 380px; }
    .lp-showcase-title     { font-size: 22px; }
    .lp-showcase-caption   { padding: 32px 24px 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   VISION — Khối tổng quan: trái (tên + mô tả khối), phải (danh sách bài viết)
   ═══════════════════════════════════════════════════════════════ */

.lp-vision {
    background: var(--ths-n0);
    padding: 72px 24px;
}

.lp-vision-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.lp-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
}

/* Cột trái — eyebrow dùng .lp-eyebrow chung; quote to (mô tả khối) */
.lp-vision-quote {
    margin: 0;
    padding-left: 24px;
    border-left: 3px solid var(--ths-g1);
    font-family: var(--ths-font-serif);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: var(--ths-w0);
}

.lp-vision-quote p {
    margin: 0;
}

/* Cột phải — danh sách bài viết: số thứ tự + tiêu đề + mô tả */
.lp-vision-list {
    display: flex;
    flex-direction: column;
}

.lp-vision-item {
    display: flex;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--ths-w4);
}

.lp-vision-item:first-child {
    padding-top: 0;
}

.lp-vision-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lp-vision-item-num {
    flex-shrink: 0;
    font-family: var(--ths-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ths-g1);
    padding-top: 3px;
}

.lp-vision-item-title {
    display: block;
    font-family: var(--ths-font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--ths-w0);
    margin-bottom: 8px;
}

.lp-vision-item-desc {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ths-w3);
}

.lp-vision-item-desc p {
    margin: 0;
}

@media (max-width: 767px) {
    .lp-vision { padding: 48px 20px; }
    .lp-vision-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp-vision-quote { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION — Vị trí: ảnh trái full-bleed, nội dung + danh sách phải
   ═══════════════════════════════════════════════════════════════ */

.lp-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ths-n1);
    min-height: 720px;
}

.lp-location-img-wrap {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 480px;
}

.lp-location-content {
    padding: 64px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Eyebrow/tiêu đề/đoạn mô tả dùng .lp-eyebrow/.lp-section-title/.lp-section-body chung */

.lp-location-list {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}

.lp-location-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ths-w4);
}

.lp-location-item:first-child {
    padding-top: 0;
}

.lp-location-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lp-location-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ths-w4);
    border-radius: 8px;
}

.lp-location-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.lp-location-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lp-location-name {
    font-family: var(--ths-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ths-w0);
}

.lp-location-sub {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
}

.lp-location-time {
    flex-shrink: 0;
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--ths-g1);
}

@media (max-width: 991px) {
    .lp-location { grid-template-columns: 1fr; min-height: auto; }
    .lp-location-img-wrap { min-height: 320px; }
    .lp-location-content { padding: 40px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   UNITS — Loại căn hộ (lưới 4 card)
   ═══════════════════════════════════════════════════════════════ */

.lp-units {
    background: var(--ths-n0);
    padding: 80px 64px;
}

.lp-units-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 24px;
}

/* Eyebrow/tiêu đề dùng .lp-eyebrow/.lp-section-title chung (note vẫn riêng — canh phải đặc thù) */

.lp-units-note {
    font-size: 13px;
    color: var(--ths-w3);
    max-width: 440px;
    font-weight: 400;
    line-height: 1.75;
    text-align: right;
    margin: 0;
}

.lp-units-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ths-w4);
}

.lp-unit-card {
    background: var(--ths-n1);
    padding: 32px 24px 28px;
    position: relative;
    transition: background 0.25s;
}

.lp-unit-card:hover,
.lp-unit-card.hot {
    background: var(--ths-n2);
}

.lp-unit-hot-badge {
    position: absolute;
    top: 0;
    left: 24px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ths-n0);
    background: var(--ths-g1);
    padding: 4px 10px;
}

.lp-unit-num {
    font-family: var(--ths-font-serif);
    font-size: 44px;
    font-weight: 300;
    color: var(--ths-w0);
    line-height: 1;
}

.lp-unit-pn {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ths-w3);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.lp-unit-area-lbl {
    font-size: 12px;
    color: var(--ths-w3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lp-unit-area-val {
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--ths-w1);
    margin-bottom: 20px;
}

.lp-unit-bar {
    height: 2px;
    background: var(--ths-w4);
    margin-bottom: 24px;
    overflow: hidden;
}

.lp-unit-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ths-g3), var(--ths-g1));
}

.lp-unit-price-lbl {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin-bottom: 5px;
}

.lp-unit-price {
    font-family: var(--ths-font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--ths-g1);
}

.lp-unit-monthly {
    font-size: 13px;
    color: var(--ths-w3);
    margin-top: 3px;
}

.lp-unit-count {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ths-w4);
    font-size: 13px;
    color: var(--ths-w3);
    letter-spacing: 0.06em;
}

@media (max-width: 991px) {
    .lp-units { padding: 48px 24px; }
    .lp-units-top { flex-direction: column; align-items: flex-start; }
    .lp-units-note { text-align: left; max-width: 100%; }
    .lp-units-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
    .lp-units-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   FINANCE — Chính sách tài chính (cột chỉ số + bảng tài chính)
   ═══════════════════════════════════════════════════════════════ */

.lp-finance {
    background: var(--ths-n1);
    padding: 72px 52px;
}

.lp-fin-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 72px;
    align-items: start;
}

.lp-fin-rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ths-w4);
    margin-top: 44px;
}

.lp-fin-cell {
    background: var(--ths-n2);
    padding: 26px 22px;
}

.lp-fin-val {
    font-family: var(--ths-font-serif);
    font-size: 36px;
    font-weight: 600;
    color: var(--ths-g1);
    line-height: 1;
    margin-bottom: 6px;
}

.lp-fin-val sup {
    font-size: 16px;
}

.lp-fin-lbl {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
    line-height: 1.6;
}

.lp-ft-note {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
    margin-bottom: 18px;
    font-style: italic;
}

.lp-ft-head {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ths-gl);
}

.lp-ft-hc {
    font-family: var(--ths-font-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ths-g3);
}

.lp-ft-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    padding: 16px 0;
    border-bottom: 1px solid var(--ths-w4);
    align-items: center;
    transition: background 0.15s;
}

.lp-ft-row:hover {
    background: var(--ths-w5);
    margin: 0 -8px;
    padding: 16px 8px;
}

.lp-ft-name {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ths-w0);
}

.lp-ft-area {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
    margin-top: 2px;
}

.lp-ft-price {
    font-family: var(--ths-font-sans);
    font-size: 14px;
    color: var(--ths-w2);
}

.lp-ft-own {
    font-family: var(--ths-font-sans);
    font-size: 14px;
    color: var(--ths-w3);
}

.lp-ft-monthly {
    font-family: var(--ths-font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ths-g1);
}

@media (max-width: 900px) {
    .lp-finance { padding: 48px 20px; }
    .lp-fin-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPARE — So sánh Thuê vs Mua (2 cột đối xứng)
   ═══════════════════════════════════════════════════════════════ */

.lp-compare {
    background: var(--ths-n2);
    padding: 72px 52px;
}

.lp-compare-head {
    text-align: center;
}

.lp-cmp-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ths-gl);
    margin-top: 56px;
}

.lp-cmp-col {
    background: var(--ths-n1);
    padding: 44px 40px;
}

.lp-cmp-col.yes {
    background: var(--ths-n2);
}

.lp-cmp-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ths-w4);
}

.lp-cmp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lp-cmp-dot.no {
    background: #3A3A3A;
}

.lp-cmp-dot.ok {
    background: var(--ths-g1);
}

.lp-cmp-title {
    font-family: var(--ths-font-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ths-w0);
}

.lp-cmp-sub {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
    margin-top: 2px;
}

.lp-cmp-rows {
    display: flex;
    flex-direction: column;
}

.lp-cmp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ths-w4);
    font-family: var(--ths-font-sans);
    font-size: 14px;
}

.lp-cmp-row:last-child {
    border-bottom: none;
}

.lp-cmp-icon-no {
    color: #3A3A3A;
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
}

.lp-cmp-icon-yes {
    color: var(--ths-g1);
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
}

.lp-cmp-text-no {
    color: var(--ths-w3);
}

.lp-cmp-text-yes {
    color: var(--ths-w1);
}

.lp-cmp-footer {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--ths-gl);
    background: var(--ths-gb);
}

.lp-cmp-footer-lbl {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin-bottom: 5px;
}

.lp-cmp-footer-val {
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--ths-g1);
}

.lp-cmp-footer-val.dim {
    color: var(--ths-w4);
}

@media (max-width: 900px) {
    .lp-compare { padding: 48px 20px; }
    .lp-cmp-wrap { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   AMENITIES — Hệ tiện ích khép kín (lưới 6 card icon)
   ═══════════════════════════════════════════════════════════════ */

.lp-amenities {
    background: var(--ths-n0);
    padding: 72px 52px;
}

.lp-amen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ths-w4);
    margin-top: 56px;
}

.lp-amen-card {
    background: var(--ths-n1);
    padding: 36px 28px;
    transition: background 0.2s;
}

.lp-amen-card:hover {
    background: var(--ths-n2);
}

.lp-amen-line {
    width: 24px;
    height: 1px;
    background: var(--ths-g2);
    margin-bottom: 20px;
}

.lp-amen-icon {
    margin-bottom: 16px;
}

.lp-amen-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--ths-g2);
    fill: none;
    stroke-width: 1.3;
    opacity: 0.75;
}

.lp-amen-title {
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--ths-w0);
}

.lp-amen-desc {
    font-family: var(--ths-font-sans);
    font-size: 14px;
    color: var(--ths-w3);
    line-height: 1.75;
    font-weight: 400;
}

.lp-amen-desc p {
    margin: 0;
}

@media (max-width: 900px) {
    .lp-amenities { padding: 48px 20px; }
    .lp-amen-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   LIFESTYLE STRIP — 3 panel ảnh trượt liên tục phải → trái
   ═══════════════════════════════════════════════════════════════ */

.lp-life-strip {
    position: relative;
    overflow: hidden;
    height: 440px;
}

/* Vignette 2 mép — che mượt phần panel bị cắt ngang chữ do hiệu ứng trượt
   vô hạn (tại bất kỳ thời điểm nào, viewport luôn lộ 1 phần dư panel kế cận) */
.lp-life-strip::before,
.lp-life-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 3;
    pointer-events: none;
}
.lp-life-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--ths-n0) 0%, transparent 100%);
}
.lp-life-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--ths-n0) 0%, transparent 100%);
}

@media (max-width: 900px) {
    .lp-life-strip::before,
    .lp-life-strip::after {
        display: none;
    }
}

.lp-life-track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: lp-life-scroll 36s linear infinite;
}

.lp-life-strip:hover .lp-life-track {
    animation-play-state: paused;
}

.lp-life-panel {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: 33.333vw;
    height: 100%;
    cursor: pointer;
}

.lp-life-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lp-life-panel:hover .lp-life-bg {
    transform: scale(1.07);
}

.lp-life-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 12, 26, 0.82) 0%, rgba(6, 12, 26, 0.2) 55%);
}

.lp-life-content {
    position: absolute;
    bottom: 26px;
    left: 28px;
    right: 28px;
    z-index: 2;
}

.lp-life-tag {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ths-g1);
    margin-bottom: 8px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.lp-life-title {
    display: block;
    font-family: var(--ths-font-serif);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.35;
    color: var(--ths-w0);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.lp-life-title:hover {
    color: var(--ths-w0);
    text-decoration: none;
}

.lp-life-body {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w3);
    line-height: 1.6;
    margin-top: 6px;
    font-weight: 300;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.lp-life-sep {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--ths-gl), transparent);
    z-index: 2;
}

@keyframes lp-life-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 900px) {
    .lp-life-strip { height: auto; }
    .lp-life-track { animation: none; width: auto; flex-direction: column; }
    .lp-life-panel { width: 100%; height: 320px; }
    .lp-life-sep { display: none; }
    .lp-life-panel-dup { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CTA — Đăng ký tư vấn (2 cột: nội dung + form liên hệ)
   ═══════════════════════════════════════════════════════════════ */

.lp-cta {
    position: relative;
    background: var(--ths-n1);
    padding: 72px 52px;
    overflow: hidden;
}

.lp-cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 180, 0, 0.05) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: lp-cta-pulse 4s ease-in-out infinite;
}

.lp-cta-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(240, 180, 0, 0.08);
    pointer-events: none;
    z-index: 0;
    animation: lp-cta-pulse 4s ease-in-out infinite;
    animation-delay: 0.3s;
}

.lp-cta-ring2 {
    width: 320px;
    height: 320px;
    border: 1px solid rgba(240, 180, 0, 0.12);
    animation-delay: 0.6s;
}

@keyframes lp-cta-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.lp-cta-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.lp-cta-eyebrow {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin-bottom: 20px;
}

.lp-cta-title {
    font-family: var(--ths-font-serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 300;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--ths-w0);
}

.lp-cta-title em {
    font-style: italic;
    color: var(--ths-g1);
}

.lp-cta-body {
    font-family: var(--ths-font-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--ths-w2);
    margin: 0 0 36px;
    max-width: 480px;
}

.lp-cta-hotline {
    margin-bottom: 32px;
}

.lp-cta-hotline-label {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin-bottom: 6px;
}

.lp-cta-hotline-number {
    font-family: var(--ths-font-serif);
    font-size: 40px;
    font-weight: 600;
    color: var(--ths-g1);
    text-decoration: none;
    display: block;
    letter-spacing: 0.03em;
}

.lp-cta-hotline-number:hover {
    color: var(--ths-g0);
    text-decoration: none;
}

.lp-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.lp-cta-badges {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.lp-cta-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ths-font-sans);
    font-size: 12px;
    color: var(--ths-w3);
}

.lp-cta-badge svg {
    width: 15px;
    height: 15px;
    stroke: var(--ths-g3);
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
}

/* Cột phải — form liên hệ gốc (Bootstrap) restyle sang navy-gold */
.lp-cta-right {
    background: var(--ths-n2);
    border: 1px solid var(--ths-w4);
    border-radius: 50px;
    overflow: hidden;
    padding: 40px;
}

.lp-cta-form-loading {
    color: var(--ths-w3);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
    font-family: var(--ths-font-sans);
}

.lp-cta-form-mount .nv-fullbg {
    background-color: transparent;
    min-height: 0;
}

.lp-cta-form-mount .form-group {
    margin-bottom: 16px;
}

.lp-cta-form-mount .form-control {
    background: var(--ths-n1);
    border: 1px solid var(--ths-w4);
    color: var(--ths-w0);
    border-radius: 0;
    box-shadow: none;
    height: 44px;
    font-family: var(--ths-font-sans);
    font-size: 13px;
}

.lp-cta-form-mount textarea.form-control {
    height: auto;
    min-height: 110px;
}

.lp-cta-form-mount .form-control:focus {
    border-color: var(--ths-g1);
    box-shadow: none;
    background: var(--ths-n1);
    color: var(--ths-w0);
}

.lp-cta-form-mount .form-control::-webkit-input-placeholder { color: var(--ths-w3); }
.lp-cta-form-mount .form-control::-moz-placeholder { color: var(--ths-w3); }
.lp-cta-form-mount .form-control:-ms-input-placeholder { color: var(--ths-w3); }

/* input-group (icon + ô nhập) — gộp thành 1 khối duy nhất, viền vàng khi focus
   bao trọn cả icon (trước đây icon có viền riêng tách biệt, không đổi theo focus) */
.lp-cta-form-mount .input-group {
    display: flex;
    align-items: stretch;
    background: var(--ths-n1);
    border: 1px solid var(--ths-w4);
    overflow: hidden;
    transition: border-color .15s;
}
.lp-cta-form-mount .input-group:focus-within {
    border-color: var(--ths-g1);
}
.lp-cta-form-mount .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--ths-g1);
    transition: background-color .15s;
}
.lp-cta-form-mount .input-group:focus-within .input-group-addon {
    background: var(--ths-gb);
}
.lp-cta-form-mount .input-group .form-control {
    border: none;
    background: transparent;
}
.lp-cta-form-mount .input-group .form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.lp-cta-form-mount .btn-primary {
    background: var(--ths-g1);
    border-color: var(--ths-g1);
    color: var(--ths-n0);
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    padding: 11px 28px;
}

.lp-cta-form-mount .btn-primary:hover {
    background: var(--ths-g0);
    border-color: var(--ths-g0);
}

.lp-cta-form-mount .btn-default {
    background: transparent;
    border: 1px solid var(--ths-w4);
    color: var(--ths-w2);
    border-radius: 0;
}

.lp-cta-form-mount label {
    color: var(--ths-w2);
    font-family: var(--ths-font-sans);
    font-size: 13px;
}

.lp-cta-form-mount input[type="checkbox"],
.lp-cta-form-mount input[type="radio"] {
    accent-color: var(--ths-g1);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.lp-cta-form-mount .contact-result {
    margin-top: 16px;
    font-family: var(--ths-font-sans);
    font-size: 13px;
}

@media (max-width: 900px) {
    .lp-cta { padding: 48px 20px; }
    .lp-cta-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-cta-right { padding: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

/* Tiền tố #footer để thắng độ ưu tiên rule #footer gốc trong style.css
   (vd: #footer{background-color:#245682}, #footer a{color:#dcdcdc}) */

#footer.lp-footer {
    position: relative;
    min-height: 0;
    background: var(--ths-n0);
    background-image: none;
    border-top: 1px solid var(--ths-w4);
    border-bottom: none;
    padding: 48px 52px 28px;
    color: var(--ths-w2);
    font-size: inherit;
}

#footer .lp-footer-top {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap: 48px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--ths-w4);
    margin-bottom: 32px;
}

#footer .lp-footer-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    margin-bottom: 14px;
    display: block;
    background: #011832;
    padding: 5px;
    border-radius: 10px;
}

#footer .lp-footer-brand-name {
    font-family: var(--ths-font-serif);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
    color: var(--ths-w0);
}

#footer .lp-footer-brand-sub {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ths-g2);
    margin-bottom: 14px;
}

#footer .lp-footer-brand-desc {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w2);
    line-height: 1.7;
    font-weight: 300;
}

#footer .lp-footer-col h4 {
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ths-g3);
    margin: 0 0 18px;
}

#footer .lp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#footer .lp-footer-col a,
#footer .lp-footer-col .menu li a {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w2);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.2s;
}

/* [MENU_FOOTER] tự xuất <ul class="menu"> — ghi đè rule #footer .menu* gốc (bullet + gạch chấm) */
#footer .lp-footer-col .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#footer .lp-footer-col .menu li {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
}

#footer .lp-footer-col .menu li a {
    display: block;
    white-space: normal;
    border-bottom: none;
    padding: 0;
}

#footer .lp-footer-col .menu li a::before {
    content: none;
}

#footer .lp-footer-col .menu li a:hover {
    border-bottom: none;
    color: var(--ths-g1);
}

#footer .lp-footer-col a:hover {
    color: var(--ths-g1);
    text-decoration: none;
}

#footer .lp-footer-phone-lbl {
    font-family: var(--ths-font-sans);
    font-size: 12px;
    color: var(--ths-w2);
    margin-bottom: 4px;
}

#footer .lp-footer-phone {
    font-family: var(--ths-font-serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--ths-g1);
    text-decoration: none;
    display: block;
    margin-top: 6px;
    margin-bottom: 14px;
}

#footer .lp-footer-phone:hover {
    color: var(--ths-g0);
    text-decoration: none;
}

#footer .lp-footer-address {
    font-family: var(--ths-font-sans);
    font-size: 13px;
    color: var(--ths-w2);
    line-height: 1.7;
    font-weight: 300;
}

#footer .lp-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
}

/* Gộp tagline CG Group + đổi theme + nút lên đầu trang vào chung 1 nhóm bên phải */
#footer .lp-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#footer .lp-footer-copy,
#footer .lp-footer-copy .copyright,
#footer .lp-footer-copy span {
    font-family: var(--ths-font-sans);
    font-size: 11px;
    color: var(--ths-w3);
}

#footer .lp-footer-copy a {
    /* !important bắt buộc — ghi đè .copyright span a{color:#dcdcdc!important} trong style.css */
    color: var(--ths-w3) !important;
}

#footer .lp-footer-copy a:hover {
    color: var(--ths-g1) !important;
}

#footer .lp-footer-cg {
    font-family: var(--ths-font-sans);
    font-size: 11px;
    color: var(--ths-w3);
    letter-spacing: 0.08em;
}

#footer .lp-footer-cg strong {
    color: var(--ths-g3);
}

@media (max-width: 900px) {
    #footer.lp-footer { padding: 36px 20px 20px; }
    #footer .lp-footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* Đổi theme + nút lên đầu trang — giờ nằm chung trong .lp-footer-bottom-right,
   không còn thanh .footerNav2 riêng (đã gộp, không dùng style mặc định xanh dương gốc) */
#footer .lp-footer-bottom-right .theme-change {
    display: flex;
    align-items: center;
    gap: 8px;
}
#footer .lp-footer-bottom-right .theme-change a,
#footer .lp-footer-bottom-right .theme-change span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ths-w5);
    color: var(--ths-w2);
    font-size: 10px;
}
#footer .lp-footer-bottom-right .theme-change span {
    background: var(--ths-g1);
    color: var(--ths-n0);
}
#footer .lp-footer-bottom-right .theme-change a:hover {
    background: var(--ths-g1);
    color: var(--ths-n0);
}
#footer .lp-footer-bottom-right .bttop a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ths-w5);
    color: var(--ths-g1);
    font-size: 11px;
    transition: background 0.2s, color 0.2s;
}
#footer .lp-footer-bottom-right .bttop a:hover {
    background: var(--ths-g1);
    color: var(--ths-n0);
}

/* ═══════════════════════════════════════════════════════════════
   HYBRID PREMIUM — Toàn bộ chuyển sang tone sáng ấm (cream-gold)
   Hero + Lifestyle Strip giữ nền ảnh tối nguyên bản.
   Nav / Content sections / CTA / Footer đều theo palette --lt-*.
   Toàn bộ ghi đè qua class cụ thể — không đụng rule gốc.
   ═══════════════════════════════════════════════════════════════ */

/* Ticker — bridge transition từ hero tối sang nội dung sáng */
.lp-ticker {
    background: var(--lt-bg1) !important;
}
.lp-ticker-item {
    color: var(--lt-text0) !important;
}

/* Nền sáng cho 6 section nội dung chính */
.lp-showcase    { background: var(--lt-bg0); }
.lp-vision      { background: var(--lt-bg1); }
.lp-location    { background: var(--lt-bg0); }
.lp-units       { background: var(--lt-bg0); }
.lp-finance     { background: var(--lt-bg1); }
.lp-compare     { background: var(--lt-bg0); }
.lp-amenities   { background: var(--lt-bg1); }

/* Eyebrow — chữ gold tối (đọc được trên nền sáng) */
.lp-showcase .lp-eyebrow,
.lp-vision .lp-eyebrow,
.lp-location .lp-eyebrow,
.lp-units .lp-eyebrow,
.lp-finance .lp-eyebrow,
.lp-compare .lp-eyebrow,
.lp-amenities .lp-eyebrow {
    color: var(--lt-gold);
}
.lp-showcase .lp-eyebrow::before,
.lp-vision .lp-eyebrow::before,
.lp-location .lp-eyebrow::before,
.lp-units .lp-eyebrow::before,
.lp-finance .lp-eyebrow::before,
.lp-compare .lp-eyebrow::before,
.lp-amenities .lp-eyebrow::before {
    background: var(--lt-gold);
}

/* Section title — chữ đậm ấm */
.lp-showcase .lp-section-title,
.lp-vision .lp-section-title,
.lp-location .lp-section-title,
.lp-units .lp-section-title,
.lp-finance .lp-section-title,
.lp-compare .lp-section-title,
.lp-amenities .lp-section-title {
    color: var(--lt-text0);
}
.lp-showcase .lp-section-title em,
.lp-vision .lp-section-title em,
.lp-location .lp-section-title em,
.lp-units .lp-section-title em,
.lp-finance .lp-section-title em,
.lp-compare .lp-section-title em,
.lp-amenities .lp-section-title em {
    color: var(--lt-gold);
}

/* Section body text */
.lp-showcase .lp-section-body,
.lp-vision .lp-section-body,
.lp-location .lp-section-body,
.lp-units .lp-section-body,
.lp-finance .lp-section-body,
.lp-compare .lp-section-body,
.lp-amenities .lp-section-body {
    color: var(--lt-text2);
}

/* === FALLBACK COLOR — toàn bộ text trong light sections mặc định tối ===
   Catches bất kỳ element nào không có class-specific override bên dưới */
.lp-ticker,
.lp-showcase,
.lp-vision,
.lp-location .lp-location-content,
.lp-units,
.lp-finance,
.lp-compare,
.lp-amenities {
    color: var(--lt-text1);
}

/* Vision — quote + list items phải tối trên nền cream */
.lp-vision .lp-vision-quote {
    color: var(--lt-text0);
    border-left-color: var(--lt-gold);
}
.lp-vision .lp-vision-quote em {
    color: var(--lt-gold);
}
.lp-vision .lp-vision-item {
    border-bottom-color: var(--lt-sep);
}
.lp-vision .lp-vision-item-num {
    color: var(--lt-gold);
}
.lp-vision .lp-vision-item-title {
    color: var(--lt-text0);
}
.lp-vision .lp-vision-item-desc {
    color: var(--lt-text2);
}

/* Location — danh sách khoảng cách */
.lp-location { background: var(--lt-bg0); }
.lp-location .lp-location-content { background: var(--lt-bg0); }
.lp-location .lp-location-name { color: var(--lt-text0); }
.lp-location .lp-location-sub  { color: var(--lt-text2); }
.lp-location .lp-location-time { color: var(--lt-gold); }
.lp-location .lp-location-item { border-bottom-color: var(--lt-sep); }
.lp-location .lp-location-icon { border-color: var(--lt-border); }
.lp-location .lp-section-title { color: var(--lt-text0); }

/* Units — lưới 4 card */
.lp-units-note { color: var(--lt-text1); font-weight: 400; }
.lp-units .lp-units-grid { background: var(--lt-sep); }
.lp-units .lp-unit-card { background: var(--lt-bg1); }
.lp-units .lp-unit-card:hover,
.lp-units .lp-unit-card.hot { background: var(--lt-bg2); }
.lp-units .lp-unit-num { color: var(--lt-text0); }
.lp-units .lp-unit-pn { color: var(--lt-text3); }
.lp-units .lp-unit-area-lbl { color: var(--lt-text3); }
.lp-units .lp-unit-area-val { color: var(--lt-text1); }
.lp-units .lp-unit-bar { background: var(--lt-border); }
.lp-units .lp-unit-price-lbl { color: var(--lt-gold); }
.lp-units .lp-unit-price { color: var(--lt-gold); }
.lp-units .lp-unit-monthly { color: var(--lt-text2); }
.lp-units .lp-unit-count {
    border-top-color: var(--lt-sep);
    color: var(--lt-text2);
}

/* Finance — lưới chỉ số + bảng */
.lp-finance .lp-fin-rates { background: var(--lt-sep); }
.lp-finance .lp-fin-cell  { background: var(--lt-bg0); }
.lp-finance .lp-fin-val   { color: var(--lt-gold); }
.lp-finance .lp-fin-lbl   { color: var(--lt-text2); }
.lp-finance .lp-ft-note   { color: var(--lt-text2); }
.lp-finance .lp-ft-head   { border-bottom-color: var(--lt-border); }
.lp-finance .lp-ft-hc     { color: var(--lt-gold); }
.lp-finance .lp-ft-row    { border-bottom-color: var(--lt-sep); }
.lp-finance .lp-ft-row:hover { background: var(--lt-gold-bg); margin: 0 -8px; padding: 16px 8px; }
.lp-finance .lp-ft-name   { color: var(--lt-text0); }
.lp-finance .lp-ft-area   { color: var(--lt-text2); }
.lp-finance .lp-ft-price  { color: var(--lt-text1); }
.lp-finance .lp-ft-own    { color: var(--lt-text2); }
.lp-finance .lp-ft-monthly { color: var(--lt-gold); }

/* Compare — 2 cột so sánh */
.lp-compare .lp-cmp-wrap  { background: var(--lt-sep); }
.lp-compare .lp-cmp-col   { background: var(--lt-bg1); }
.lp-compare .lp-cmp-col.yes { background: var(--lt-bg0); }
.lp-compare .lp-cmp-head  { border-bottom-color: var(--lt-sep); }
.lp-compare .lp-cmp-title { color: var(--lt-text0); }
.lp-compare .lp-cmp-sub   { color: var(--lt-text2); }
.lp-compare .lp-cmp-row   {
    border-bottom-color: var(--lt-sep);
    color: var(--lt-text1);
}
.lp-compare .lp-cmp-text-no  { color: var(--lt-text3); }
.lp-compare .lp-cmp-text-yes { color: var(--lt-text0); }
.lp-compare .lp-cmp-icon-no  { color: var(--lt-text3); }
.lp-compare .lp-cmp-icon-yes { color: var(--lt-gold); }
.lp-compare .lp-cmp-dot.no   { background: var(--lt-text3); }
.lp-compare .lp-cmp-dot.ok   { background: var(--lt-gold); }
.lp-compare .lp-cmp-footer   {
    border-color: var(--lt-border);
    background: var(--lt-gold-bg);
}
.lp-compare .lp-cmp-footer-lbl { color: var(--lt-gold); }
.lp-compare .lp-cmp-footer-val { color: var(--lt-gold); }
.lp-compare .lp-cmp-footer-val.dim { color: var(--lt-text3); }
.lp-compare .lp-section-title { color: var(--lt-text0); text-align: center; }
.lp-compare .lp-eyebrow { justify-content: center; }

/* Amenities — lưới 6 card */
.lp-amenities .lp-amen-grid  { background: var(--lt-sep); }
.lp-amenities .lp-amen-card  { background: var(--lt-bg0); }
.lp-amenities .lp-amen-card:hover { background: var(--lt-bg2); }
.lp-amenities .lp-amen-line  { background: var(--lt-gold); }
.lp-amenities .lp-amen-icon svg { stroke: var(--lt-gold); }
.lp-amenities .lp-amen-title { color: var(--lt-text0); }
.lp-amenities .lp-amen-desc  { color: var(--lt-text2); }

/* Lifestyle Strip — giữ nền tối vì ảnh panel tối; vignette navy giữ nguyên */
.lp-lifestyle { background: var(--ths-n0); }

/* ─── NAV DIAGONAL SPLIT — trái tối (logo) / phải sáng (menu) ─── */
/* Nền cream (phải) là background của chính #lp-nav;
   ::before phủ vùng logo bằng navy + clip-path chéo;
   ::after là vệt gold mảnh dọc theo đường chéo.
   Cả 2 pseudo-element dùng z-index:-1 để nằm sau content (logo, links).  */
#lp-nav {
    background-image: linear-gradient(to bottom, var(--lt-bg2) 0%, var(--lt-bg1) 100%);
    border-bottom: 1px solid rgba(184,136,10,0.55);
}
#lp-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--logo-zone-w, 300px);
    background: #011832;
    transform: skewX(-8deg);
    transform-origin: top right;
    z-index: -1;
    pointer-events: none;
}
#lp-nav::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--logo-zone-w, 300px) - 3px);
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #B8880A, #F5DC60 50%, #B8880A);
    transform: skewX(-8deg);
    transform-origin: top left;
    z-index: -1;
    pointer-events: none;
}
#lp-nav.lp-scrolled {
    background-image: linear-gradient(to bottom, rgba(235,224,196,0.97) 0%, rgba(245,237,216,0.97) 100%);
    box-shadow: 0 4px 20px rgba(160,120,40,0.14);
}
.lp-nav-logo-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
}
/* Logo text — nền vùng logo là tối nên dùng màu sáng */
.lp-nav-logo-name { color: #FFFFFF; }
.lp-nav-logo-sub  { color: var(--lt-gold); }
/* Menu links — nằm trên nền sáng bên phải */
#lp-nav-links > li > a { color: var(--lt-text2); }
#lp-nav-links > li > a:hover,
#lp-nav-links > li.active > a { color: var(--lt-gold); }
/* Right cluster + Hamburger — đảm bảo nằm trên pseudo-element layer */
.lp-nav-right { position: relative; z-index: 1; }
.lp-hamburger { border-color: var(--lt-border); }
.lp-hamburger:hover { border-color: var(--lt-gold); }
.lp-hamburger span { background: var(--lt-text2); }
/* Mobile: bỏ diagonal split, toàn bộ nav nền tối để đồng nhất */
@media (max-width: 767px) {
    #lp-nav {
        background: #011832;
        background-image: none;
        border-bottom-color: rgba(184,136,10,0.25);
    }
    #lp-nav.lp-scrolled {
        background: rgba(1,24,50,0.97);
        background-image: none;
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    }
    #lp-nav::before,
    #lp-nav::after { display: none; }
    .lp-nav-logo-name { color: #FFFFFF; }
    .lp-nav-logo-sub  { color: var(--ths-g1); }
    .lp-hamburger { border-color: rgba(255,255,255,0.25); }
    .lp-hamburger span { background: #FFFFFF; }
}
/* Mobile drawer — cream, chữ tối (chỉ áp dụng khi mở) */
#lp-nav-drawer.is-open {
    background: var(--lt-bg0);
    border-bottom-color: var(--lt-border);
}
#lp-nav-drawer ul li a {
    color: var(--lt-text1);
    border-bottom-color: var(--lt-sep);
}
#lp-nav-drawer ul li a:hover {
    color: var(--lt-gold);
    background: var(--lt-bg1);
}

/* ─── CTA / ĐĂNG KÝ — nền sáng, form card cream ─── */
.lp-cta {
    background: var(--lt-bg0);
    color: var(--lt-text1);
}
.lp-cta-glow {
    background: radial-gradient(circle, rgba(184,136,10,0.08) 0%, transparent 65%);
}
.lp-cta-ring  { border-color: rgba(184,136,10,0.14); }
.lp-cta-ring2 { border-color: rgba(184,136,10,0.20); }
.lp-cta-eyebrow { color: var(--lt-gold); }
.lp-cta-title   { color: var(--lt-text0); }
.lp-cta-title em { color: var(--lt-gold); }
.lp-cta-body { color: var(--lt-text2); }
.lp-cta-hotline-label  { color: var(--lt-gold); }
.lp-cta-hotline-number { color: var(--lt-gold); }
.lp-cta-hotline-number:hover { color: var(--lt-gold2); }
.lp-cta-badge { color: var(--lt-text3); }
.lp-cta-badge svg { stroke: var(--lt-gold); }
/* Form bên phải */
.lp-cta-right {
    background: var(--lt-bg1);
    border-color: var(--lt-border);
}
.lp-cta-form-loading { color: var(--lt-text2); }
.lp-cta-form-mount .form-control {
    background: var(--lt-bg0);
    border-color: var(--lt-border);
    color: var(--lt-text0);
}
.lp-cta-form-mount .form-control:focus {
    border-color: var(--lt-gold);
    background: var(--lt-bg0);
    color: var(--lt-text0);
}
.lp-cta-form-mount .form-control::-webkit-input-placeholder { color: var(--lt-text3); }
.lp-cta-form-mount .form-control::-moz-placeholder { color: var(--lt-text3); }
.lp-cta-form-mount .form-control:-ms-input-placeholder { color: var(--lt-text3); }
.lp-cta-form-mount .input-group {
    background: var(--lt-bg0);
    border-color: var(--lt-border);
}
.lp-cta-form-mount .input-group:focus-within { border-color: var(--lt-gold); }
.lp-cta-form-mount .input-group-addon { color: var(--lt-gold); }
.lp-cta-form-mount .input-group:focus-within .input-group-addon {
    background: var(--lt-gold-bg);
}
.lp-cta-form-mount .btn-default {
    border-color: var(--lt-border);
    color: var(--lt-text2);
}
.lp-cta-form-mount label { color: var(--lt-text1); }

/* ─── FOOTER — nền sáng, chữ tối ─── */
#footer.lp-footer {
    background-image: linear-gradient(to bottom, var(--lt-bg1) 0%, var(--lt-bg2) 100%);
    background-color: var(--lt-bg1);
    border-top-color: var(--lt-sep);
    color: var(--lt-text2);
}
#footer .lp-footer-top { border-bottom-color: var(--lt-sep); }
#footer .lp-footer-brand-name { color: var(--lt-text0); }
#footer .lp-footer-brand-sub  { color: var(--lt-gold); }
#footer .lp-footer-brand-desc { color: var(--lt-text2); }
#footer .lp-footer-col h4 { color: var(--lt-gold); }
#footer .lp-footer-col a,
#footer .lp-footer-col .menu li a { color: var(--lt-text2); }
#footer .lp-footer-col a:hover,
#footer .lp-footer-col .menu li a:hover { color: var(--lt-gold); }
#footer .lp-footer-phone { color: var(--lt-gold); }
#footer .lp-footer-phone-lbl { color: var(--lt-text2); }
#footer .lp-footer-address { color: var(--lt-text2); }
#footer .lp-footer-copy,
#footer .lp-footer-copy .copyright,
#footer .lp-footer-copy span { color: var(--lt-text3); }
#footer .lp-footer-copy a { color: var(--lt-text3) !important; }
#footer .lp-footer-copy a:hover { color: var(--lt-gold) !important; }
#footer .lp-footer-cg { color: var(--lt-text3); }
#footer .lp-footer-cg strong { color: var(--lt-gold); }
#footer .lp-footer-bottom-right .theme-change a,
#footer .lp-footer-bottom-right .theme-change span {
    background: var(--lt-bg2);
    color: var(--lt-text2);
}
#footer .lp-footer-bottom-right .bttop a {
    background: var(--lt-bg2);
    color: var(--lt-gold);
}


/* ─── FONT CLARITY — nav + footer to & đậm hơn trên nền sáng ─── */
/* NAV */
.lp-nav-logo-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
.lp-nav-logo-sub {
    font-size: 14px;
    font-weight: 400;
}
#lp-nav-links > li > a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.10em;
}
/* FOOTER */
#footer .lp-footer-brand-name {
    font-size: 20px;
    font-weight: 600;
}
#footer .lp-footer-brand-sub {
    font-size: 11px;
    letter-spacing: 0.16em;
}
#footer .lp-footer-brand-desc,
#footer .lp-footer-address {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
}
#footer .lp-footer-col h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
}
#footer .lp-footer-col a,
#footer .lp-footer-col .menu li a {
    font-size: 14px;
    font-weight: 400;
}
#footer .lp-footer-phone-lbl {
    font-size: 13px;
}
#footer .lp-footer-copy,
#footer .lp-footer-copy .copyright,
#footer .lp-footer-copy span {
    font-size: 12px;
}
#footer .lp-footer-cg {
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   TRANG CON (news/contact/users/search...) — nền sáng, hiện đại
   Nav + footer giữ navy-gold; chỉ vùng nội dung (#body) sáng lên.
   Chỉ ghi đè class/ID có sẵn của theme gốc, không đổi cấu trúc HTML.
   Không ảnh hưởng trang chủ (home-landing không mở
   .section-body/#body/.third-nav).
   ═══════════════════════════════════════════════════════════════ */

:root {
    --sp-bg: #F6F7F9;
    --sp-surface: #FFFFFF;
    --sp-border: #E7E9EE;
    --sp-text: #161B26;
    --sp-text-soft: #4B5468;
    --sp-text-mute: #8A93A6;
    --sp-radius: 14px;
    --sp-radius-sm: 9px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER BAND — breadcrumb + tìm kiếm, liền mạch với #lp-nav
   (cùng tông navy), ảnh nền mờ chìm phía sau. Card #body trắng
   nhích lên đè nhẹ vào đáy dải này (margin-top âm, xem #body bên dưới).
   ═══════════════════════════════════════════════════════════════ */

.lp-pageband {
    position: relative;
    margin-top: 64px;
    padding: 28px 0 56px;
    overflow: hidden;
    background: var(--ths-n1);
}

@media (max-width: 767px) {
    .lp-pageband { margin-top: 56px; padding: 20px 0 44px; }
}

/* Lớp ảnh — đã có ảnh thật, nền ảnh sáng nên canh đáy cho đúng bố cục */
.lp-pageband-img {
    position: absolute;
    inset: 0;
    background-image: url('../images/page-header-bg.jpg');
    background-size: cover;
    background-position: bottom;
    opacity: 0.5;
}

/* Lớp hoạ tiết — chỉ còn quầng sáng vàng rất nhẹ làm điểm nhấn, bỏ hẳn đường kẻ
   mảnh (trước đây là hoạ tiết giả lập khi CHƯA có ảnh, giờ ảnh nền sáng thật rồi
   nên đường kẻ trắng mờ sẽ nổi lên như vệt xước — không còn phù hợp) */
.lp-pageband-fx {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 25%, var(--ths-gb) 0%, transparent 45%),
        radial-gradient(circle at 88% 75%, var(--ths-gb) 0%, transparent 50%);
}

/* Lớp phủ tối — ảnh nền sáng nên tăng độ tối để chữ trắng vẫn đủ tương phản,
   ép ảnh "mờ chìm" đúng yêu cầu thay vì hiện rõ như ảnh gốc */
.lp-pageband-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 12, 26, 0.72) 0%, rgba(6, 12, 26, 0.95) 100%);
}

.lp-pageband-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 52px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .lp-pageband-inner { padding: 0 20px; }
}

/* Trung hoà .third-nav .bg/.row gốc (nền xám #eeeeee, viền #dcdcdc trong style.css) */
.lp-pageband .third-nav .bg { background: transparent; }
.lp-pageband .third-nav .row { border-bottom: none; }

/* Breadcrumb trên nền tối — text nhạt + dấu / , bỏ kiểu "mũi tên ruy băng" gốc */
.lp-pageband .breadcrumbs a,
.lp-pageband .show-subs-breadcrumbs {
    background: transparent;
    padding: 0;
    color: var(--ths-w2);
    font-family: var(--ths-font-sans);
    font-size: 14px;
    font-weight: 500;
}
.lp-pageband .breadcrumbs a:hover,
.lp-pageband .show-subs-breadcrumbs:hover { background: transparent; color: var(--ths-g1); }
.lp-pageband .breadcrumbs a:before,
.lp-pageband .breadcrumbs a:after,
.lp-pageband .show-subs-breadcrumbs:before,
.lp-pageband .show-subs-breadcrumbs:after { content: none; border: none; }
.lp-pageband .breadcrumbs li { margin: 0; }
.lp-pageband .breadcrumbs li:not(:first-child):before {
    content: '/';
    display: inline-block;
    float: left;
    margin: 0 10px;
    color: var(--ths-w4);
}

/* Search — kiểu kính mờ (glass), khớp hiệu ứng backdrop-blur của #lp-nav */
.lp-pageband .headerSearch .input-group {
    border: 1px solid var(--ths-w4);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s;
}
.lp-pageband .headerSearch .input-group:focus-within {
    border-color: var(--ths-g1);
}
.lp-pageband .headerSearch input {
    /* !important bắt buộc — ghi đè rule gốc cùng !important trong style.css */
    background: transparent !important;
    border: none;
    color: var(--ths-w0);
    font-family: var(--ths-font-sans);
    padding: 10px 16px;
    box-shadow: none;
}
.lp-pageband .headerSearch input::-webkit-input-placeholder { color: var(--ths-w3); }
.lp-pageband .headerSearch input::-moz-placeholder { color: var(--ths-w3); }
.lp-pageband .headerSearch .btn-info {
    background: var(--ths-g1);
    border: none;
    color: var(--ths-n0);
    border-radius: 0;
}
.lp-pageband .headerSearch .btn-info:hover { background: var(--ths-g0); color: var(--ths-n0); }

/* A. Khung trang + mở rộng độ rộng nội dung (1080px gốc → 1320px) */
body { background: var(--sp-bg); color: var(--sp-text); }
.section-body { background: var(--sp-bg); min-height: 60vh; padding-bottom: 56px; }

@media (min-width: 992px) {
    .section-body .wraper { max-width: 1320px; }
}
@media (min-width: 1200px) {
    .section-body .wraper { width: 1320px; }
}

#body {
    background: var(--sp-surface);
    border: none;
    border-radius: var(--sp-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    color: var(--sp-text);
    padding: 36px 40px;
    margin: -28px 0 24px;
    position: relative;
    z-index: 1;
}

/* B. Tiêu đề trang + nội dung văn bản (font/cỡ chữ đã set ở khối "FONT CHỮ HỆ THỐNG" đầu file) */
#body h1, #body h2, #body h3, #body h4, #body h5, #body h6, #body .title {
    letter-spacing: -0.01em;
    color: var(--sp-text);
}
#body .alert-info {
    background: #FFF8E5;
    border: none;
    border-radius: var(--sp-radius-sm);
    color: #6B4E00;
}
#body a { color: var(--ths-g4); }
#body a:hover { color: var(--ths-g5); }

/* C. Danh sách bài viết (News/Search/Topic dùng chung) — phẳng, chỉ phân tách bằng 1 đường kẻ mảnh */
.nv-list-item { color: var(--sp-text-soft); font-size: 15px; }
.nv-list-item + .nv-list-item { border-top: 1px solid var(--sp-border); }
figure.article { background: var(--sp-bg); border-radius: var(--sp-radius-sm); overflow: hidden; }
.panel {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Tiêu đề block sidebar (Tin liên quan/Danh mục/Thống kê...) — dùng chung 1 kiểu nhỏ
   gọn, KHÔNG kế thừa thang chữ H1-H6 của trang (block.simple.tpl dùng thẳng <h3>,
   trước đây bị tính theo cỡ tiêu đề trang 22px, sai vai trò "tiêu đề widget nhỏ") */
.panel-heading,
.panel-body > h3:first-child {
    /* !important bắt buộc — ghi đè gradient/border/font !important trong style.css */
    font-family: var(--ths-font-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 2px solid var(--ths-g1) !important;
    border-radius: 0 !important;
    /* !important bắt buộc — .panel-primary > .panel-heading mặc định Bootstrap có
       color:#fff (chữ trắng), specificity 2 class cao hơn rule .panel-heading đơn này */
    color: var(--sp-text) !important;
    padding: 0 0 10px !important;
    margin: 0 0 16px;
    display: block;
}
.panel-primary > .panel-heading > a,
.panel-primary > .panel-heading > a:hover,
.panel-heading a {
    color: var(--sp-text) !important;
}
.panel-heading a:hover { color: var(--ths-g4) !important; }
.panel-body { color: var(--sp-text-soft); padding-left: 0; padding-right: 0; }

/* block.border.tpl (.well) — đồng bộ thẻ trắng/bo góc với toàn hệ thống */
.well {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    box-shadow: none;
    padding: 20px;
}
#body .pagination { margin: 0; }
#body .pagination > li > a,
#body .pagination > li > span {
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--sp-text-soft);
    margin: 0 2px;
    transition: background .15s, color .15s;
}
#body .pagination > li > a:hover {
    background: var(--sp-bg);
    color: var(--ths-g4);
}
#body .pagination > .active > a,
#body .pagination > .active > span {
    background: var(--ths-g1);
    color: var(--ths-n0);
    font-weight: 600;
}

/* D. Form chung (login/register/lostpass/contact main.tpl) — viền đơn, không glow ring */
#body .form-control {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    border-radius: var(--sp-radius-sm);
    box-shadow: none;
    padding: 11px 14px;
    min-height: 46px;
    font-size: 15px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s;
}
#body textarea.form-control {
    min-height: 120px;
    height: auto;
    resize: vertical;
}
#body .form-control:focus {
    border-color: var(--ths-g1);
    box-shadow: none;
    outline: none;
}

/* input-group (icon + ô nhập) — hợp nhất thành 1 khối liền mạch, không còn lệch
   cao/viền giữa icon và ô nhập (trước đây chỉ .form-control được CSS riêng) */
#body .input-group {
    display: flex;
    align-items: stretch;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    overflow: hidden;
    transition: border-color .15s;
}
#body .input-group:focus-within { border-color: var(--ths-g1); }
#body .input-group .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: var(--sp-bg);
    border: none;
    color: var(--sp-text-mute);
    font-size: 14px;
    padding: 0;
    transition: background-color .15s;
}
/* Vùng icon đổi nền nhẹ theo màu vàng khi cả khối đang focus — không dùng đường kẻ
   cứng phân tách nữa, tránh cảm giác icon bị "tách rời" khỏi khung vàng bao quanh */
#body .input-group:focus-within .input-group-addon {
    background: var(--ths-gb);
    color: var(--ths-g4);
}
#body .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    outline: none;
}
#body .input-group .form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

/* select — bỏ mũi tên mặc định trình duyệt (mỗi nơi 1 kiểu), thay icon chevron đồng bộ */
#body select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Icon cho nút — input/button không lồng được thẻ con, dùng background-image */
#body .btn-primary {
    background-color: var(--ths-g1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23060C1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px center;
    border: none;
    color: var(--ths-n0);
    border-radius: var(--sp-radius-sm);
    font-weight: 600;
    padding: 12px 28px 12px 42px;
    transition: background-color .15s, transform .1s;
}
#body .btn-primary:hover {
    background-color: var(--ths-g0);
    color: var(--ths-n0);
    transform: translateY(-1px);
}
#body .btn-default {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%234B5468' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    border: 1px solid var(--sp-border);
    color: var(--sp-text-soft);
    border-radius: var(--sp-radius-sm);
    padding: 12px 24px 12px 40px;
}
#body .btn-default:hover { border-color: var(--ths-g1); color: var(--ths-g4); }
#body label { color: var(--sp-text-soft); font-size: 14px; font-weight: 500; }

/* Checkbox/radio hiện đại — accent-color không cần đổi markup */
#body input[type="checkbox"],
#body input[type="radio"] {
    accent-color: var(--ths-g1);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (max-width: 767px) {
    #body { padding: 24px 20px; margin: -20px 0 16px; border-radius: var(--sp-radius-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   GOLD TICKER — dải chạy chữ bên dưới hero
   ═══════════════════════════════════════════════════════════════ */

.lp-ticker {
    background: var(--ths-g1);
    padding: 12px 0;
    overflow: hidden;
}

.lp-ticker-track {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: max-content;
    animation: lp-ticker-scroll 28s linear infinite;
}

.lp-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--ths-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ths-n0);
    padding: 0 32px;
}

.lp-ticker-item::after {
    content: '\25C6';
    font-size: 6px;
    opacity: 0.4;
}

@keyframes lp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}