/**
 * ThongLand Real Estate Design System (`hello-thongland/assets/css/main.css`)
 * Exact Design Tokens & Grid Architecture from nhadat24h.net
 */

@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/lexend-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tl-primary: #0F5C22;
    --tl-primary-dark: #18752D;
    --tl-primary-deeper: #083D15;
    --tl-navy: #092B14;
    --tl-gold: #D4941A;
    --tl-gold-light: #F6CC4B;
    --tl-gold-soft: #FDF8EC;
    --tl-red: #D91B1B;
    --tl-vip1: #A51513;
    --tl-orange: #D9530F;
    --tl-green: #18752D;
    --tl-bg: #F1F4F1;
    --tl-text: #1E2923;
    --tl-radius: 12px;
    --tl-shadow: 0 2px 12px rgba(9, 43, 20, 0.07);
}

.tl-svg-icon {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body.tl-nhadat24h-body {
    margin: 0;
    padding: 0;
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tl-text);
    background-color: var(--tl-bg);
}

a {
    color: var(--tl-primary);
    transition: color 0.15s ease;
}
a:hover {
    color: var(--tl-red);
}

/* ==========================================================================
   1. FIXED TOPBAR (.w3-top.w3-theme-d2)
   ========================================================================== */
.tl-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    background: #ffffff;
    border-bottom: 1px solid #d9d9d9;
    box-shadow: var(--tl-shadow);
    z-index: 9999;
}
.tl-topbar-inner {
    max-width: 1170px;
    height: 46px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tl-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tl-top-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--tl-primary);
    color: #fff !important;
}
.tl-top-loc-btn {
    background: #f2f6fa;
    border: 1px solid #cfe0f0;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tl-primary);
    cursor: pointer;
}
.tl-top-link {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}
.tl-top-link:hover {
    background: #f0f4f8;
    color: var(--tl-primary);
}

/* 3-Second Live Search Box */
.divtopsearch {
    position: relative;
    flex: 1 1 340px;
    max-width: 420px;
}
.tl-topsearch-form {
    display: flex;
    align-items: center;
    background: #f3f5f8;
    border: 1px solid #d0d7de;
    border-radius: 20px;
    padding: 2px 10px;
}
.tl-topsearch-form input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 5px 6px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.tl-topsearch-form button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}
.toplistketquatimkiem {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    border: 1px solid #d9d9d9;
    max-height: 380px;
    overflow-y: auto;
    z-index: 10001;
}
.tl-sug-group {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.tl-sug-group > span {
    display: block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
}
.tl-sug-group a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}
.tl-sug-group a:hover {
    background: #f0f7ff;
    color: var(--tl-primary);
}

.tl-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tl-top-icon-btn, .tl-top-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5f7fa;
    border: 1px solid #e1e6eb;
    border-radius: 6px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}
.tl-badge {
    background: var(--tl-red);
    color: #fff;
    font-size: 11px;
    padding: 0 5px;
    border-radius: 10px;
    font-weight: 700;
}

/* Topbar Dropdowns */
.tl-top-dropdown {
    position: relative;
}
.tl-dropdown-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.16);
    border: 1px solid #d9d9d9;
    z-index: 10002;
}
.tl-top-dropdown:hover .tl-dropdown-panel {
    display: block;
}
.tl-saved-panel {
    width: 320px;
}
.tl-panel-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}
.tl-panel-tabs button {
    flex: 1;
    border: none;
    background: #f8f9fa;
    padding: 8px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tl-panel-tabs button.active {
    background: #fff;
    color: var(--tl-primary);
    border-bottom: 2px solid var(--tl-primary);
}
.tl-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
.tl-mini-item a {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    text-decoration: none;
    border-bottom: 1px solid #f1f1f1;
}
.tl-mini-item img {
    width: 54px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-mini-item strong {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #333;
}
.tl-mini-item span {
    font-size: 12px;
    color: var(--tl-red);
    font-weight: 700;
}
.tl-mini-more a {
    display: block;
    text-align: center;
    padding: 8px;
    font-weight: 700;
    background: #f2f7fc;
    text-decoration: none;
}
.tl-empty-item {
    padding: 16px;
    text-align: center;
    color: #777;
    font-size: 12px;
}
.tl-user-panel {
    width: 220px;
    padding: 6px 0;
}
.tl-user-panel a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}
.tl-user-panel a:hover {
    background: #f2f6fa;
}

/* ==========================================================================
   2. HEADER BRAND & NAVY NAVIGATION (#header)
   ========================================================================== */
#header {
    margin-top: 46px;
}
.header-c {
    background: #ffffff;
    padding: 10px 0;
}
.hd-in-c {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tl-brand-box {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: transparent;
    color: var(--tl-primary) !important;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}
.logo:hover {
    transform: scale(1.04);
}
.logo.tl-vector-logo img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(9, 43, 20, 0.18));
}
.tl-logo-mark {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
}
.logo small {
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 0.5px;
}
.logodetail .lable1 {
    font-size: 19px;
    font-weight: 800;
    color: var(--tl-primary);
    text-decoration: none;
    display: block;
    letter-spacing: 0.3px;
}
.logodetail .lable2 {
    font-size: 13px;
    font-weight: 700;
    color: #B3770C;
}
.logodetail .lable3 {
    margin: 2px 0 0;
    font-size: 12px;
    color: #526056;
}
.dv-banner-1 {
    flex: 1;
    max-width: 650px;
}
.tl-top-promo-banner {
    background: linear-gradient(115deg, #083D15 0%, #0F5C22 58%, #18752D 100%);
    border: 1px solid rgba(246, 204, 75, 0.42);
    color: #fff;
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(8, 61, 21, 0.16);
}
.tl-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #F6CC4B 0%, #D4941A 100%);
    color: #083D15;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}
.tl-top-promo-banner strong {
    display: block;
    font-size: 14px;
    color: #F6CC4B;
}
.tl-top-promo-banner small {
    font-size: 11px;
    opacity: 0.94;
}
.tl-promo-cta {
    background: linear-gradient(135deg, #F6CC4B 0%, #D4941A 100%);
    color: #083D15 !important;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    padding: 7px 15px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Deep Forest Navigation Bar (.header-f) */
.header-f {
    background: linear-gradient(90deg, #072310 0%, #092B14 50%, #0D3B1B 100%);
    border-top: 1px solid rgba(212, 148, 26, 0.35);
    border-bottom: 2px solid var(--tl-gold);
    min-height: 40px;
}
.header-in-f {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tl-mobile-menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: inherit;
    cursor: pointer;
}
.tl-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.tl-main-menu > li {
    position: relative;
}
.tl-main-menu > li > a {
    display: block;
    padding: 8px 14px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.tl-main-menu > li:hover > a {
    background: var(--tl-primary);
}
.tl-sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 520px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border: 1px solid #d9d9d9;
    padding: 10px;
    margin: 0;
    list-style: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 10px;
    z-index: 9990;
}
.tl-main-menu > li.has-sub:hover .tl-sub-menu {
    display: grid;
}
.tl-sub-menu li a {
    display: block;
    padding: 6px 8px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
}
.tl-sub-menu li a:hover {
    background: #eef6fc;
    color: var(--tl-primary);
}

.tl-nav-ctas {
    display: flex;
    align-items: center;
    gap: 8px;
}
.a-btl-uload {
    display: inline-block;
    background: var(--tl-red);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 28px;
    padding: 2px 14px;
    border-radius: 4px;
    text-decoration: none;
}
.a-btl-uload:hover {
    filter: brightness(1.08);
}
.a-btl-uload.green {
    background: var(--tl-green);
}

/* ==========================================================================
   3. MAIN 1170px TWO-COLUMN GRID (#content > .ct-in-all = 852px + 300px)
   ========================================================================== */
.ct-in-all {
    max-width: 1170px;
    margin: 15px auto;
    padding: 0 10px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.ct-in-l {
    width: 852px;
    flex: 1 1 852px;
    min-width: 0;
}
.ct-in-r {
    width: 300px;
    flex: 0 0 300px;
}

.boxwhite {
    background: #ffffff;
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
    margin-bottom: 15px;
}

/* Breadcrumbs (.dv-breadcrumb) */
.dv-breadcrumb {
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    box-shadow: var(--tl-shadow);
}
.tl-bc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
}
.tl-bc-list a {
    text-decoration: none;
    color: var(--tl-primary);
}
.tl-bc-list .sep {
    color: #999;
    margin-left: 4px;
}

/* Quickbar & Section Headers */
.tl-home-quickbar {
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tl-qb-label {
    font-weight: 700;
    color: var(--tl-red);
}
.tl-home-quickbar a {
    background: #f2f6fa;
    border: 1px solid #d7e3f0;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--tl-primary);
}
.tl-home-quickbar a.cc-chip {
    background: #fff3cd;
    border-color: #ffecb5;
    color: #b71c1c;
}

.tl-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--tl-primary);
}
.tl-sec-header h2 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
}
.tl-sec-header h2 a {
    text-decoration: none;
    color: var(--tl-primary);
}
.tl-view-all {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* Homepage Project Carousel (#homeBoxDuAn) */
#homeBoxDuAn {
    padding: 15px;
}
.tl-projects-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.tl-duan-card {
    border: 1px solid #e6ebf0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.tl-duan-img {
    display: block;
    position: relative;
    height: 145px;
    overflow: hidden;
}
.tl-duan-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
}
.tl-duan-card:hover .tl-duan-img img {
    transform: scale(1.05);
}
.tl-duan-price {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(232, 2, 2, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.tl-duan-body {
    padding: 10px;
}
.tl-duan-body h3 {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.35;
}
.tl-duan-body h3 a {
    text-decoration: none;
    color: var(--tl-primary);
}
.tl-duan-loc {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-duan-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #555;
}
.tl-duan-st {
    color: var(--tl-green);
    font-weight: 600;
}

/* Section Bar with 3 Tabs (.menuTopchoise) */
.tl-section-bar {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.tl-main-h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--tl-primary);
    text-transform: uppercase;
}
.tl-main-h2 a {
    text-decoration: none;
    color: inherit;
}
.menuTopchoise {
    display: flex;
    align-items: center;
    gap: 6px;
}
.menuTopchoise a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f0f3f6;
}
.menuTopchoise a.lb-alink-selected {
    background: var(--tl-primary);
    color: #ffffff;
}

/* ==========================================================================
   4. PROPERTY LISTING CARD (.dv-item — 200x210px image + pn1 + pn2)
   ========================================================================== */
.dv-item {
    background: #ffffff;
    border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow);
    margin-bottom: 14px;
    display: flex;
    overflow: hidden;
    border: 1px solid transparent;
}
.dv-item.vip-3, .dv-item.vip-2 {
    background: #fef9f5;
    border-color: #f5d4c2;
}
.dv-img {
    width: 200px;
    min-height: 210px;
    flex: 0 0 200px;
    position: relative;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    background: #eee;
}
.dv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.i-bds-cc-1 {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--tl-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.tl-vip-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff9800;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.tl-vip-badge.vip-b-3 {
    background: linear-gradient(90deg, #d50000, #ff6d00);
}
.tl-img-meta {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #fff;
}
.tl-img-count, .tl-has-video {
    background: rgba(0,0,0,0.65);
    padding: 2px 7px;
    border-radius: 4px;
}

.dv-txt {
    flex: 1;
    display: flex;
    min-width: 0;
}
.dv-txt .pn1 {
    flex: 1;
    padding: 12px 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tl-card-title {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
}
.tl-card-title a {
    text-decoration: none;
}
.a-title-110 {
    color: #e22233 !important;
    font-weight: 700;
    text-transform: uppercase;
}
.a-title-100 {
    color: var(--tl-vip1) !important;
    font-weight: 700;
    text-transform: uppercase;
}
.a-title-99 {
    color: var(--tl-red) !important;
    font-weight: 700;
    text-transform: uppercase;
}
.a-title-0 {
    color: var(--tl-primary) !important;
    font-weight: 700;
}
.tl-stars {
    color: #fbbc04;
    margin-right: 3px;
}
.dv-item .time {
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    color: #999;
    margin-left: 6px;
}

.tl-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.a-txt-cl1 {
    color: var(--tl-red);
    font-size: 19px;
    font-weight: 700;
}
.a-txt-cl2 {
    color: var(--tl-primary);
    font-size: 15px;
    font-weight: 700;
}
.tl-unit-price {
    font-size: 12px;
    color: #666;
}
.tl-card-addr {
    font-size: 12px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.reviewproperty1 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
}
.lb-des {
    margin: 0 0 8px;
    font-size: 13px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review1 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.review1 .ex3 {
    background: #eef4fa;
    color: var(--tl-primary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
}

/* Right Broker Column inside Card (.pn2) */
.dv-txt .pn2 {
    width: 168px;
    flex: 0 0 168px;
    border-left: 1px dashed #e2e6ea;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.pn2 .divImage img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tl-primary);
}
.pn2 .fullname {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    margin-top: 4px;
    display: block;
}
.check247 {
    display: inline-block;
    font-size: 11px;
    color: var(--tl-green);
    font-weight: 600;
    margin-top: 2px;
}
.divbtntuontac {
    width: 100%;
    margin-top: 8px;
}
.preCall {
    width: 100%;
    background: var(--tl-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 5px;
}
.preCall:hover {
    background: var(--tl-primary-dark);
}
.tl-pn2-sub-btns {
    display: flex;
    gap: 5px;
}
.preChat {
    flex: 1;
    background: #eef6fc;
    border: 1px solid #bcd6ee;
    color: var(--tl-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    padding: 4px;
    text-decoration: none;
}
.luutin {
    background: #fff;
    border: 1px solid #d0d7de;
    color: #555;
    border-radius: 5px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 13px;
}
.luutin.active {
    background: #ffebee;
    border-color: var(--tl-red);
    color: var(--tl-red);
}

.tl-more-wrap {
    text-align: center;
    margin: 10px 0;
}
.tl-btn-more {
    display: inline-block;
    background: #fff;
    color: var(--tl-primary);
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 20px;
    box-shadow: var(--tl-shadow);
    text-decoration: none;
}

/* ==========================================================================
   5. RIGHT SIDEBAR (300px — #boxsearch, AI Assistant, Brokers, Scrollable Lists)
   ========================================================================== */
.dv-boxsearch-r {
    padding: 12px;
}
.tl-search-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.tl-s-tab {
    flex: 1;
    border: none;
    background: #eef2f6;
    color: #333;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}
.tl-s-tab.active {
    background: var(--tl-primary);
    color: #fff;
}
.tl-sb-field {
    margin-bottom: 8px;
}
.tl-sb-field input, .tl-sb-field select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
}
.tl-sb-check {
    font-size: 13px;
    margin: 8px 0;
}
.tl-sb-actions {
    display: flex;
    gap: 8px;
}
.tl-btn-search-submit {
    flex: 1;
    background: var(--tl-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 36px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tl-btn-cc-link {
    background: #fff3cd;
    border: 1px solid #ffecb5;
    color: #b71c1c !important;
    font-weight: 700;
    font-size: 13px;
    padding: 0 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.tl-btn-dat-mua {
    width: 100%;
    margin-top: 10px;
    background: var(--tl-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.tl-widget-box, .tl-ai-box {
    padding: 12px;
}
.tl-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tl-primary);
    border-bottom: 2px solid var(--tl-primary);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

/* AI Chat Box */
.tl-ai-messages {
    max-height: 190px;
    overflow-y: auto;
    background: #f7f9fc;
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    margin-bottom: 8px;
}
.tl-ai-msg {
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 6px;
}
.tl-ai-msg.bot {
    background: #fff;
    border: 1px solid #e1e8f0;
}
.tl-ai-msg.user {
    background: var(--tl-primary);
    color: #fff;
    text-align: right;
}
.tl-ai-results {
    margin: 6px 0 0;
    padding-left: 16px;
}
.tl-ai-results li {
    margin-bottom: 4px;
}
.tl-ai-results span {
    color: var(--tl-red);
    font-weight: 700;
}
.tl-ai-input-row {
    display: flex;
    gap: 6px;
}
.tl-ai-input-row input {
    flex: 1;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
}
.tl-ai-input-row button {
    background: var(--tl-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Featured Brokers (.dv-item-mgnb) */
.dv-item-mgnb {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.dv-item-mgnb:last-child {
    border-bottom: none;
}
.tl-mg-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.tl-mg-name {
    font-weight: 700;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}
.tl-mg-area {
    font-size: 11px;
    color: #666;
    margin: 2px 0 4px;
}
.tl-mg-actions {
    display: flex;
    gap: 6px;
    font-size: 11px;
}
.tl-mg-call {
    background: #eef6fc;
    color: var(--tl-primary);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.tl-mg-zalo {
    background: #e8f5e9;
    color: var(--tl-green);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

.tl-price-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tl-price-grid-2 a {
    background: #f5f8fb;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
}
.tl-price-grid-2 a:hover {
    background: var(--tl-primary);
    color: #fff;
}

.scroll450 {
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tl-area-links li {
    border-bottom: 1px solid #f2f2f2;
}
.tl-area-links a {
    display: block;
    padding: 6px 4px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
}
.tl-area-links a:hover {
    color: var(--tl-primary);
}
.tl-sidebar-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   6. ARCHIVE, SINGLE DETAIL, PROJECTS, MAP & COMPARISON PAGES
   ========================================================================== */
.tl-archive-head {
    padding: 15px;
}
.tl-arch-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.tl-arch-h1 {
    margin: 0;
    font-size: 18px;
    color: var(--tl-primary);
}
.tl-arch-count {
    font-size: 13px;
    color: #555;
}
.tl-arch-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.tl-arch-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tl-act-btn {
    background: #f0f4f8;
    border: 1px solid #d0d7de;
    color: #333;
    padding: 5px 12px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tl-act-btn.red { background: var(--tl-red); color: #fff; border-color: var(--tl-red); }
.tl-act-btn.blue { background: var(--tl-primary); color: #fff; border-color: var(--tl-primary); }
.tl-act-btn.green { background: var(--tl-green); color: #fff; border-color: var(--tl-green); }

.tl-sort-form select {
    height: 32px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0 8px;
    font-family: inherit;
    font-size: 12px;
}
.tl-arch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tl-arch-chips a {
    background: #f5f7fa;
    border: 1px solid #e1e6eb;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
}
.tl-arch-chips a.active, .tl-arch-chips a:hover {
    background: var(--tl-primary);
    color: #fff;
    border-color: var(--tl-primary);
}

/* Single Detail Page (.dv-ct-detail) */
.dv-ct-detail {
    padding: 18px;
}
.tl-gallery-main {
    position: relative;
    height: 410px;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}
.tl-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-photo-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 14px;
}
.tl-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
}
.tl-thumb-btn {
    border: 2px solid transparent;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    width: 86px;
    height: 60px;
    cursor: pointer;
    background: none;
}
.tl-thumb-btn.active {
    border-color: var(--tl-red);
}
.tl-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tl-detail-h1 {
    font-size: 19px;
    line-height: 1.4;
    margin: 14px 0 8px;
}
.tl-detail-subbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #666;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.tl-report-btn {
    margin-left: auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    color: #777;
}
.tl-detail-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #f8fafd;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
}
.tl-dp-item small {
    display: block;
    font-size: 11px;
    color: #777;
}
.tl-detail-price {
    color: var(--tl-orange);
    font-size: 20px;
    font-weight: 700;
}
.tl-detail-area {
    color: var(--tl-primary);
    font-size: 18px;
    font-weight: 700;
}
.tl-dp-sub {
    display: block;
    font-size: 11px;
    color: #666;
}
.tl-dp-actions {
    display: flex;
    gap: 8px;
}
.tl-detail-address {
    font-size: 13px;
    padding: 8px 0;
    color: #333;
}
.tl-sub-heading {
    font-size: 16px;
    color: var(--tl-primary);
    border-left: 4px solid var(--tl-primary);
    padding-left: 10px;
    margin: 18px 0 10px;
}
.tl-spec-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
    background: #fbfcfe;
    border: 1px solid #e6ecf2;
    border-radius: 8px;
    padding: 12px 16px;
}
.tl-spec-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e5e9ef;
    padding: 5px 0;
    font-size: 13px;
}
.tl-spec-row span {
    color: #666;
}
.tl-entry-content {
    line-height: 1.7;
    color: #222;
}
.tl-detail-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}
.tl-broker-detail-card, .tl-inline-lead-card {
    background: #f8fafd;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    padding: 14px;
}
.tl-broker-detail-card {
    display: flex;
    gap: 12px;
    align-items: center;
}
.tl-bdc-avatar img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tl-primary);
}
.tl-bdc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tl-primary);
    text-decoration: none;
}
.tl-bdc-sub, .tl-bdc-area {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}
.tl-bdc-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.tl-bdc-more {
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    align-self: center;
}
.tl-inline-lead-card input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
}

/* Pagination */
.tl-pagination ul {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.tl-pagination a, .tl-pagination span {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--tl-shadow);
    text-decoration: none;
    font-weight: 600;
    color: #333;
}
.tl-pagination .current {
    background: var(--tl-primary);
    color: #fff;
}

.tl-seo-article {
    padding: 16px;
    font-size: 13px;
    color: #555;
}
.tl-seo-article h2 {
    font-size: 15px;
    color: var(--tl-primary);
    margin-top: 0;
}

/* Projects Archive Row & Broker Hero */
.tl-duan-row {
    display: flex;
    gap: 16px;
    padding: 12px;
}
.tl-duan-row-img {
    width: 240px;
    height: 165px;
    flex: 0 0 240px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.tl-duan-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-duan-row-info h2 {
    margin: 0 0 6px;
    font-size: 16px;
}
.tl-duan-row-info h2 a {
    text-decoration: none;
}
.tl-duan-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    font-size: 12px;
    margin: 8px 0;
}

.tl-broker-hero {
    display: flex;
    gap: 18px;
    padding: 18px;
    align-items: center;
}
.tl-bh-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--tl-primary);
}
.tl-bh-name {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--tl-primary);
}
.tl-bh-company, .tl-bh-area {
    font-size: 13px;
    color: #444;
    margin-bottom: 4px;
}
.tl-bh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Map Portal (/map) */
.tl-map-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e9ef;
    margin-bottom: 12px;
}
.tl-map-filter-bar select {
    height: 34px;
    border: 1px solid #ccd5e0;
    border-radius: 5px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 13px;
}
.tl-map-split-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 12px;
    height: 620px;
}
.tl-map-canvas {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
}
.tl-map-sidebar {
    overflow-y: auto;
    border: 1px solid #e5e9ef;
    border-radius: 8px;
    padding: 8px;
    background: #f9fbfd;
}
.tl-map-side-card {
    display: flex;
    gap: 10px;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.tl-map-side-card img {
    width: 76px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-map-side-card a {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tl-map-meta {
    font-size: 12px;
    color: var(--tl-red);
    margin-top: 2px;
}
.tl-map-price-pin span {
    display: inline-block;
    background: var(--tl-primary);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.tl-map-price-pin.vip-3 span, .tl-map-price-pin.vip-2 span {
    background: var(--tl-red);
}

/* Comparison Table (/VET) & Pricing Table (/baogiavip) */
.tl-vet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.tl-vet-table th, .tl-vet-table td {
    border: 1px solid #e1e6eb;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}
.tl-vet-table th {
    background: #f2f6fa;
    color: var(--tl-primary);
}
.tl-vet-thumb {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.tl-vet-thumb img {
    width: 70px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
}

/* Frontend Submission Form ([tl_dang_tin]) */
.tl-form-sub {
    font-size: 15px;
    color: var(--tl-primary);
    background: #f2f6fa;
    padding: 8px 12px;
    border-left: 4px solid var(--tl-primary);
    margin: 18px 0 12px;
}
.tl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tl-field label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}
.tl-field input, .tl-field select, .tl-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccd5e0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
}
.tl-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tl-news-item h3 {
    font-size: 14px;
    margin: 0 0 6px;
}
.tl-news-item h3 a {
    text-decoration: none;
}
.tl-news-item p {
    font-size: 12px;
    color: #555;
    margin: 0;
}

/* ==========================================================================
   7. PRE-FOOTER SEO MATRIX (.dv-ft-dm) & FOOTER (#footer)
   ========================================================================== */
.dv-ft-dm {
    background: #fbfbfb;
    border-top: 1px solid #cdcdcd;
    padding: 22px 0;
    margin-top: 25px;
}
.tl-seo-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.tl-seo-col h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--tl-primary);
    text-transform: uppercase;
}
.tl-seo-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tl-seo-col li {
    margin-bottom: 6px;
}
.tl-seo-col a {
    text-decoration: none;
    color: #444;
    font-size: 13px;
}
.tl-seo-col a:hover {
    color: var(--tl-primary);
}

#footer {
    background: var(--tl-primary);
    color: #ffffff;
}
.ft-top {
    background: var(--tl-primary-dark);
    padding: 10px 0;
}
.tl-ft-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 auto;
}
.tl-ft-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}
.ft-ct {
    padding: 20px 0;
}
.tl-ft-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
}
.tl-ft-company h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: #ffeb3b;
}
.tl-ft-company p {
    margin: 4px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
}
.tl-ft-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 210px;
}
.tl-ft-cta-btn {
    background: var(--tl-red);
    color: #fff !important;
    text-align: center;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.tl-ft-cta-btn.outline {
    background: transparent;
    border: 1px solid #fff;
}
.ft-dow {
    background: var(--tl-primary-deeper);
    padding: 10px 0;
    font-size: 12px;
    text-align: center;
}
.ft-dow .ct-in-all {
    justify-content: center;
    margin: 0 auto;
}

/* Modals */
.tl-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10010;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tl-modal-backdrop.open {
    display: flex;
}
.tl-modal-box {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.tl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--tl-primary);
    color: #fff;
}
.tl-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.tl-modal-body {
    padding: 16px;
}
.tl-chip-hot {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--tl-primary);
    color: var(--tl-primary);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin: 2px;
}
.tl-province-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.tl-province-grid a {
    padding: 6px 8px;
    background: #f5f7fa;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 12px;
}
.tl-province-grid a:hover {
    background: var(--tl-primary);
    color: #fff;
}

/* ==========================================================================
   8. PHASE 2 COMPONENTS (Multi-select, Video Strip, 360 Pano, Distance, Loan Calc, Auth, News, Lightbox)
   ========================================================================== */

/* Haversine Distance Badge (.lbhowfar) */
.lbhowfar {
    display: inline-block;
    background: #eef7ff;
    color: #0774b9;
    border: 1px solid #cce3f6;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Multi-select Checkbox Dropdown (.tl-multiselect) & Custom Area Range */
.tl-multiselect {
    position: relative;
    margin-bottom: 10px;
}
.tl-ms-trigger {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #ccd5e0;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tl-ms-trigger::after {
    content: '▾';
    color: #777;
    font-size: 12px;
}
.tl-ms-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid #ccd5e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    max-height: 220px;
    overflow-y: auto;
    z-index: 10005;
    padding: 6px 0;
}
.tl-multiselect.open .tl-ms-panel {
    display: block;
}
.tl-ms-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.tl-ms-item:hover {
    background: #f0f7ff;
}
.tl-sb-range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: -4px;
    margin-bottom: 10px;
}
.tl-sb-range-row input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccd5e0;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
}

/* Sidebar Sale/Rent Price Tabs */
.tl-sb-price-tabs {
    display: flex;
    border-bottom: 1px solid #e6ebf0;
    background: #f8f9fa;
}
.tl-sb-price-tabs button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
}
.tl-sb-price-tabs button.active {
    background: #fff;
    color: var(--tl-primary);
    border-bottom: 2px solid var(--tl-primary);
}
.tl-sb-rec-list {
    padding: 8px 12px;
}
.tl-sb-rec-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e6ebf0;
    text-decoration: none;
}
.tl-sb-rec-item:last-child {
    border-bottom: none;
}
.tl-sb-rec-item img {
    width: 68px;
    height: 52px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.tl-sb-rec-item strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #333;
    line-height: 1.35;
}
.tl-sb-rec-item span {
    font-size: 12px;
    color: var(--tl-red);
    font-weight: 700;
}

/* Homepage Video Review Strip (#preTopVidreview) */
.tl-video-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tl-video-card {
    border: 1px solid #e6ebf0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.tl-video-thumb {
    display: block;
    position: relative;
    height: 130px;
    overflow: hidden;
}
.tl-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(232,2,2,0.88);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.tl-video-price {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0,0,0,0.75);
    color: #ffeb3b;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}
.tl-video-body {
    padding: 8px 10px;
}
.tl-video-body h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tl-video-body h3 a {
    text-decoration: none;
    color: #333;
}

/* Homepage 360 Panorama Showcase (.boxPano360) */
.tl-pano-stage {
    position: relative;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(120deg, #003354 0%, #0774b9 50%, #1d8a4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-pano-overlay {
    text-align: center;
    color: #fff;
    padding: 20px;
    max-width: 620px;
}
.tl-pano-compass {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}
.tl-pano-overlay strong {
    display: block;
    font-size: 17px;
    margin-bottom: 6px;
    color: #ffeb3b;
}
.tl-pano-overlay p {
    font-size: 13px;
    margin: 0 0 12px;
    opacity: 0.92;
}
.tl-pano-hotspots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.tl-pano-spot {
    background: #fff;
    color: var(--tl-primary) !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Single Detail Action Bar (.panelActionContent) & Loan Calculator (#tl-loan-calc) */
.panelActionContent {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafd;
    border-bottom: 1px solid #e6ebf0;
}
.panelActionContent button,
.panelActionContent .tl-action-chip {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 18px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    cursor: pointer;
}
.panelActionContent button:hover,
.panelActionContent .tl-action-chip:hover {
    border-color: var(--tl-primary);
    color: var(--tl-primary);
}
.tl-loan-calc-box {
    margin: 16px;
    padding: 16px;
    background: #f4f9fd;
    border: 1px solid #cfe3f5;
    border-radius: 10px;
}
.tl-loan-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    align-items: center;
}
.tl-loan-controls input[type="range"] {
    width: 100%;
    margin-top: 6px;
}
.tl-loan-results {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #dde8f2;
}
.tl-loan-res-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #e6ebf0;
    font-size: 13px;
}
.tl-loan-res-item:last-child {
    border-bottom: none;
}

/* Project Filter Bar & Project Detail Tabs */
.tl-duan-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.tl-duan-filter-bar select,
.tl-duan-filter-bar input {
    padding: 7px 10px;
    border: 1px solid #ccd5e0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
}
.tl-duan-filter-bar input {
    flex: 1;
    min-width: 200px;
}
.tl-project-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: #f2f6fa;
    border-radius: 8px;
    margin-bottom: 16px;
    position: sticky;
    top: 48px;
    z-index: 90;
}
.tl-project-tabs a {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    background: #fff;
}
.tl-project-tabs a.active,
.tl-project-tabs a:hover {
    background: var(--tl-primary);
    color: #fff;
}

/* Auth Portal (/DKTV-DT) */
.tl-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 18px;
}
.tl-auth-card {
    padding: 20px;
}
.tl-auth-card-header h2 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--tl-primary);
}
.tl-auth-card-header p {
    margin: 0 0 14px;
    font-size: 12px;
    color: #666;
}
.tl-auth-form .tl-field {
    margin-bottom: 12px;
}
.tl-auth-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.tl-auth-submit {
    width: 100%;
    border: none;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.tl-auth-benefits {
    margin-top: 16px;
    padding: 12px;
    background: #f4f9fd;
    border-radius: 8px;
    font-size: 12px;
}
.tl-auth-benefits ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.tl-auth-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tl-step-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f8fafd;
    padding: 12px;
    border-radius: 8px;
}
.tl-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tl-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tl-alert-error {
    background: #fff2f2;
    border: 1px solid #f5c2c7;
    color: #b02a37;
}

/* News Magazine (/tin-tuc) */
.tl-news-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px;
    padding: 15px;
}
.tl-news-hero-img {
    display: block;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
}
.tl-news-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-news-badge {
    display: inline-block;
    background: var(--tl-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.tl-news-hero-body h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.35;
}
.tl-news-hero-body h2 a {
    text-decoration: none;
    color: #222;
}
.tl-news-meta {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}
.tl-news-readmore {
    display: inline-block;
    margin-top: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.tl-news-row-card {
    display: flex;
    gap: 14px;
    padding: 12px;
}
.tl-news-row-thumb {
    width: 210px;
    height: 135px;
    flex: 0 0 210px;
    border-radius: 8px;
    overflow: hidden;
}
.tl-news-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-news-row-content h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.tl-news-row-content h3 a {
    text-decoration: none;
    color: var(--tl-primary);
}

/* Sortable /VET Comparison Controls */
.tl-vet-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tl-vet-tabs {
    display: flex;
    gap: 6px;
}
.tl-vet-tab {
    border: 1px solid #ccd5e0;
    background: #f5f7fa;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.tl-vet-tab.active {
    background: var(--tl-primary);
    color: #fff;
    border-color: var(--tl-primary);
}
.tl-vet-sort-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}
.tl-vet-sort-btn {
    border: 1px solid #d0d7de;
    background: #fff;
    padding: 4px 10px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.tl-vet-sort-btn.active {
    background: #eef6fc;
    border-color: var(--tl-primary);
    color: var(--tl-primary);
}

/* Fullscreen Touch Lightbox (.tl-lightbox-overlay) */
.tl-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10050;
    align-items: center;
    justify-content: center;
}
.tl-lightbox-overlay.open {
    display: flex;
}
.tl-lb-img {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
}
.tl-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
}
.tl-lb-prev, .tl-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
}
.tl-lb-prev { left: 16px; }
.tl-lb-next { right: 16px; }
.tl-lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

/* ==========================================================================
   9. MOBILE-FIRST NATIVE APP SHELL (PWA) & RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Desktop defaults for Mobile App elements */
.tl-mobile-app-subbar,
.tl-mobile-drawer,
.tl-filter-sheet-header,
.tl-filter-sheet-backdrop,
.tl-mobile-conversion-bar,
.panelLHMobile {
    display: none;
}

#back2Top {
    position: fixed;
    right: 18px;
    bottom: 68px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tl-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 9990;
}

@media (max-width: 1124px) {
    .ct-in-all {
        flex-direction: column;
    }
    .ct-in-l, .ct-in-r {
        width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    body.tl-sheet-locked {
        overflow: hidden;
    }
    .w3-hide-small {
        display: none !important;
    }
    .tl-mobile-menu-toggle {
        display: inline-block;
    }
    .tl-main-menu {
        display: none;
    }

    /* 1. Sticky Mobile App Quick-Filter Sub-Bar */
    .tl-mobile-app-subbar {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        background: #ffffff;
        border-bottom: 1px solid #e1e6eb;
        padding: 7px 10px;
        position: sticky;
        top: 46px;
        z-index: 9980;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tl-mobile-app-subbar::-webkit-scrollbar {
        display: none;
    }
    .tl-app-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 11px;
        border-radius: 16px;
        background: #f0f4f8;
        border: 1px solid #d8e2ec;
        color: #333;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        font-family: inherit;
        flex-shrink: 0;
    }
    .tl-app-chip.filter-btn {
        background: var(--tl-primary);
        border-color: var(--tl-primary);
        color: #fff;
    }

    /* 2. Slide-Out Native Mobile App Drawer (#tl-mobile-drawer) */
    .tl-mobile-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10030;
        pointer-events: none;
    }
    .tl-mobile-drawer.open {
        pointer-events: auto;
    }
    .tl-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .tl-mobile-drawer.open .tl-drawer-backdrop {
        opacity: 1;
    }
    .tl-drawer-panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 84vw;
        max-width: 320px;
        background: #fff;
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    }
    .tl-mobile-drawer.open .tl-drawer-panel {
        transform: translateX(0);
    }
    .tl-drawer-header {
        background: linear-gradient(135deg, var(--tl-primary) 0%, var(--tl-primary-deeper) 100%);
        color: #fff;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tl-drawer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .tl-drawer-logo {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 16px;
    }
    .tl-drawer-brand strong {
        display: block;
        font-size: 14px;
    }
    .tl-drawer-brand small {
        font-size: 11px;
        opacity: 0.85;
    }
    .tl-drawer-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 26px;
        cursor: pointer;
    }
    .tl-drawer-user {
        padding: 12px 14px;
        background: #f5f8fc;
        border-bottom: 1px solid #e4ebf2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tl-drawer-auth-btn {
        text-align: center;
        padding: 7px 10px;
        border-radius: 6px;
        background: #fff;
        border: 1px solid var(--tl-primary);
        color: var(--tl-primary);
        font-weight: 700;
        font-size: 12px;
        text-decoration: none;
    }
    .tl-drawer-auth-btn.primary {
        background: var(--tl-red);
        border-color: var(--tl-red);
        color: #fff !important;
    }
    .tl-drawer-nav {
        padding: 10px 14px;
    }
    .tl-drawer-sec-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: #888;
        margin: 12px 0 6px;
    }
    .tl-drawer-nav a {
        display: block;
        padding: 9px 8px;
        color: #222;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 1px solid #f2f4f7;
    }
    .tl-drawer-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
    }
    .tl-drawer-grid-2 a {
        font-size: 12px;
        font-weight: 500;
        padding: 6px;
        background: #f8fafd;
        border-radius: 5px;
        border-bottom: none;
    }

    /* 3. Bottom-Sheet Filter Drawer (#boxsearch on Mobile) */
    .tl-filter-sheet-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.52);
        z-index: 10020;
    }
    .tl-filter-sheet-backdrop.open {
        display: block;
    }
    #boxsearch.tl-sheet-open {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        max-height: 86vh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        z-index: 10025;
        box-shadow: 0 -8px 28px rgba(0,0,0,0.28);
        animation: tlSheetSlideUp 0.24s ease-out;
    }
    @keyframes tlSheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    #boxsearch.tl-sheet-open .tl-filter-sheet-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--tl-primary);
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 5;
    }
    #boxsearch.tl-sheet-open .tl-filter-sheet-header button {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    /* 4. Touch Scroll-Snap Horizontal Carousels on Mobile */
    .tl-projects-carousel,
    .tl-video-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .tl-projects-carousel .tl-duan-card {
        flex: 0 0 78vw;
        max-width: 290px;
        scroll-snap-align: start;
    }
    .tl-video-strip .tl-video-card {
        flex: 0 0 68vw;
        max-width: 240px;
        scroll-snap-align: start;
    }

    /* 5. Other Responsive Grids */
    .tl-news-grid, .tl-seo-matrix, .tl-grid-3, .tl-grid-4, .tl-detail-contact-grid, .tl-map-split-layout, .tl-auth-grid, .tl-auth-steps-grid, .tl-news-hero, .tl-loan-grid {
        grid-template-columns: 1fr;
    }
    .tl-news-row-card {
        flex-direction: column;
    }
    .tl-news-row-thumb {
        width: 100%;
        height: 180px;
        flex: none;
    }
    .dv-item {
        flex-direction: column;
    }
    .dv-img {
        width: 100%;
        height: 195px;
        flex: none;
        border-radius: 10px 10px 0 0;
    }
    .dv-txt {
        flex-direction: column;
    }
    .dv-txt .pn2 {
        width: 100%;
        flex: none;
        border-left: none;
        border-top: 1px dashed #e2e6ea;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 12px;
    }

    /* 6. Sticky Single-Property Mobile Conversion Bar */
    .tl-mobile-conversion-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid #cfe0f0;
        padding: 8px 12px;
        box-shadow: 0 -3px 12px rgba(0,0,0,0.12);
        z-index: 9994;
    }
    .tl-mcb-broker {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .tl-mcb-broker img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
    }
    .tl-mcb-broker strong {
        display: block;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
    }
    .tl-mcb-broker span {
        font-size: 12px;
        font-weight: 700;
        color: var(--tl-red);
    }
    .tl-mcb-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .tl-mcb-actions .preCall {
        background: var(--tl-green);
        color: #fff;
        border: none;
        padding: 7px 10px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 12px;
    }
    .tl-mcb-actions .preChat {
        background: var(--tl-primary);
        color: #fff !important;
        padding: 7px 10px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 12px;
        text-decoration: none;
    }

    /* 7. 5-Tab Native Bottom Navigation Bar (.panelLHMobile) */
    .panelLHMobile {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 1px solid #d0d7de;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
        z-index: 9995;
        align-items: center;
    }
    .tl-bnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #555;
        font-size: 10px;
        font-weight: 600;
        gap: 2px;
        position: relative;
        height: 100%;
    }
    .tl-bnav-item.active {
        color: var(--tl-primary);
        font-weight: 700;
    }
    .tl-bnav-icon {
        font-size: 17px;
        line-height: 1;
    }
    .tl-bnav-item.tl-mob-cta .tl-bnav-plus {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--tl-red);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 800;
        margin-top: -10px;
        box-shadow: 0 3px 8px rgba(232,2,2,0.35);
    }
    .tl-bnav-badge {
        position: absolute;
        top: 4px;
        right: 18%;
        background: var(--tl-red);
        color: #fff;
        font-size: 9px;
        padding: 0 4px;
        border-radius: 8px;
    }
    body.tl-nhadat24h-body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
}


/* ==========================================================================
   10. PHASE 3 LUXURY EMERALD & ROYAL GOLD DESIGN SYSTEM + SEO COMPONENTS
   ========================================================================== */
.a-btl-uload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.a-btl-uload:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(9, 43, 20, 0.2);
}
.a-btl-uload.gold {
    background: linear-gradient(135deg, #D4941A 0%, #B3770C 100%);
    color: #fff !important;
}
.a-btl-uload.green {
    background: linear-gradient(135deg, #18752D 0%, #0F5C22 100%);
}

/* Homepage Hero SEO Box (.tl-home-hero-box) */
.tl-home-hero-box {
    padding: 14px 18px;
    border: 1px solid rgba(15, 92, 34, 0.16);
    border-left: 4px solid var(--tl-gold);
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFDFB 100%);
}
.tl-home-seo-h1 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--tl-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}
.tl-home-hero-box .tl-home-quickbar {
    padding: 0;
}
.tl-home-quickbar a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F3F8F4;
    border: 1px solid #CFE3D4;
    color: var(--tl-primary);
    transition: all 0.16s ease;
}
.tl-home-quickbar a:hover {
    background: var(--tl-primary);
    border-color: var(--tl-primary);
    color: #fff;
}
.tl-home-quickbar a.cc-chip {
    background: var(--tl-gold-soft);
    border-color: #F0D28C;
    color: #9A6200;
}

/* Luxury 360 Panorama Stage */
.tl-pano-stage {
    background: linear-gradient(125deg, #072310 0%, #0F5C22 52%, #1C7C36 100%);
    border: 1px solid rgba(246, 204, 75, 0.35);
}
.tl-pano-overlay strong {
    color: var(--tl-gold-light);
}

/* Footer Brand Logo & LuxuryEmerald Footer */
#footer {
    background: linear-gradient(180deg, #092B14 0%, #061D0D 100%);
    border-top: 3px solid var(--tl-gold);
}
.ft-top {
    background: rgba(15, 92, 34, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tl-ft-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.92);
}
.tl-ft-links a:hover {
    color: var(--tl-gold-light);
}
.tl-ft-brand-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}
.tl-ft-logo {
    flex-shrink: 0;
    display: block;
}
.tl-ft-logo img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
.tl-ft-company h3 {
    color: var(--tl-gold-light);
    letter-spacing: 0.3px;
}
.tl-drawer-vector-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Sidebar Multi-Select Dropdown (.tl-ms-toggle / .tl-ms-dropdown) */
.tl-ms-toggle {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.tl-ms-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(9, 43, 20, 0.16);
    padding: 8px 0;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10006;
}
.tl-multiselect.open .tl-ms-dropdown {
    display: block;
}
.tl-ms-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.tl-ms-opt:hover {
    background: #F3F8F4;
}
.tl-ms-footer {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px 2px;
    border-top: 1px solid #eee;
    margin-top: 4px;
}
.tl-ms-reset, .tl-ms-ok {
    border: 1px solid #ccd5e0;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.tl-ms-ok {
    background: var(--tl-primary);
    border-color: var(--tl-primary);
    color: #fff;
}

/* Fullscreen Touch Lightbox (.tl-lightbox-backdrop) */
.tl-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 18, 9, 0.94);
    z-index: 10060;
    align-items: center;
    justify-content: center;
}
.tl-lightbox-backdrop.open {
    display: flex;
}
.tl-lb-top {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.tl-lb-stage img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tl-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-lb-nav.prev { left: 18px; }
.tl-lb-nav.next { right: 18px; }

/* News Magazine Layout (.tl-news-hero-grid & .tl-news-stream) */
.tl-news-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
}
.tl-nh-img {
    display: block;
    position: relative;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.tl-nh-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-nh-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tl-gold);
    color: #083D15;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 4px;
}
.tl-news-hero-main h2 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.38;
}
.tl-news-hero-main h2 a {
    text-decoration: none;
    color: var(--tl-text);
}
.tl-nh-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}
.tl-nhs-head {
    font-size: 13px;
    font-weight: 800;
    color: var(--tl-primary);
    border-bottom: 2px solid var(--tl-gold);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.tl-nhs-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e3e8e4;
}
.tl-nhs-thumb {
    width: 96px;
    height: 68px;
    flex: 0 0 96px;
    border-radius: 6px;
    overflow: hidden;
}
.tl-nhs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-nhs-item h3 {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.35;
}
.tl-nhs-item h3 a {
    text-decoration: none;
    color: var(--tl-text);
}
.tl-news-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1ee;
}
.tl-news-row-img {
    width: 210px;
    height: 135px;
    flex: 0 0 210px;
    border-radius: 8px;
    overflow: hidden;
}
.tl-news-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tl-news-row-body h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.tl-news-row-body h3 a {
    text-decoration: none;
    color: var(--tl-primary);
}
.tl-news-row-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

/* Auth Portal (/DKTV-DT) */
.tl-auth-portal {
    padding: 20px;
}
.tl-auth-banner {
    background: linear-gradient(115deg, #083D15 0%, #0F5C22 100%);
    color: #fff;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 18px;
    border-left: 4px solid var(--tl-gold-light);
}
.tl-auth-banner h1 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--tl-gold-light);
}
.tl-auth-banner p {
    margin: 0;
    font-size: 13px;
    opacity: 0.92;
}
.tl-auth-col {
    background: #FAFDFB;
    border: 1px solid #DCE7DF;
    border-radius: 10px;
    padding: 18px;
}
.tl-auth-title {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--tl-primary);
    border-bottom: 2px solid var(--tl-primary);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tl-auth-remember {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin: 10px 0 14px;
}
.tl-btn-auth-primary,
.tl-btn-auth-register {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tl-btn-auth-primary {
    background: linear-gradient(135deg, #0F5C22 0%, #083D15 100%);
}
.tl-btn-auth-register {
    background: linear-gradient(135deg, #D4941A 0%, #B3770C 100%);
    margin-top: 10px;
}
.tl-auth-guide {
    margin-top: 18px;
    padding: 14px;
    background: #fff;
    border: 1px dashed #B8D1BF;
    border-radius: 8px;
    font-size: 12.5px;
}
.tl-auth-guide h3 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--tl-primary);
}
.tl-auth-guide ol {
    margin: 0 0 10px;
    padding-left: 18px;
    line-height: 1.65;
}
.tl-alert-err {
    background: #FFF2F2;
    border: 1px solid #F5C2C7;
    color: #B02A37;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Sortable /VET Toolbar & FAQ Accordion */
.tl-vet-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.tl-vet-clear-btn {
    border: 1px solid #f5c2c7;
    background: #fff5f5;
    color: #c62828;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tl-vet-hint {
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
}
.tl-sortable-th {
    cursor: pointer;
    user-select: none;
}
.tl-btn-remove-vet {
    border: 1px solid #ddd;
    background: #fff;
    color: #c62828;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
}

.tl-seo-faq {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #d5e0d7;
}
.tl-seo-faq h3 {
    font-size: 14px;
    color: var(--tl-primary);
    margin: 0 0 10px;
}
.tl-faq-item {
    background: #F8FBF8;
    border: 1px solid #DFEAE1;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.tl-faq-item summary {
    font-weight: 700;
    color: var(--tl-text);
    cursor: pointer;
}
.tl-faq-item p {
    margin: 8px 0 0;
    color: #444;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .tl-news-hero-grid,
    .tl-ft-brand-wrap,
    .tl-news-row {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .tl-news-row-img {
        width: 100%;
        height: 180px;
        flex: none;
    }
}