/*
Theme Name: PinHub Theme
Theme URI: https://pinhub.com
Author: Your Name
Author URI: https://pinhub.com
Description: Custom theme cho website cho thuê phòng ở PinHub
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinhub
Tags: custom, rental, apartment
*/

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Color Variables - Bảng màu PinHub */
:root {
    --color-main: #4C291B;        /* Màu Chính - Dark Brown */
    --color-secondary: #BD651F;    /* Màu Phụ - Orange Brown */
    --color-green: #153B23;        /* Màu Bổ Trợ - Dark Green */
    --color-yellow: #FFC642;       /* Màu Bổ Trợ - Yellow */
    --color-orange: #CF501D;       /* Màu Bổ Trợ - Orange Red */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg: #FFFFFF;
    --color-bg-light: #F8F9FA;
}

/* Reset và Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-top .container {
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-main);
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

/* Header Styles */
.site-header {
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(76, 41, 27, 0.1);
}

.header-top {
    position: relative;
    z-index: 1001;
}

/* Top Navigation Bar - Dark Brown */
.header-top {
    background: var(--color-main);
    padding: 10px 0;
    max-height: 70px;
    min-height: 60px;
    overflow: visible;
    display: flex;
    align-items: center;
}

.header-top .container {
    padding: 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.header-top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Desktop: Ensure proper order */
.header-top-content .mobile-menu-toggle {
    display: none;
}

.header-top-content .site-branding {
    order: 1;
    flex-shrink: 0;
}

.header-top-content .main-navigation {
    order: 2;
    flex: 1;
}

.header-top-content .header-search {
    order: 3;
    flex-shrink: 0;
}

/* Logo */
.site-branding {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    position: static;
    transform: none;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.3s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

.site-logo {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: 45px;
    width: auto;
    object-fit: contain;
}

.logo-icon {
    font-size: 20px;
    line-height: 1;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Main Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 100%;
}

.nav-menu li {
    position: relative;
    z-index: 10002;
}

.nav-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2;
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a:focus {
    color: var(--color-yellow);
}

/* Dropdown Menu */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10000;
}

.nav-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .sub-menu li {
    display: block;
    margin: 0;
}

.nav-menu .sub-menu a {
    color: var(--color-text);
    padding: 10px 20px;
    display: block;
}

.nav-menu .sub-menu a:hover {
    background: var(--color-bg-light);
    color: var(--color-secondary);
}

/* Search Icon */
.header-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    text-decoration: none;
    width: auto;
    height: auto;
    transition: color 0.3s ease;
    padding: 0;
    cursor: pointer;
}

.search-toggle:hover {
    color: var(--color-yellow);
}

.search-toggle svg {
    width: 20px;
    height: 20px;
}

/* Secondary Information Bar - Light Beige */
.header-info-bar {
    background: #E3D0BB;
    padding: 8px 0;
    max-height: 40px;
    min-height: 35px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
}

.header-info-bar .container {
    padding: 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Desktop: Single row layout */
.info-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Mobile Only Elements - Hidden on desktop */
.mobile-only {
    display: none;
}

/* Desktop: Ensure info-bar-content is visible */
@media (min-width: 769px) {
    .info-bar-content {
        display: flex !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* Tagline */
.tagline {
    font-size: 14px;
    color: #4C291B;
    font-weight: 400;
    line-height: 1.2;
}

/* Contact & Social */
.header-contact-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hotline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4C291B;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.hotline svg {
    flex-shrink: 0;
}

.hotline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.hotline-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Footer hotline link */
.contact-item .hotline-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item .hotline-link:hover {
    color: #fff;
    text-decoration: underline;
}

.separator-line {
    width: 1px;
    height: 20px;
    background: #4C291B;
    opacity: 0.3;
}

/* Social Media Icons */
.social-media {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: #4C291B;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: rgba(76, 41, 27, 0.1);
    color: #4C291B;
    transform: translateY(-2px);
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

/* Language Selector */
.language-selector {
    display: none !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4C291B;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.3s ease;
    line-height: 1.2;
}

.language-selector:hover {
    background: rgba(76, 41, 27, 0.1);
}

.flag {
    font-size: 16px;
}

.lang-code {
    font-weight: 600;
}

/* Mobile Menu Toggle - Hidden on desktop */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    z-index: 100;
    order: 1;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 24px;
    height: 18px;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(76, 41, 27, 0.95);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-menu {
    padding: 80px 20px 40px;
    max-width: 400px;
    margin: 0 auto;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-menu li:last-child {
    border-bottom: none;
}

.mobile-nav-menu a {
    display: block;
    padding: 16px 0;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.mobile-nav-menu a:hover {
    color: #E3D0BB;
}

.mobile-nav-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    display: none;
}

.mobile-nav-menu .menu-item-has-children > a::after {
    content: '+';
    float: right;
    font-size: 24px;
    transition: transform 0.3s ease;
}

.mobile-nav-menu .menu-item-has-children.active > a::after {
    transform: rotate(45deg);
}

.mobile-nav-menu .menu-item-has-children.active > .sub-menu {
    display: block;
}

.mobile-nav-menu .sub-menu a {
    font-size: 16px;
    padding: 12px 0;
    color: rgba(255, 255, 255, 0.8);
}

/* Desktop Only Elements */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Info Bar Rows */
.info-bar-row {
    display: flex;
    align-items: center;
    max-height: 40px;
    overflow: hidden;
}

.info-bar-tagline {
    padding: 10px 0;
}

.info-bar-contact {
    padding: 10px 0;
}

/* Footer */
.site-footer {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.site-footer > * {
    position: relative;
    z-index: 2;
}

.footer-main {
    padding: 63px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer Logo & Social */
.footer-logo-social {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-logo-img {
    max-width: 208px;
    height: auto;
}

.footer-logo .logo-icon {
    font-size: 32px;
    color: #FFFFFF;
}

.footer-logo .logo-text {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.footer-social-title {
    font-size: 18px;
    color: #FFFFFF;
    margin: 0 0 14px 0;
    font-weight: 400;
    line-height: 1.5;
}

.footer-social-icons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.social-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-circle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.social-icon-circle svg {
    width: 20px;
    height: 20px;
}

/* Footer Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-title {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.5;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item {
    font-size: 18px;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0;
}

.contact-item strong {
    color: #FFFFFF;
    font-weight: 400;
}

.contact-item a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Footer About */
.footer-about {
    display: flex;
    flex-direction: column;
}

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

.footer-menu li {
    margin: 0;
}

.footer-menu a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
    display: inline-block;
    line-height: 2;
}

.footer-menu a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Footer Separator */
.footer-separator {
    height: 1px;
    background: #FFFFFF;
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    opacity: 0.3;
}

/* Footer Systems */
.footer-systems {
    padding: 40px 0 20px;
}

.systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-systems .footer-system-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 0;
    margin: 0;
}

.footer-systems .system-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.footer-systems .system-icon svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
    display: block;
}

.footer-systems .system-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.footer-systems .system-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
    align-items: flex-start;
}

.footer-systems .system-content h4.system-name,
.footer-systems .system-content h4 {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 1.5;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.footer-systems .system-content p.system-address,
.footer-systems .system-content p {
    font-size: 15px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align: left;
    text-indent: 0;
    width: 100%;
    box-sizing: border-box;
}

.system-slug {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
    text-align: left;
    text-transform: lowercase;
}

/* Footer Copyright */
.footer-copyright {
    padding: 20px 0;
    background: transparent;
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    color: #FFFFFF;
    font-size: 15px;
}

.footer-copyright .container {
    max-width: 1200px;
}

.contact-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.site-info {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--color-secondary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px;
}

.btn:hover {
    background: var(--color-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(189, 101, 31, 0.3);
}

.btn-primary {
    background: #115029;
    border-color: #115029;
}

.btn-primary:hover {
    background: #0d3f1f;
    border-color: #0d3f1f;
}

.btn-view,
.btn-read-more {
    background: var(--color-main);
    padding: 12px 24px;
    font-size: 14px;
}

.btn-view:hover,
.btn-read-more:hover {
    background: var(--color-secondary);
}

.btn-facebook {
    background: #1877f2;
}

.btn-facebook:hover {
    background: #166fe5;
}

.btn-zalo {
    background: #0068ff;
}

.btn-zalo:hover {
    background: #0057d9;
}

.btn-call {
    background: var(--color-green);
}

.btn-call:hover {
    background: #1a4a2a;
}

/* Forms */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-main);
    font-family: 'Inter', sans-serif;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: var(--color-bg);
    color: var(--color-text);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(189, 101, 31, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input.error {
    border-color: var(--color-orange);
}

.btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    margin-top: 10px;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-main) 0%, var(--color-secondary) 100%);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Hide gradient when background image is set */
.hero-section[style*="background-image"]::before {
    display: none;
}

.hero-section::after {
    display: none;
}

.hero-overlay {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    color: #fff;
    padding: 80px 20px;
}

.hero-section h1 {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

.hero-description {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.95);
}

/* Page Header */
.page-header {
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-bg-light);
}

.page-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 10px;
}

/* Apartments Grid */
.apartments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    margin: 50px 0;
}

.can-ho-card {
    background: var(--color-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.can-ho-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(76, 41, 27, 0.15);
}

.card-thumbnail {
    position: relative;
    overflow: hidden;
}

.card-thumbnail img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.can-ho-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

.card-content {
    padding: 24px;
}

.card-title {
    margin-bottom: 16px;
}

.card-title a {
    text-decoration: none;
    color: var(--color-main);
    font-size: 22px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: var(--color-secondary);
}

.card-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    font-size: 14px;
}

.price {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 18px;
}

.area {
    color: var(--color-text-light);
    font-weight: 500;
}

.card-excerpt {
    margin-bottom: 20px;
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.6;
}

/* News Grid - Homepage */
.news-section {
    margin: 50px 0;
    background: #fff;
    padding: 60px 0;
}

.news-section .section-title {
    text-align: center;
    color: #4c291b;
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 50px;
}

.news-grid-wrapper {
    position: relative;
    overflow: hidden;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.news-card .card-thumbnail {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 240px;
    background: #f5f5f5;
}

.news-card .card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .card-thumbnail img {
    transform: scale(1.05);
}

.news-card .card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card .card-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.news-card .card-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card .card-title a:hover {
    color: #bd651f;
}

.news-card .card-meta {
    margin-bottom: 12px;
    font-size: 14px;
    color: #8d8d8d;
}

.news-card .card-excerpt {
    flex: 1;
    margin-bottom: 16px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.news-card .view-count {
    font-size: 14px;
    color: #888;
}

.news-card .read-more-link {
    color: #bd651f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.news-card .read-more-link:hover {
    color: #a0551a;
}

.news-section .text-center {
    text-align: center;
    margin-top: 40px;
}

.news-section .btn {
    display: inline-block;
    padding: 13px 20px;
    background: #115029;
    color: #fff;
    text-decoration: none;
    border-radius: 35px;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid #e7e7e7;
    transition: background 0.3s ease;
}

.news-section .btn:hover {
    background: #0d3f1f;
}

/* Search Results */
.search-results-grid {
    margin: 50px 0;
}

.search-result-item {
    background: var(--color-bg);
    padding: 32px;
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.08);
    border-left: 4px solid var(--color-secondary);
    transition: all 0.3s ease;
}

.search-result-item:hover {
    box-shadow: 0 6px 25px rgba(76, 41, 27, 0.12);
    transform: translateX(5px);
}

.result-title {
    margin-bottom: 12px;
}

.result-title a {
    text-decoration: none;
    color: var(--color-main);
    font-size: 24px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.result-title a:hover {
    color: var(--color-secondary);
}

.result-meta {
    color: var(--color-text-light);
    margin: 12px 0;
    font-size: 14px;
}

.result-excerpt {
    color: var(--color-text-light);
    margin: 16px 0;
    line-height: 1.6;
}

/* Can ho details */
.can-ho-details {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, #ffffff 100%);
    padding: 32px;
    border-radius: 12px;
    margin: 40px 0;
    border: 2px solid rgba(189, 101, 31, 0.1);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(76, 41, 27, 0.1);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item strong {
    color: var(--color-main);
    font-weight: 600;
    font-size: 16px;
}

.detail-item span {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
}

.entry-header {
    margin-bottom: 30px;
}

.entry-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 16px;
}

.entry-meta {
    color: var(--color-text-light);
    font-size: 14px;
}

.post-thumbnail {
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.1);
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-description {
    margin: 40px 0;
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text);
}

.book-room-section,
.cooperation-form-section {
    margin-top: 50px;
    padding: 40px;
    background: var(--color-bg-light);
    border-radius: 12px;
    border: 2px solid rgba(189, 101, 31, 0.1);
}

.book-room-section h3,
.cooperation-form-section h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-main);
    margin-bottom: 30px;
}

/* Section Titles */
.section-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 50px;
    text-align: center;
}

/* Section Titles on Front Page */
.front-page .section-title {
    font-weight: 300;
}

/* Featured Apartments Section */
.featured-apartments {
    margin: 100px 0;
}

/* Carousel */
.apartments-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 60px;
}

.carousel-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-container .can-ho-card {
    flex: 0 0 350px;
    min-width: 350px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--color-main);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 41, 27, 0.3);
}

.carousel-btn:hover {
    background: var(--color-secondary);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

/* Featured Apartments Full Screen Section */
.featured-apartments-fullscreen {
    position: relative;
    width: 100%;
    margin: 50px 0;
    padding: 0;
}

.featured-apartments-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.featured-apartments-fullscreen .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.apartments-carousel-fullscreen {
    position: relative;
    width: 100%;
    padding: 0 80px;
}

.carousel-container-fullscreen {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.carousel-container-fullscreen::-webkit-scrollbar {
    display: none;
}

.can-ho-featured-card {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: calc((100% - 60px) / 3);
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.15);
    transition: transform 0.3s ease;
    height: 100%;
    min-height: 500px;
}

.can-ho-featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(76, 41, 27, 0.25);
}

.featured-card-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    border-radius: 12px;
}

.featured-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    padding: 25px 20px 20px;
    width: 100%;
}

.btn-book-room {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #BD651F 0%, #8B4513 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-book-room:hover {
    background: linear-gradient(135deg, #8B4513 0%, #BD651F 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(189, 101, 31, 0.4);
    color: #fff;
}

.overlay-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.overlay-left {
    flex: 1;
}

.overlay-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.featured-card-overlay .card-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}

.featured-card-overlay .card-title a {
    color: #fff;
    text-decoration: none;
}

.featured-card-overlay .card-title a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.featured-card-overlay .card-address {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
    line-height: 1.4;
}

.card-header-info {
    margin-bottom: 8px;
}

.featured-card-overlay .card-map-link {
    font-size: 13px;
    color: #4A90E2;
    text-decoration: underline;
    display: inline-block;
}

.featured-card-overlay .card-map-link:hover {
    color: #5BA0F2;
}

.featured-card-overlay .card-details {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0;
    line-height: 1.5;
}

.featured-card-overlay .card-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 0;
}

.featured-card-overlay .price-original {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: line-through;
}

.featured-card-overlay .price-discount {
    font-size: 24px;
    font-weight: 700;
    color: #FFA500;
    line-height: 1.2;
}

.apartments-carousel-fullscreen .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(227, 208, 187, 0.9);
    color: var(--color-main);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 41, 27, 0.2);
}

.apartments-carousel-fullscreen .carousel-btn:hover {
    background: var(--color-main);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.apartments-carousel-fullscreen .carousel-prev {
    left: 20px;
}

.apartments-carousel-fullscreen .carousel-next {
    right: 20px;
}

/* Fixed Contact Icons */
.fixed-contact-icons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    text-decoration: none;
}

.contact-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.contact-messenger {
    background: linear-gradient(135deg, #0084FF 0%, #006AFF 100%);
}

.contact-zalo {
    background: #0068FF;
}

.contact-phone {
    background: #FF0000;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

/* Responsive: Featured Apartments Full Screen */
@media (max-width: 1200px) {
    .can-ho-featured-card {
        flex: 0 0 calc((100% - 60px) / 3);
        min-width: calc((100% - 60px) / 3);
        min-height: 450px;
    }
    
    .featured-card-image {
        min-height: 450px;
    }
}

@media (max-width: 968px) {
    .can-ho-featured-card {
        flex: 0 0 calc((100% - 40px) / 2);
        min-width: calc((100% - 40px) / 2);
        min-height: 400px;
    }
    
    .featured-card-image {
        min-height: 400px;
    }
    
    .apartments-carousel-fullscreen {
        padding: 0 60px;
    }
    
    .fixed-contact-icons {
        right: 15px;
        bottom: 15px;
    }
    
    .contact-icon {
        width: 45px;
        height: 45px;
    }
    
    .overlay-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .overlay-right {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
    
    .featured-card-overlay .card-prices {
        align-items: flex-start;
    }
    
    .btn-book-room {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Hero Section Mobile */
    .hero-section {
        min-height: 350px;
    }
    
    .hero-content {
        padding: 40px 20px;
    }
    
    .hero-section h1 {
        font-size: 28px;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .hero-description {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .hero-content .btn {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    /* Reduce spacing between ALL sections on mobile (50% of desktop) */
    .front-page .featured-apartments-fullscreen,
    .front-page .pinhub-system,
    .front-page .pinhub-system-listings,
    .front-page .property-listings,
    .front-page .why-us,
    .front-page .testimonials-section,
    .front-page .newsletter-section,
    .front-page .videos-section,
    .front-page .gallery-section,
    .front-page .news-section,
    .front-page .search-keywords-section {
        margin: 25px 0;
    }
    
    /* System Grid Mobile */
    .system-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .system-item {
        min-height: 120px;
    }
    
    .system-content {
        padding: 15px;
    }
    
    .system-content h3 {
        font-size: 16px;
    }
    
    .system-checkmark {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    
    .system-info {
        margin: 20px 0;
        padding: 15px 0;
    }
    
    .system-contact {
        gap: 8px;
    }
    
    .system-hotline {
        font-size: 14px;
    }
    
    .system-address {
        font-size: 13px;
    }
    
    .listings-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Reduce padding for ALL sections with padding on mobile (50% of desktop) */
    .front-page .why-us,
    .front-page .testimonials-section,
    .newsletter-section {
        min-height: auto;
        padding: 40px 0;
    }
    
    .newsletter-content {
        padding: 40px 20px;
    }
    
    .newsletter-title {
        font-size: 32px;
    }
    
    .newsletter-subtitle {
        font-size: 18px;
    }
    
    .newsletter-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Featured Apartments Mobile */
    .featured-apartments-fullscreen {
        margin: 25px 0;
    }
    
    /* Search Keywords Section Mobile */
    .front-page .search-keywords-section {
        margin: 25px 0;
    }
    
    .featured-apartments-fullscreen .section-title {
        font-size: 28px;
        margin-bottom: 30px;
        padding: 0 20px;
    }
    
    .apartments-carousel-fullscreen {
        padding: 0 20px;
    }
    
    .can-ho-featured-card {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
        min-height: 400px;
        margin: 0 10px;
    }
    
    .featured-card-image {
        min-height: 400px;
    }
    
    .apartments-carousel-fullscreen .carousel-btn {
        width: 36px;
        height: 36px;
        background: rgba(227, 208, 187, 0.95);
    }
    
    .apartments-carousel-fullscreen .carousel-prev {
        left: 5px;
    }
    
    .apartments-carousel-fullscreen .carousel-next {
        right: 5px;
    }
    
    .apartments-carousel-fullscreen .carousel-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .featured-card-overlay {
        padding: 20px 15px 15px;
    }
    
    .overlay-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .overlay-left {
        width: 100%;
    }
    
    .overlay-right {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }
    
    .featured-card-overlay .card-title {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .featured-card-overlay .card-address {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    .featured-card-overlay .card-map-link {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .featured-card-overlay .card-details {
        font-size: 12px;
        margin-bottom: 0;
    }
    
    .featured-card-overlay .card-prices {
        align-items: flex-start;
        margin-bottom: 12px;
    }
    
    .featured-card-overlay .price-original {
        font-size: 12px;
    }
    
    .featured-card-overlay .price-discount {
        font-size: 20px;
    }
    
    .btn-book-room {
        width: 100%;
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .fixed-contact-icons {
        right: 15px;
        bottom: 15px;
        gap: 10px;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .contact-icon svg,
    .contact-icon img {
        width: 20px;
        height: 20px;
    }
}

/* Archive Filters */
.archive-filters {
    background: var(--color-bg-light);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 40px;
}

.filter-form {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-main);
    font-size: 14px;
}

/* Term Description */
.term-description {
    font-size: 16px;
    color: var(--color-text-light);
    margin-top: 10px;
    line-height: 1.6;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 60px 20px;
}

.no-results p {
    font-size: 18px;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* Error 404 */
.error-404-content {
    text-align: center;
    padding: 80px 20px;
}

.error-404-content .page-title {
    font-size: 72px;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 20px;
}

.error-404-content .page-content p {
    font-size: 18px;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* Hệ Thống Pinhub & Danh Sách Căn Hộ Section */
.pinhub-system-listings {
    margin: 50px 0;
}

.system-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.system-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 150px;
    display: flex;
    align-items: flex-end;
}

.system-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(76, 41, 27, 0.2);
}

.system-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.system-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.system-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.system-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.system-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #FFA500;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.system-item.active {
    border: 2px solid #FFA500;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
}

/* System Info (Address & Contact) */
.system-info {
    margin: 30px 0;
    padding: 20px 0;
    text-align: center;
}

.system-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.system-hotline {
    font-size: 16px;
    color: var(--color-main);
    margin: 0;
}

.system-hotline a {
    color: var(--color-main);
    text-decoration: none;
}

.system-hotline a:hover {
    text-decoration: underline;
}

.system-address {
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
}

.system-map-link {
    color: #4A90E2;
    text-decoration: underline;
    margin-left: 10px;
}

.system-map-link:hover {
    color: #357ABD;
}

/* Listings Container */
.listings-container {
    position: relative;
    margin-top: 40px;
}

#view-all-btn {
    display: inline-block;
    margin: 40px auto 0;
    text-align: center;
    width: auto;
}

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

/* Carousel for listings */
.listings-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 60px;
}

.listings-carousel {
    display: flex;
    gap: 30px;
    transition: transform 0.3s ease;
}

.listings-carousel .can-ho-listing {
    flex: 0 0 calc((100% - 30px) / 2);
    min-width: calc((100% - 30px) / 2);
}

.listings-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(227, 208, 187, 0.9);
    color: var(--color-main);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 41, 27, 0.2);
}

.listings-carousel-btn:hover {
    background: var(--color-main);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.listings-carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.listings-carousel-prev {
    left: 0;
}

.listings-carousel-next {
    right: 0;
}

.can-ho-listing {
    background: #f1f1f1;
    border-radius: 17.647px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.can-ho-listing:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.listing-thumbnail {
    position: relative;
    overflow: hidden;
    height: 251px;
    border-radius: 17.647px 17.647px 0 0;
}

.listing-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 17.647px 17.647px 0 0;
    transition: transform 0.3s ease;
}

.can-ho-listing:hover .listing-thumbnail img {
    transform: scale(1.05);
}

.listing-content {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.listing-title {
    margin-bottom: 8px;
}

.listing-title a {
    text-decoration: none;
    color: #333333;
    font-size: 19.853px;
    font-weight: 400;
    transition: color 0.3s ease;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
}

.listing-title a:hover {
    color: #bd651f;
}

.listing-rating {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    color: #FFA500;
    font-size: 19.853px;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    gap: 2px;
}

.listing-rating-count {
    font-size: 13.235px;
    color: #666666;
    line-height: 22.058px;
    font-family: 'Inter', sans-serif;
}

.listing-description {
    color: #4c291b;
    font-size: 15.441px;
    line-height: 22.058px;
    margin-bottom: 16px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    flex: 1;
}

.listing-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0;
    border-top: none;
    gap: 12px;
}

.listing-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.price-original {
    font-size: 16px;
    color: #666666;
    text-decoration: line-through;
    line-height: 1.2;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.price-current {
    font-size: 22px;
    font-weight: 700;
    color: #bd651f;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}

.btn-book {
    background: #fff;
    border: 1px solid #bd651f;
    padding: 0;
    height: 37.935px;
    min-width: 148px;
    border-radius: 70.587px;
    color: #bd651f;
    text-decoration: none;
    font-weight: 400;
    font-size: 15.441px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
}

.btn-book:hover {
    background: #bd651f;
    border-color: #bd651f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(189, 101, 31, 0.4);
}

/* Why Us Section */
.why-us {
    margin: 50px 0;
    padding: 50px 0;
    background: #fff;
}

.why-us .section-title {
    font-size: 40px;
    font-weight: 300;
    color: #4c291b;
    text-align: center;
    margin-bottom: 60px;
    font-family: 'Inter', sans-serif;
}

.why-us-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    position: relative;
}

.why-us-carousel-btn {
    display: none;
}

.why-us-item {
    text-align: center;
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Vertical separators */
.why-us-item:nth-child(1),
.why-us-item:nth-child(2),
.why-us-item:nth-child(4),
.why-us-item:nth-child(5) {
    border-right: 1px solid #e0e0e0;
}

/* Horizontal separator */
.why-us-item:nth-child(1),
.why-us-item:nth-child(2),
.why-us-item:nth-child(3) {
    border-bottom: 1px solid #e0e0e0;
}

.why-us-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-us-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.why-us-item h3 {
    font-size: 22px;
    font-weight: 400;
    color: #bd651f;
    margin: 0 0 16px 0;
    font-family: 'Inter', sans-serif;
}

.why-us-item p {
    font-size: 16px;
    line-height: 2;
    color: #333333;
    margin: 0;
    font-family: 'Inter', sans-serif;
    max-width: 326px;
}

/* Testimonials Section */
.testimonials-section {
    position: relative;
    margin: 50px 0;
    padding: 0;
    min-height: 660px;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.testimonials-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 59.7%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.testimonials-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
}

.testimonials-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 40.3%;
    background: #4c291b;
}

.testimonials-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 60px;
    width: 100%;
    box-sizing: border-box;
}

.testimonials-title {
    font-size: 40px;
    font-weight: 300;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
    font-family: 'Inter', sans-serif;
}

.testimonials-carousel-wrapper {
    position: relative;
    padding: 0 60px;
}

.testimonials-carousel {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

.testimonials-carousel::-webkit-scrollbar {
    display: none;
}

.testimonials-carousel:active {
    cursor: grabbing;
}

.testimonial-card {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: calc((100% - 60px) / 3);
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: left;
    scroll-snap-align: start;
}

.testimonial-avatar {
    margin-bottom: 20px;
}

.testimonial-avatar img {
    width: 61px;
    height: 61px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #333333;
    line-height: 2;
    font-family: 'Inter', sans-serif;
}

.testimonial-location {
    color: #333333;
    font-size: 16px;
    margin: 0 0 20px 0;
    line-height: 2;
    font-family: 'Inter', sans-serif;
}

.testimonial-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
}

.testimonial-text {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.testimonial-rating {
    color: #FFA500;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1;
}

.testimonials-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.testimonials-carousel-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.testimonials-carousel-btn svg {
    width: 24px;
    height: 24px;
    color: #4c291b;
}

.testimonials-carousel-prev {
    left: 0;
}

.testimonials-carousel-next {
    right: 0;
}

.testimonials-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9d9d9;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonials-dot.active {
    background: #bd651f;
    width: 10px;
    height: 10px;
}

/* Newsletter Section */
/* Newsletter Section */
.newsletter-section {
    position: relative;
    margin: 50px 0;
    padding: 0;
    min-height: 550px;
    overflow: hidden;
    width: 100%;
}

.newsletter-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.newsletter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.newsletter-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 60px;
    width: 100%;
    box-sizing: border-box;
}

.newsletter-title,
.newsletter-subtitle,
.newsletter-form,
.newsletter-note {
    max-width: 50%;
}

.newsletter-title {
    font-size: 43px;
    font-weight: 300;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-family: 'Inter', sans-serif;
}

.newsletter-title-bold {
    font-weight: 700;
}

.newsletter-subtitle {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    margin: 0 0 40px 0;
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
}

.newsletter-form {
    margin-bottom: 20px;
}

.newsletter-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.newsletter-form .form-group {
    margin-bottom: 0;
}

.newsletter-form label {
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.newsletter-form input,
.newsletter-form select {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #333;
    box-sizing: border-box;
}

.newsletter-form input::placeholder,
.newsletter-form select option:first-child {
    color: #888888;
}

.newsletter-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.newsletter-form .btn-submit {
    background: #bd651f;
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 58px;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.3s ease;
}

.newsletter-form .btn-submit:hover {
    background: #a0551a;
}

.newsletter-note {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.newsletter-message {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.newsletter-message.newsletter-success {
    background: #4caf50;
    color: #fff;
}

.newsletter-message.newsletter-error {
    background: #f44336;
    color: #fff;
}

.newsletter-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Videos Section */
.videos-section {
    margin: 50px 0;
}

.videos-wrapper {
    position: relative;
    padding: 0 60px;
}

.videos-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

.videos-grid::-webkit-scrollbar {
    display: none;
}

.videos-grid:active {
    cursor: grabbing;
}

.videos-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.videos-carousel-btn:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.videos-carousel-btn svg {
    width: 24px;
    height: 24px;
    color: #4c291b;
}

.videos-carousel-prev {
    left: 0;
}

.videos-carousel-next {
    right: 0;
}

.video-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.1);
    transition: transform 0.3s ease;
    background: #fff;
    flex: 0 0 calc((100% - 90px) / 4);
    min-width: calc((100% - 90px) / 4);
    scroll-snap-align: start;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-thumbnail {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #000;
}

.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-main);
}

.video-title {
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-main);
    margin: 0;
}

.video-link {
    text-decoration: none;
    display: block;
}

/* Gallery Section */
.gallery-section {
    margin: 50px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.gallery-item {
    position: relative;
    padding-top: 100%; /* Square */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(76, 41, 27, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Search Keywords Section */
.search-keywords-section {
    margin: 80px 0;
    text-align: center;
}

.search-keywords-section h3 {
    font-size: 24px;
    color: var(--color-main);
    margin-bottom: 30px;
}

.keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.keyword-tag {
    display: inline-block;
    padding: 10px 20px;
    background: var(--color-bg-light);
    color: var(--color-text);
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.keyword-tag:hover {
    background: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

/* Responsive Header */
@media (max-width: 968px) {
    .header-top-content {
        flex-wrap: wrap;
    }
    
    .main-navigation {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        margin-top: 5px;
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    /* Header Top - Mobile */
    .header-top-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-direction: row !important;
        position: relative;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        order: 1;
    }
    
    .site-branding {
        order: 2 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex: 0 0 auto !important;
    }
    
    .site-branding .logo-link {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .site-logo {
        max-width: 100px !important;
    }
    
    .logo-text {
        font-size: 16px;
    }
    
    .main-navigation {
        display: none !important;
    }
    
    .header-search {
        order: 3 !important;
    }
    
    /* Header Info Bar - Mobile */
    .header-info-bar {
        padding: 0;
        min-height: auto;
        max-height: none;
    }
    
    .header-info-bar .container {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    
    .info-bar-content {
        display: none !important;
    }
    
    .mobile-only {
        display: flex !important;
    }
    
    .info-bar-row {
        display: flex !important;
        width: 100%;
        max-height: 40px;
        min-height: 35px;
        overflow: hidden;
        padding: 10px 15px;
        align-items: center;
    }
    
    .info-bar-tagline {
        display: none;
    }
    
    .info-bar-contact {
        padding: 10px 15px;
        max-height: 40px;
        min-height: 35px;
        display: flex !important;
    }
    
    .info-bar-contact .header-contact-social {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 15px;
    }
    
    .info-bar-contact .hotline {
        display: block !important;
        font-size: 12px;
    }
    
    .info-bar-contact .language-selector {
        display: none !important;
    }
    
    .mobile-social {
        display: flex !important;
        align-items: center;
        gap: 12px;
        margin-left: 12px;
    }
    
    .mobile-social .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: transparent;
        color: #4C291B;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .mobile-social .social-icon:hover {
        background: rgba(76, 41, 27, 0.1);
        color: #4C291B;
        transform: translateY(-2px);
    }
    
    .mobile-social .social-icon svg {
        width: 20px;
        height: 20px;
        display: block;
        flex-shrink: 0;
    }
    
    .mobile-social .social-icon {
        flex-shrink: 0;
    }
    
    .tagline {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    .hotline {
        font-size: 12px;
    }
    
    .language-selector {
        font-size: 12px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    
    .site-header .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-section {
        min-height: 400px;
    }
    
    .hero-content {
        padding: 60px 20px;
    }
    
    .hero-section h1 {
        font-size: 36px;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .apartments-carousel {
        padding: 0 50px;
    }
    
    .carousel-container .can-ho-card {
        flex: 0 0 280px;
        min-width: 280px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    /* Footer Responsive */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }
    
    .systems-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
    
    .footer-main {
        padding: 40px 0 30px;
    }
    
    .footer-systems {
        padding: 30px 0;
    }
    
    .system-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .listings-carousel-wrapper {
        padding: 0 50px;
    }
    
    .listings-carousel .can-ho-listing {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
    
    .listings-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .listings-carousel-prev {
        left: 5px;
    }
    
    .listings-carousel-next {
        right: 5px;
    }
    
    .listing-footer {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    
    .btn-book {
        width: 100%;
    }
    
    .why-us {
        padding: 40px 20px;
    }
    
    .why-us .section-title {
        font-size: 36px;
        margin-bottom: 40px;
    }
    
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 0;
    }
    
    .why-us-item {
        padding: 30px 20px;
    }
    
    /* Remove right border for middle column on tablet */
    .why-us-item:nth-child(2),
    .why-us-item:nth-child(4),
    .why-us-item:nth-child(6) {
        border-right: none;
    }
    
    /* Keep horizontal borders for all items except last row */
    .why-us-item:nth-child(1),
    .why-us-item:nth-child(2),
    .why-us-item:nth-child(3),
    .why-us-item:nth-child(4) {
        border-bottom: 1px solid #e0e0e0;
    }
    
    .why-us-item:nth-child(5),
    .why-us-item:nth-child(6) {
        border-bottom: none;
    }
    
    .why-us-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 16px;
    }
    
    .why-us-item h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .why-us-item p {
        font-size: 15px;
        line-height: 1.8;
    }
    
    .testimonials-section {
        min-height: auto;
        padding: 30px 0;
    }
    
    .testimonials-content {
        padding: 40px 15px 40px;
    }
    
    .testimonials-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .testimonials-carousel-wrapper {
        padding: 0 50px;
    }
    
    .testimonial-card {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
        padding: 30px 20px;
    }
    
    .testimonials-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .testimonials-carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .testimonials-carousel-prev {
        left: 5px;
    }
    
    .testimonials-carousel-next {
        right: 5px;
    }
    
    .testimonials-dots {
        margin-top: 30px;
    }
    
    .newsletter-content {
        grid-template-columns: 1fr;
    }
    
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .video-card {
        margin-bottom: 0;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .apartments-grid,
    .news-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .page-title {
        font-size: 32px;
    }
    
    .entry-title {
        font-size: 32px;
    }
    
    .filter-form {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .book-room-section,
    .cooperation-form-section {
        padding: 24px;
    }
    
    .can-ho-details {
        padding: 20px;
    }
    
    .detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    /* Footer Responsive */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }
    
    .systems-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
    
    .footer-main {
        padding: 40px 0 30px;
    }
    
    .footer-systems {
        padding: 30px 0 15px;
    }
    
    .footer-systems .footer-system-item {
        gap: 8px;
    }
    
    .footer-systems .system-icon {
        width: 20px;
        height: 20px;
    }
    
    .footer-systems .system-name {
        font-size: 16px;
    }
    
    .footer-systems .system-address {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .why-us {
        padding: 30px 15px;
        margin: 25px 0;
    }
    
    .why-us .section-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .why-us-wrapper {
        padding: 0 50px;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .why-us-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .why-us-grid::-webkit-scrollbar {
        display: none;
    }
    
    .why-us-item {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 25px 15px;
        border-right: none !important;
        border-bottom: none !important;
        box-sizing: border-box;
        margin: 0;
        width: 100%;
        scroll-snap-align: start;
    }
    
    .why-us-carousel-btn {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(227, 208, 187, 0.9);
        border: none;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
    }
    
    .why-us-carousel-btn:hover {
        background: rgba(227, 208, 187, 1);
    }
    
    .why-us-carousel-btn svg {
        width: 20px;
        height: 20px;
        color: #4c291b;
    }
    
    .why-us-carousel-prev {
        left: 5px;
    }
    
    .why-us-carousel-next {
        right: 5px;
    }
    
    .why-us-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    
    .why-us-item h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .why-us-item p {
        font-size: 14px;
        line-height: 1.6;
        max-width: 100%;
    }
    
    .videos-wrapper {
        padding: 0 50px;
    }
    
    .videos-grid {
        gap: 20px;
    }
    
    .video-card {
        flex: 0 0 calc((100% - 20px) / 2);
        min-width: calc((100% - 20px) / 2);
    }
    
    .videos-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .videos-carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .videos-carousel-prev {
        left: 5px;
    }
    
    .videos-carousel-next {
        right: 5px;
    }
    
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .news-section {
        padding: 25px 0;
    }
    
    .news-section .section-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
    
    .news-grid-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 10px;
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .news-grid-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .news-grid {
        display: flex;
        gap: 20px;
        grid-template-columns: none;
        scroll-snap-type: x mandatory;
    }
    
    .news-card {
        flex: 0 0 calc(100% - 40px);
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        scroll-snap-align: start;
    }
    
    .news-card .card-thumbnail {
        height: 200px;
    }
    
    .news-section .btn {
        font-size: 16px;
        padding: 10px 20px;
    }
}

@media (max-width: 768px) {
    .videos-wrapper {
        padding: 0 50px;
    }
    
    .videos-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .video-card {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .videos-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .videos-carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .videos-carousel-prev {
        left: 5px;
    }
    
    .videos-carousel-next {
        right: 5px;
    }
    
    .carousel-container .can-ho-card {
        flex: 0 0 250px;
        min-width: 250px;
    }
    
    /* Testimonials Responsive */
    .testimonials-section {
        min-height: auto;
        padding: 30px 0;
    }
    
    .testimonials-content {
        padding: 40px 15px 40px;
    }
    
    .testimonials-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .testimonials-carousel-wrapper {
        padding: 0 50px;
    }
    
    .testimonial-card {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
        padding: 30px 20px;
    }
    
    .testimonials-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .testimonials-carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .testimonials-carousel-prev {
        left: 5px;
    }
    
    .testimonials-carousel-next {
        right: 5px;
    }
    
    .testimonials-dots {
        margin-top: 30px;
    }
}

/* Taxonomy He Thong Page Styles */
.taxonomy-he-thong-page {
    padding-top: 0;
}

/* Banner Section */
.system-banner {
    position: relative;
    margin-top: 30px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .system-banner {
        margin-top: 20px;
    }
}

.banner-slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
}

.banner-slider {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
}

.banner-slide.active,
.banner-slide:first-child {
    opacity: 1;
    z-index: 1;
}

.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 3;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.banner-nav:hover {
    opacity: 0.7;
}

.banner-prev {
    left: 20px;
}

.banner-next {
    right: 20px;
}

.banner-carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.banner-dot {
    width: 59px;
    height: 3px;
    background: #d9d9d9;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
}

.banner-dot.active {
    background: #115029;
}

/* Breadcrumb */
.breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #4c291b;
}

.breadcrumb .separator {
    color: #4c291b;
}

.breadcrumb .current {
    color: #4c291b;
}

/* Listing Page Layout */
.listing-page-wrapper {
    display: grid;
    grid-template-columns: 291px 1fr;
    gap: 40px;
    margin-top: 30px;
    padding-bottom: 50px;
}

/* Filter Sidebar */
.filter-sidebar {
    background: #fff;
}

.filter-toggle {
    display: none;
}

.filter-content {
    display: block;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.filter-title {
    font-size: 22px;
    font-weight: 400;
    color: #4c291b;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-title::before {
    content: '';
    display: inline-block;
    width: 21px;
    height: 21px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M7 12h10M11 18h2"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.filter-group {
    margin-bottom: 40px;
}

.filter-group-title {
    font-size: 20px;
    font-weight: 500;
    color: #4c291b;
    margin: 0 0 20px 0;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox,
.filter-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    color: #4c291b;
    user-select: none;
    line-height: 1.5;
    min-height: 20px;
}

.filter-checkbox input[type="checkbox"],
.filter-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.filter-checkbox span,
.filter-radio span {
    display: inline-block;
    line-height: 1.5;
    vertical-align: middle;
}

.filter-radio input[type="radio"] {
    border-radius: 50%;
}

.filter-checkbox input[type="checkbox"]:checked,
.filter-radio input[type="radio"]:checked {
    background: #bd651f;
    border-color: #bd651f;
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.filter-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
}

/* Listings Main */
.listings-main {
    min-width: 0;
}

.apartments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* Pagination */
.pagination-wrapper {
    margin-top: 40px;
    text-align: center;
}

.pagination-wrapper .page-numbers {
    display: inline-flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-wrapper .page-numbers li {
    display: inline-block;
}

.pagination-wrapper .page-numbers a,
.pagination-wrapper .page-numbers span {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    color: #4c291b;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination-wrapper .page-numbers a:hover {
    background: #bd651f;
    color: #fff;
    border-color: #bd651f;
}

.pagination-wrapper .page-numbers .current {
    background: #bd651f;
    color: #fff;
    border-color: #bd651f;
}

/* Responsive */
@media (max-width: 992px) {
    .listing-page-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .filter-sidebar {
        order: 1;
    }
    
    .listings-main {
        order: 2;
    }
    
    .apartments-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Banner Mobile */
    .banner-slider-wrapper {
        border-radius: 12px;
        margin: 0 15px;
    }
    
    .banner-slider {
        height: 180px;
    }
    
    .banner-nav {
        width: 30px;
        height: 30px;
    }
    
    .banner-nav svg {
        width: 20px;
        height: 20px;
    }
    
    .banner-prev {
        left: 10px;
    }
    
    .banner-next {
        right: 10px;
    }
    
    .banner-carousel-dots {
        bottom: 10px;
        gap: 6px;
    }
    
    .banner-dot {
        width: 40px;
        height: 3px;
    }
    
    /* Breadcrumb Mobile */
    .breadcrumb-section {
        padding: 15px 0;
    }
    
    .breadcrumb {
        font-size: 12px;
        padding: 0 15px;
    }
    
    /* Container Mobile */
    .container {
        padding: 0 15px;
    }
    
    /* Listing Page Mobile */
    .listing-page-wrapper {
        gap: 20px;
        margin-top: 20px;
    }
    
    /* Filter Sidebar Mobile */
    .filter-sidebar {
        order: 1;
        margin-top: 0;
        margin-bottom: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
    }
    
    .filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 0;
        background: none;
        border: none;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 15px;
        cursor: pointer;
        font-size: 18px;
        font-weight: 500;
        color: #4c291b;
        font-family: 'Inter', sans-serif;
    }
    
    .filter-toggle svg {
        transition: transform 0.3s ease;
    }
    
    .filter-sidebar.active .filter-toggle svg {
        transform: rotate(180deg);
    }
    
    .filter-content {
        display: none;
    }
    
    .filter-sidebar.active .filter-content {
        display: block;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .filter-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .filter-group {
        margin-bottom: 30px;
    }
    
    .filter-group-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .filter-options {
        gap: 10px;
    }
    
    .filter-checkbox,
    .filter-radio {
        font-size: 14px;
        gap: 10px;
    }
    
    .filter-checkbox input[type="checkbox"],
    .filter-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }
    
    /* Listings Mobile */
    .listings-main {
        order: 2;
    }
    
    .apartments-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    /* Apartment Card Mobile */
    .can-ho-listing {
        border-radius: 12px;
    }
    
    .listing-thumbnail {
        height: 200px;
        border-radius: 12px 12px 0 0;
    }
    
    .listing-content {
        padding: 12px 15px 15px;
    }
    
    .listing-title a {
        font-size: 16px;
    }
    
    .listing-rating {
        margin-bottom: 8px;
    }
    
    .stars {
        font-size: 16px;
    }
    
    .listing-rating-count {
        font-size: 12px;
    }
    
    .listing-description {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 12px;
    }
    
    .listing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .listing-price {
        width: 100%;
    }
    
    .price-original {
        font-size: 14px;
    }
    
    .price-current {
        font-size: 18px;
    }
    
    .btn-book {
        width: 100%;
        height: 36px;
        font-size: 14px;
    }
    
    /* Pagination Mobile */
    .pagination-wrapper {
        margin-top: 30px;
    }
    
    .pagination-wrapper .page-numbers {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================
   Sub System Page Styles
   ============================================ */

.sub-system-page {
    padding-top: 0;
}

/* System Info Section */
.system-info-section {
    padding: 50px 0;
    background: #fff;
}

.system-info-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.system-info-content {
    max-width: 682px;
}

.system-title {
    font-size: 40px;
    font-weight: 300;
    color: #4c291b;
    margin-bottom: 20px;
    text-align: left;
}

.system-description {
    font-size: 20px;
    line-height: 1.5;
    color: #4c291b;
    margin-bottom: 30px;
}

.system-contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.system-hotline {
    font-size: 20px;
    color: #4c291b;
    margin: 0;
}

.system-hotline strong {
    font-weight: 400;
}

.system-hotline .hotline-number {
    color: #bd651f;
    font-weight: 600;
}

.system-address {
    font-size: 20px;
    color: #4c291b;
    margin: 0;
}

.system-map-link {
    color: #4b99ff;
    text-decoration: none;
    margin-left: 10px;
}

.system-map-link:hover {
    text-decoration: underline;
}

.system-map-container {
    width: 100%;
    height: 303px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.system-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Featured Apartments Section - Already styled via .featured-apartments-fullscreen */

/* Apartments Grid Section */
.apartments-grid-section {
    padding: 50px 0;
    background: #fff;
}

.apartments-grid-section .section-title {
    font-size: 40px;
    font-weight: 300;
    color: #4c291b;
    margin-bottom: 40px;
    text-align: left;
}

.apartments-grid-section .apartments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Systems Section */
.systems-section {
    padding: 50px 0;
    background: #fff;
}

.systems-section .section-title {
    font-size: 40px;
    font-weight: 300;
    color: #4c291b;
    margin-bottom: 40px;
    text-align: center;
}

.systems-section .systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.systems-section .system-item {
    position: relative;
    height: 130px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

.systems-section .system-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.systems-section .system-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.systems-section .system-name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    z-index: 2;
    width: 100%;
    padding: 20px;
}

/* Search Keywords Section */
.search-keywords-section {
    padding: 50px 0;
    background: #fff;
}

.search-keywords-section .section-title {
    font-size: 40px;
    font-weight: 300;
    color: #4c291b;
    margin-bottom: 30px;
    text-align: center;
}

.keywords-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.keyword-tag {
    display: inline-block;
    padding: 13px 20px;
    background: #f1f1f1;
    border: 1px solid #fff;
    border-radius: 35px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.keyword-tag:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

/* Responsive for Sub System Page */
@media (max-width: 992px) {
    /* Banner Slider Tablet */
    .sub-system-page .system-banner {
        margin-top: 20px;
    }
    
    .sub-system-page .banner-slider {
        height: 200px;
    }
    
    /* System Info Tablet */
    .system-info-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .system-map-container {
        height: 250px;
        order: -1;
    }
    
    .system-title {
        font-size: 32px;
    }
    
    .system-description {
        font-size: 18px;
    }
    
    .system-hotline,
    .system-address {
        font-size: 18px;
    }
    
    /* Apartments Grid Tablet */
    .apartments-grid-section .apartments-grid {
        grid-template-columns: 1fr;
    }
    
    /* Systems Grid Tablet - Same as front page */
    .sub-system-page .pinhub-system-listings .system-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .sub-system-page .system-item {
        min-height: 120px;
    }
    
    .sub-system-page .system-content {
        padding: 15px;
    }
    
    .sub-system-page .system-content h3 {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    /* Banner Slider Mobile */
    .sub-system-page .system-banner {
        margin-top: 15px;
    }
    
    .sub-system-page .banner-slider-wrapper {
        border-radius: 12px;
        margin: 0 15px;
    }
    
    .sub-system-page .banner-slider {
        height: 180px;
    }
    
    .sub-system-page .banner-nav {
        width: 30px;
        height: 30px;
    }
    
    .sub-system-page .banner-nav svg {
        width: 16px;
        height: 16px;
    }
    
    .sub-system-page .banner-dots {
        bottom: 10px;
        gap: 6px;
    }
    
    .sub-system-page .banner-dots .dot {
        width: 6px;
        height: 6px;
    }
    
    /* Breadcrumb Mobile */
    .sub-system-page .breadcrumb-section {
        padding: 15px 0;
    }
    
    .sub-system-page .breadcrumb {
        font-size: 12px;
        padding: 0 15px;
    }
    
    /* System Info Mobile */
    .system-info-section {
        padding: 25px 0;
    }
    
    .system-info-wrapper {
        gap: 20px;
    }
    
    .system-map-container {
        height: 200px;
    }
    
    .system-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .system-description {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .system-contact-info {
        gap: 12px;
    }
    
    .system-hotline,
    .system-address {
        font-size: 16px;
    }
    
    /* Featured Apartments Mobile - Same as front page */
    .sub-system-page .featured-apartments-fullscreen {
        margin: 25px 0;
    }
    
    .sub-system-page .featured-apartments-fullscreen .section-title {
        font-size: 28px;
        margin-bottom: 30px;
        padding: 0 20px;
    }
    
    .sub-system-page .apartments-carousel-fullscreen {
        padding: 0 20px;
    }
    
    /* Apartments Grid Mobile */
    .apartments-grid-section {
        padding: 25px 0;
    }
    
    .apartments-grid-section .section-title {
        font-size: 28px;
        margin-bottom: 25px;
        padding: 0 20px;
    }
    
    .apartments-grid-section .apartments-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
    
    /* Testimonials Mobile - Same as front page */
    .sub-system-page .testimonials-section {
        min-height: auto;
        padding: 30px 0;
        margin: 25px 0;
    }
    
    .sub-system-page .testimonials-content {
        padding: 0 20px;
    }
    
    .sub-system-page .testimonials-title {
        font-size: 28px;
        margin-bottom: 25px;
    }
    
    .sub-system-page .testimonials-carousel-wrapper {
        padding: 0 50px;
    }
    
    .sub-system-page .testimonial-card {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
    
    .sub-system-page .testimonials-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .sub-system-page .testimonials-carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .sub-system-page .testimonials-carousel-prev {
        left: 5px;
    }
    
    .sub-system-page .testimonials-carousel-next {
        right: 5px;
    }
    
    .sub-system-page .testimonials-dots {
        margin-top: 30px;
    }
    
    /* Newsletter Mobile - Same as front page */
    .sub-system-page .newsletter-section {
        min-height: auto;
        padding: 40px 0;
        margin: 25px 0;
    }
    
    .sub-system-page .newsletter-content {
        padding: 40px 20px;
        max-width: 100%;
    }
    
    .sub-system-page .newsletter-content > * {
        max-width: 100%;
    }
    
    .sub-system-page .newsletter-title {
        font-size: 32px;
    }
    
    .sub-system-page .newsletter-description {
        font-size: 18px;
    }
    
    .sub-system-page .newsletter-form .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Systems Section Mobile - Same as front page (2 columns) */
    .sub-system-page .pinhub-system-listings {
        margin: 25px 0;
    }
    
    .sub-system-page .pinhub-system-listings .system-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 20px;
        margin-top: 30px;
    }
    
    .sub-system-page .system-item {
        min-height: 120px;
    }
    
    .sub-system-page .system-content {
        padding: 15px;
    }
    
    .sub-system-page .system-content h3 {
        font-size: 16px;
    }
    
    /* Search Keywords Mobile - Same as front page */
    .sub-system-page .search-keywords-section {
        padding: 25px 0;
        margin: 25px 0;
    }
    
    .sub-system-page .search-keywords-section .section-title {
        font-size: 28px;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    .sub-system-page .keywords-wrapper {
        gap: 8px;
        padding: 0 20px;
    }
    
    .sub-system-page .keyword-tag {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .pagination-wrapper .page-numbers a,
    .pagination-wrapper .page-numbers span {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* ========================================
   SINGLE CAN HO PAGE (Trang chi tiết căn hộ)
   ======================================== */

.single-can-ho-page {
    padding: 0;
}

/* Breadcrumb */
.single-can-ho-page .breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.single-can-ho-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.single-can-ho-page .breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s;
}

.single-can-ho-page .breadcrumb a:hover {
    color: #4c291b;
}

.single-can-ho-page .breadcrumb .separator {
    color: #999;
}

.single-can-ho-page .breadcrumb .current {
    color: #4c291b;
    font-weight: 500;
}

/* Gallery Section */
.apartment-gallery-section {
    margin: 0 0 30px;
}

/* Main Content */
.apartment-main-content {
    width: 100%;
    margin-top: 30px;
}

.apartment-title {
    font-size: 30px;
    font-weight: 400;
    color: #4c291b;
    margin: 0 0 20px;
    line-height: normal;
}

/* Header Info (Price, Rating, Booking) */
.apartment-header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 30px;
}

.price-rating-section {
    flex: 1;
}

.price-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.price-original {
    font-size: 24px;
    color: #999999;
    text-decoration: line-through;
    text-align: right;
}

.price-current {
    font-size: 30px;
    font-weight: 700;
    color: #bd651f;
    text-align: right;
}

.rating-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    font-size: 18px;
    color: #ddd;
}

.star.filled {
    color: #FFC642;
}

.rating-count {
    font-size: 14px;
    color: #666666;
}

.booking-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.btn-book-room {
    display: inline-block;
    padding: 0;
    background: #115029;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 64px;
    font-size: 20px;
    font-weight: 400;
    transition: all 0.3s;
    text-align: center;
    width: 270px;
    height: 54px;
    line-height: 54px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.btn-book-room:hover {
    background: #0d3f1f;
    transform: translateY(-2px);
}

.discount-note {
    font-size: 18px;
    color: #4c291b;
    margin: 0;
    text-align: right;
}

/* Gallery */
.apartment-gallery {
    margin-bottom: 0;
}

.gallery-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 1200px;
}

.gallery-main {
    position: relative;
    width: 790px;
    max-width: 100%;
    height: 456px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.gallery-main .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-all-images {
    position: absolute;
    bottom: 20px;
    left: 23px;
    background: rgba(0, 0, 0, 0.57);
    padding: 10px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.view-all-images:hover {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.thumbnail-item {
    width: 390px;
    height: 220px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.thumbnail-item:hover {
    border-color: #bd651f;
    transform: translateY(-2px);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contact Info */
.apartment-contact-info {
    margin-bottom: 30px;
}

.apartment-address {
    font-size: 20px;
    color: #4c291b;
    margin: 0 0 10px;
    line-height: 1.5;
}

.map-link {
    color: #bd651f;
    text-decoration: none;
    margin-left: 10px;
}

.map-link:hover {
    text-decoration: underline;
}

.apartment-hotline {
    font-size: 20px;
    color: #4c291b;
    margin: 0;
}

.apartment-hotline .hotline-number {
    color: #bd651f;
    font-weight: 600;
}

/* Amenities Icons */
.apartment-amenities-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.amenity-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amenity-icon svg,
.amenity-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.amenity-item span {
    font-size: 20px;
    color: #4c291b;
    text-align: center;
}

.apartment-separator {
    height: 1px;
    background: #e1e1e1;
    margin: 30px 0;
}

/* Apartment Description Section */
.apartment-description-section {
    margin-bottom: 50px;
}

.apartment-description-section .apartment-description {
    font-size: 16px;
    line-height: 1.625;
    color: #4c291b;
}

.apartment-description-section .apartment-description p {
    margin-bottom: 16px;
}

.apartment-description-section .apartment-description p:last-child {
    margin-bottom: 0;
}

/* Apartment Sections */
.apartment-section {
    margin-bottom: 50px;
}

.apartment-section .section-title {
    font-size: 30px;
    font-weight: 400;
    color: #4c291b;
    margin: 0 0 20px;
}

.apartment-amenities-content,
.apartment-policy {
    font-size: 16px;
    line-height: 1.625;
    color: #4c291b;
}

.apartment-amenities-content p,
.apartment-policy p {
    margin-bottom: 16px;
}

.apartment-amenities-content p:last-child,
.apartment-policy p:last-child {
    margin-bottom: 0;
}

/* Booking Modal */
.booking-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.booking-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.booking-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10000;
}

.booking-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #4c291b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.booking-modal-close:hover {
    background: #f5f5f5;
}

.booking-form-title {
    font-size: 24px;
    font-weight: 600;
    color: #4c291b;
    margin: 0 0 30px;
}

.booking-form-wrapper {
    background: #fff;
}

/* Gallery Modal */
.gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.gallery-modal.active {
    display: block;
}

.gallery-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
}

.gallery-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.gallery-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background 0.3s;
}

.gallery-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.gallery-modal-main {
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    margin-bottom: 20px;
}

.gallery-modal-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-modal-thumbnails {
    display: flex;
    gap: 10px;
    max-width: 1200px;
    overflow-x: auto;
    padding: 10px 0;
}

.modal-thumbnail {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
}

.modal-thumbnail.active {
    border-color: #bd651f;
}

.modal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-modal-prev,
.gallery-modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background 0.3s;
}

.gallery-modal-prev {
    left: 20px;
}

.gallery-modal-next {
    right: 20px;
}

.gallery-modal-prev:hover,
.gallery-modal-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive - Single Can Ho Page */
@media (max-width: 1200px) {
    .gallery-wrapper {
        flex-direction: column;
    }
    
    .gallery-main {
        width: 100%;
    }
    
    .gallery-thumbnails {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .thumbnail-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 992px) {
    .single-can-ho-page .container {
        padding: 0 20px;
    }
    
    .apartment-gallery-section {
        margin-bottom: 25px;
    }
    
    .gallery-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .gallery-main {
        width: 100%;
        height: 400px;
    }
    
    .gallery-thumbnails {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 15px;
    }
    
    .thumbnail-item {
        width: calc(50% - 7.5px);
        height: 200px;
    }
    
    .apartment-title {
        font-size: 26px;
        margin-bottom: 15px;
    }
    
    .apartment-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 25px;
    }
    
    .price-section {
        gap: 10px;
    }
    
    .price-original {
        font-size: 20px;
    }
    
    .price-current {
        font-size: 26px;
    }
    
    .rating-section {
        gap: 8px;
    }
    
    .star {
        font-size: 16px;
    }
    
    .rating-count {
        font-size: 13px;
    }
    
    .booking-section {
        align-items: flex-start;
        width: 100%;
    }
    
    .btn-book-room {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }
    
    .discount-note {
        font-size: 16px;
    }
    
    .apartment-contact-info {
        margin-bottom: 25px;
    }
    
    .apartment-address,
    .apartment-hotline {
        font-size: 18px;
    }
    
    .apartment-amenities-icons {
        gap: 25px;
        margin-bottom: 25px;
        padding-bottom: 25px;
        justify-content: flex-start;
    }
    
    .amenity-item {
        flex: 0 0 calc(33.333% - 17px);
    }
    
    .amenity-icon {
        width: 50px;
        height: 50px;
    }
    
    .amenity-item span {
        font-size: 16px;
    }
    
    .apartment-separator {
        margin: 25px 0;
    }
    
    .apartment-description-section,
    .apartment-section {
        margin-bottom: 40px;
    }
    
    .apartment-section .section-title {
        font-size: 26px;
        margin-bottom: 15px;
    }
    
    .apartment-description-section .apartment-description,
    .apartment-amenities-content,
    .apartment-policy {
        font-size: 15px;
        line-height: 1.6;
    }
    
    .booking-modal-content {
        padding: 30px 20px;
        width: 95%;
        max-height: 85vh;
    }
    
    .booking-form-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .single-can-ho-page .breadcrumb-section {
        padding: 15px 0;
    }
    
    .single-can-ho-page .breadcrumb {
        font-size: 12px;
        gap: 6px;
    }
    
    .single-can-ho-page .container {
        padding: 0 15px;
    }
    
    .apartment-gallery-section {
        margin-bottom: 20px;
    }
    
    .gallery-main {
        height: 300px;
        border-radius: 8px;
    }
    
    .view-all-images {
        bottom: 15px;
        left: 15px;
        padding: 8px 15px;
        font-size: 12px;
        border-radius: 8px;
    }
    
    .view-all-images svg {
        width: 18px;
        height: 18px;
    }
    
    .gallery-thumbnails {
        gap: 10px;
    }
    
    .thumbnail-item {
        width: calc(50% - 5px);
        height: 150px;
        border-radius: 6px;
    }
    
    .apartment-title {
        font-size: 22px;
        margin-bottom: 12px;
        line-height: 1.3;
    }
    
    .apartment-header-info {
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .price-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .price-original {
        font-size: 18px;
    }
    
    .price-current {
        font-size: 24px;
    }
    
    .rating-section {
        gap: 6px;
    }
    
    .star {
        font-size: 14px;
    }
    
    .rating-count {
        font-size: 12px;
    }
    
    .btn-book-room {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        border-radius: 50px;
    }
    
    .discount-note {
        font-size: 14px;
    }
    
    .apartment-contact-info {
        margin-bottom: 20px;
    }
    
    .apartment-address,
    .apartment-hotline {
        font-size: 16px;
        line-height: 1.5;
    }
    
    .apartment-amenities-icons {
        gap: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        justify-content: center;
    }
    
    .amenity-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
    
    .amenity-icon {
        width: 50px;
        height: 50px;
    }
    
    .amenity-item span {
        font-size: 14px;
    }
    
    .apartment-separator {
        margin: 20px 0;
    }
    
    .apartment-description-section,
    .apartment-section {
        margin-bottom: 30px;
    }
    
    .apartment-section .section-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .apartment-description-section .apartment-description,
    .apartment-amenities-content,
    .apartment-policy {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .apartment-description-section .apartment-description p,
    .apartment-amenities-content p,
    .apartment-policy p {
        margin-bottom: 12px;
    }
    
    .booking-modal-content {
        padding: 25px 15px;
        width: 95%;
        max-height: 90vh;
        border-radius: 8px;
    }
    
    .booking-modal-close {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
    }
    
    .booking-form-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .gallery-modal-content {
        padding: 20px 15px;
    }
    
    .gallery-modal-main {
        height: 60vh;
        margin-bottom: 15px;
    }
    
    .gallery-modal-thumbnails {
        gap: 8px;
    }
    
    .modal-thumbnail {
        width: 70px;
        height: 70px;
    }
    
    .gallery-modal-prev,
    .gallery-modal-next {
        width: 40px;
        height: 40px;
    }
    
    .gallery-modal-prev {
        left: 10px;
    }
    
    .gallery-modal-next {
        right: 10px;
    }
}

/* ========================================
   PAGE CAU CHUYEN (Trang Câu chuyện)
   ======================================== */

.page-cau-chuyen {
    padding: 0;
}

/* Breadcrumb */
.page-cau-chuyen .breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.page-cau-chuyen .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.page-cau-chuyen .breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s;
}

.page-cau-chuyen .breadcrumb a:hover {
    color: #4c291b;
}

.page-cau-chuyen .breadcrumb .separator {
    color: #999;
}

.page-cau-chuyen .breadcrumb .current {
    color: #4c291b;
    font-weight: 500;
}

/* Hero Section */
.story-hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.story-hero-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.story-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Story Title Section */
.story-title-section {
    padding: 50px 0;
}

.story-page-title {
    font-size: 40px;
    font-weight: 400;
    color: #4c291b;
    text-align: center;
    margin: 0;
    line-height: normal;
}

/* Story Content Section */
.story-content-section {
    padding: 0 0 50px;
}

.story-content-wrapper {
    display: grid;
    grid-template-columns: 588px 1fr;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.story-image-left {
    width: 100%;
}

.story-image-card {
    width: 100%;
    height: 410px;
    background: #eff2f6;
    border-radius: 26px;
    overflow: hidden;
}

.story-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-text-right {
    padding-top: 0;
}

.story-description {
    font-size: 20px;
    line-height: 1.5;
    color: #565966;
    font-weight: 300;
}

.story-description p {
    margin-bottom: 24px;
}

.story-description p:last-child {
    margin-bottom: 0;
}

.story-image-2-section {
    padding: 0 0 50px;
}

.story-image-2-wrapper {
    display: grid;
    grid-template-columns: 1fr 588px;
    gap: 40px;
    align-items: flex-start;
}

.story-image-2-content {
    padding-right: 40px;
}

.story-image-2-title {
    font-size: 24px;
    font-weight: 600;
    color: #23252e;
    margin: 0 0 20px;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.story-image-2-title svg {
    flex-shrink: 0;
}

.story-image-2-text {
    font-size: 18px;
    line-height: 1.6;
    color: #23252e;
    font-weight: 400;
}

.story-image-2-text p {
    margin-bottom: 16px;
}

.story-image-2-text p:last-child {
    margin-bottom: 0;
}

.story-image-2-text ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.story-image-2-text li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-left: 0;
}

.story-image-2-text li::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #4c291b;
    border-radius: 50%;
    margin-top: 4px;
}

.story-image-2-image {
    width: 100%;
}

.story-image-2-wrapper .story-image-card {
    width: 100%;
    height: 410px;
}

/* Values Section */
.story-values-section {
    padding: 50px 0;
}

.story-values-wrapper {
    display: grid;
    grid-template-columns: 1fr 419px;
    gap: 50px;
    align-items: flex-start;
}

.story-values-content {
    max-width: 688px;
}

.story-values-title {
    font-size: 42px;
    font-weight: 300;
    color: #23252e;
    line-height: 1.5;
    margin: 0 0 24px;
    letter-spacing: -1.26px;
}

.story-values-description {
    font-size: 20px;
    line-height: 1.5;
    color: #23252e;
    font-weight: 300;
    margin: 0 0 24px;
}

/* Accordion */
.story-accordion {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.accordion-item {
    border-bottom: 1px solid #e1e1e1;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 12px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.accordion-header:hover {
    opacity: 0.8;
}

.accordion-title {
    font-size: 24px;
    font-weight: 300;
    color: #4c291b;
    margin: 0;
    line-height: 32px;
}

.accordion-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 2000px;
    transition: max-height 0.5s ease-in;
}

.accordion-text {
    font-size: 18px;
    line-height: 1.4;
    color: #23252e;
    font-weight: 300;
    padding: 16px 0;
}

.accordion-text p {
    margin-bottom: 16px;
}

.accordion-text p:last-child {
    margin-bottom: 0;
}

.accordion-separator {
    height: 1px;
    background: #e1e1e1;
    margin: 16px 0 0;
}

/* Values Image */
.story-values-image {
    position: relative;
}

.story-values-image-circle {
    width: 419px;
    height: 719px;
    border-radius: 500px;
    overflow: hidden;
    background: #fff;
    backdrop-filter: blur(1.517px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.story-values-image-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive - Page Cau Chuyen */
@media (max-width: 1200px) {
    .story-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .story-image-left {
        order: 1;
    }
    
    .story-text-right {
        order: 2;
    }
    
    .story-image-2-section {
        padding-bottom: 40px;
    }
    
    .story-image-2-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .story-image-2-content {
        padding-right: 0;
        order: 1;
    }
    
    .story-image-2-image {
        order: 2;
    }
    
    .story-image-2-wrapper .story-image-card {
        width: 100%;
        max-width: 588px;
    }
    
    .story-values-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .story-values-image {
        order: -1;
        display: flex;
        justify-content: center;
    }
    
    .story-values-image-circle {
        width: 100%;
        max-width: 419px;
        height: 500px;
    }
}

@media (max-width: 992px) {
    .story-hero-image {
        height: 400px;
    }
    
    .story-title-section {
        padding: 40px 0;
    }
    
    .story-page-title {
        font-size: 32px;
    }
    
    .story-content-section {
        padding-bottom: 40px;
    }
    
    .story-image-card {
        height: 350px;
        border-radius: 20px;
    }
    
    .story-description {
        font-size: 18px;
    }
    
    .story-values-section {
        padding: 40px 0;
    }
    
    .story-values-title {
        font-size: 32px;
    }
    
    .story-values-description {
        font-size: 18px;
    }
    
    .accordion-title {
        font-size: 20px;
    }
    
    .accordion-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .page-cau-chuyen .breadcrumb-section {
        padding: 15px 0;
    }
    
    .page-cau-chuyen .breadcrumb {
        font-size: 12px;
    }
    
    .story-hero-image {
        height: 300px;
    }
    
    .story-title-section {
        padding: 30px 0;
    }
    
    .story-page-title {
        font-size: 28px;
    }
    
    .story-content-section {
        padding-bottom: 30px;
    }
    
    .story-content-wrapper {
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .story-image-card {
        height: 300px;
        border-radius: 16px;
    }
    
    .story-description {
        font-size: 16px;
    }
    
    .story-description p {
        margin-bottom: 16px;
    }
    
    .story-image-2-section {
        padding-bottom: 30px;
    }
    
    .story-image-2-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .story-image-2-text {
        font-size: 16px;
    }
    
    .story-image-2-text li {
        margin-bottom: 10px;
    }
    
    .story-values-section {
        padding: 30px 0;
    }
    
    .story-values-wrapper {
        gap: 25px;
    }
    
    .story-values-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    
    .story-values-description {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .story-accordion {
        gap: 20px;
    }
    
    .accordion-header {
        padding: 10px 0;
    }
    
    .accordion-title {
        font-size: 18px;
        line-height: 28px;
    }
    
    .accordion-text {
        font-size: 15px;
        padding: 12px 0;
    }
    
    .story-values-image-circle {
        height: 400px;
        border-radius: 300px;
    }
    
    /* Container padding for mobile */
    .page-cau-chuyen .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Story Image 2 Section Mobile */
    .story-image-2-wrapper {
        gap: 20px;
    }
    
    .story-image-2-wrapper .story-image-card {
        height: 280px;
    }
    
    /* Accordion Mobile */
    .accordion-header {
        padding: 10px 0;
    }
    
    .accordion-icon {
        width: 18px;
        height: 18px;
    }
    
    .accordion-text {
        padding: 12px 0;
    }
    
    /* Testimonials & Newsletter sections inherit from homepage responsive */
    .page-cau-chuyen .testimonials-section,
    .page-cau-chuyen .newsletter-section {
        margin: 30px 0;
    }
    
    .page-cau-chuyen .pinhub-system-listings,
    .page-cau-chuyen .search-keywords-section {
        margin: 30px 0;
        padding: 30px 0;
    }
}

/* Tablet adjustments (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
    .page-cau-chuyen .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .story-content-wrapper {
        gap: 30px;
    }
    
    .story-image-2-wrapper {
        gap: 30px;
    }
    
    .story-values-wrapper {
        gap: 40px;
    }
}

/* ========================================
   PAGE HOP TAC (Trang Hợp tác)
   ======================================== */

.page-hop-tac {
    padding: 0;
}

/* Breadcrumb */
.page-hop-tac .breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.page-hop-tac .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.page-hop-tac .breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s;
}

.page-hop-tac .breadcrumb a:hover {
    color: #4c291b;
}

.page-hop-tac .breadcrumb .separator {
    color: #999;
}

.page-hop-tac .breadcrumb .current {
    color: #4c291b;
    font-weight: 500;
}

/* Hero Section */
.cooperation-hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.cooperation-hero-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}

.cooperation-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cooperation-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.cooperation-hero-title {
    font-size: 60px;
    font-weight: 300;
    color: #fff;
    text-align: center;
    margin: 0;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: -1.2px;
    line-height: 50px;
    text-transform: capitalize;
}

/* Title Section */
.cooperation-title-section {
    padding: 50px 0;
}

.cooperation-page-title {
    font-size: 40px;
    font-weight: 400;
    color: #4c291b;
    text-align: center;
    margin: 0;
    line-height: normal;
}

/* Cooperation Content Section */
.cooperation-content-section {
    padding: 0 0 50px;
}

.cooperation-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 419px;
    gap: 50px;
    align-items: flex-start;
}

.cooperation-text-left {
    max-width: 688px;
}

.cooperation-subtitle {
    font-size: 30px;
    font-weight: 300;
    color: #23252e;
    line-height: 1.5;
    margin: 0 0 24px;
    letter-spacing: -0.9px;
}

.cooperation-description {
    font-size: 16px;
    line-height: 2;
    color: #23252e;
    font-weight: 300;
}

.cooperation-description p {
    margin-bottom: 16px;
}

.cooperation-description p:last-child {
    margin-bottom: 0;
}

.cooperation-description ul {
    list-style: disc;
    margin-left: 24px;
    margin-bottom: 16px;
}

.cooperation-description li {
    margin-bottom: 8px;
}

.cooperation-image-right {
    width: 100%;
}

.cooperation-image-card {
    width: 419px;
    height: 658px;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    backdrop-filter: blur(1.517px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cooperation-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Form Section */
.cooperation-form-section {
    position: relative;
    padding: 80px 0;
    background: #4c291b;
    margin: 50px 0;
}

.cooperation-form-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #4c291b;
    z-index: 0;
}

.cooperation-form-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 419px;
    gap: 50px;
    align-items: flex-start;
}

.cooperation-form-content {
    max-width: 688px;
}

.cooperation-form-title {
    font-size: 43px;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 20px;
    line-height: normal;
}

.cooperation-form-subtitle {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 40px;
}

/* Cooperation Form */
.cooperation-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-row.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-row-images {
    align-items: flex-end;
}

.form-row-images .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row-images .form-group:last-child {
    flex: 1;
}

.cooperation-form label {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    line-height: 1.4;
}

.cooperation-form input[type="text"],
.cooperation-form input[type="tel"],
.cooperation-form input[type="number"],
.cooperation-form input[type="email"],
.cooperation-form textarea {
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 300;
    color: #4c291b;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    line-height: 24px;
}

.cooperation-form textarea {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

.cooperation-form input::placeholder,
.cooperation-form textarea::placeholder {
    color: #4c291b;
    opacity: 1;
}

.cooperation-form textarea {
    resize: vertical;
    min-height: 100px;
}

.input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-unit input {
    padding-right: 40px;
}

.input-unit {
    position: absolute;
    right: 16px;
    font-size: 16px;
    color: #4c291b;
    pointer-events: none;
    font-weight: 300;
}

.input-unit sup {
    font-size: 12px;
}

/* Nested form-row inside form-group for Chi tiết section */
.form-group .form-row {
    margin-top: 0;
}

.form-group > label:first-child {
    margin-bottom: 8px;
}

/* Image Upload */
.image-upload-area {
    border: 1px solid #cecece;
    border-radius: 4px;
    background: #fff;
    padding: 0;
    min-height: 48px;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    gap: 0;
}

.image-upload-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px dashed #cecece;
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    min-width: 220px;
    height: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
    background: #fff;
}

.image-upload-label:hover {
    border-color: #bd651f;
    background: #f9f9f9;
}

.image-upload-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-upload-label svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.image-upload-label span {
    font-size: 16px;
    color: #4c291b;
    font-weight: 300;
    white-space: nowrap;
}

.image-preview-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    flex: 1;
    min-height: 48px;
    overflow-x: auto;
    overflow-y: hidden;
}

.image-preview-item {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ddd;
    flex-shrink: 0;
    background: #f5f5f5;
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.remove-image {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: background 0.3s;
    padding: 0;
}

.remove-image:hover {
    background: rgba(0, 0, 0, 0.9);
}

.form-note {
    margin-top: 10px;
}

.form-note p {
    font-size: 14px;
    font-weight: 300;
    color: #4c291b;
    margin: 0;
    text-align: center;
}

.btn-cooperation-submit {
    background: #bd651f;
    color: #fff;
    border: none;
    border-radius: 58px;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s;
    align-self: flex-start;
    margin-top: 10px;
}

.btn-cooperation-submit:hover {
    background: #a0551a;
    transform: translateY(-2px);
}

.cooperation-form-message {
    margin-top: 20px;
}

.cooperation-form-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
}

.cooperation-form-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
}

.cooperation-form-image {
    width: 100%;
}

.cooperation-form-image-card {
    width: 419px;
    height: 658px;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    backdrop-filter: blur(1.517px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cooperation-form-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive - Page Hop Tac */
@media (max-width: 1200px) {
    .cooperation-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .cooperation-image-right {
        order: -1;
        display: flex;
        justify-content: center;
    }
    
    .cooperation-image-card {
        width: 100%;
        max-width: 419px;
        height: 500px;
    }
    
    .cooperation-form-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .cooperation-form-image {
        order: -1;
        display: flex;
        justify-content: center;
    }
    
    .cooperation-form-image-card {
        width: 100%;
        max-width: 419px;
        height: 500px;
    }
}

@media (max-width: 992px) {
    .cooperation-hero-image {
        height: 400px;
    }
    
    .cooperation-hero-title {
        font-size: 48px;
        line-height: 44px;
    }
    
    .cooperation-title-section {
        padding: 40px 0;
    }
    
    .cooperation-page-title {
        font-size: 32px;
    }
    
    .cooperation-content-section {
        padding-bottom: 40px;
    }
    
    .cooperation-subtitle {
        font-size: 26px;
    }
    
    .cooperation-description {
        font-size: 15px;
    }
    
    .cooperation-form-section {
        padding: 60px 0;
    }
    
    .cooperation-form-title {
        font-size: 36px;
    }
    
    .cooperation-form-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .page-hop-tac .breadcrumb-section {
        padding: 15px 0;
    }
    
    .page-hop-tac .breadcrumb {
        font-size: 12px;
    }
    
    .cooperation-hero-image {
        height: 300px;
    }
    
    .cooperation-hero-overlay {
        padding: 20px;
    }
    
    .cooperation-hero-title {
        font-size: 36px;
        line-height: 32px;
    }
    
    .cooperation-title-section {
        padding: 30px 0;
    }
    
    .cooperation-page-title {
        font-size: 28px;
    }
    
    .cooperation-content-section {
        padding-bottom: 30px;
    }
    
    .cooperation-content-wrapper {
        gap: 25px;
    }
    
    .cooperation-subtitle {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .cooperation-description {
        font-size: 14px;
    }
    
    .cooperation-image-card {
        height: 400px;
        border-radius: 20px;
    }
    
    .cooperation-form-section {
        padding: 40px 0;
        margin: 30px 0;
    }
    
    .cooperation-form-wrapper {
        gap: 25px;
    }
    
    .cooperation-form-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .cooperation-form-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-row.three-columns {
        grid-template-columns: 1fr;
    }
    
    .cooperation-form label {
        font-size: 14px;
    }
    
    .cooperation-form input[type="text"],
    .cooperation-form input[type="tel"],
    .cooperation-form input[type="number"],
    .cooperation-form input[type="email"],
    .cooperation-form textarea {
        font-size: 14px;
        padding: 10px 14px;
    }
    
    .image-upload-area {
        padding: 15px;
        min-height: 100px;
    }
    
    .image-upload-label {
        padding: 15px;
    }
    
    .image-upload-label svg {
        width: 20px;
        height: 20px;
    }
    
    .image-upload-label span {
        font-size: 14px;
    }
    
    .image-preview-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
    
    .form-note p {
        font-size: 12px;
    }
    
    .btn-cooperation-submit {
        width: 100%;
        font-size: 14px;
        padding: 12px 30px;
    }
    
    .cooperation-form-image-card {
        height: 400px;
        border-radius: 20px;
    }
    
    /* Container padding for mobile */
    .page-hop-tac .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Why Us Section Mobile - Same as front page */
    .page-hop-tac .why-us {
        padding: 30px 15px;
        margin: 25px 0;
    }
    
    .page-hop-tac .why-us .section-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .page-hop-tac .why-us-wrapper {
        padding: 0 50px;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    
    .page-hop-tac .why-us-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .page-hop-tac .why-us-grid::-webkit-scrollbar {
        display: none;
    }
    
    .page-hop-tac .why-us-item {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 25px 15px;
        border-right: none !important;
        border-bottom: none !important;
        box-sizing: border-box;
        margin: 0;
        width: 100%;
        scroll-snap-align: start;
    }
    
    .page-hop-tac .why-us-carousel-btn {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(227, 208, 187, 0.9);
        border: none;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
    }
    
    .page-hop-tac .why-us-carousel-btn:hover {
        background: rgba(227, 208, 187, 1);
    }
    
    .page-hop-tac .why-us-carousel-btn svg {
        width: 20px;
        height: 20px;
        color: #4c291b;
    }
    
    .page-hop-tac .why-us-carousel-prev {
        left: 5px;
    }
    
    .page-hop-tac .why-us-carousel-next {
        right: 5px;
    }
    
    .page-hop-tac .why-us-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }
    
    .page-hop-tac .why-us-item h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .page-hop-tac .why-us-item p {
        font-size: 14px;
        line-height: 1.6;
        max-width: 100%;
    }
    
    /* Hệ thống PIN Section Mobile - Same as front page */
    .page-hop-tac .pinhub-system-listings {
        margin: 25px 0;
    }
    
    .page-hop-tac .pinhub-system-listings .system-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 20px;
        margin-top: 30px;
    }
    
    .page-hop-tac .system-item {
        min-height: 120px;
    }
    
    .page-hop-tac .system-content {
        padding: 15px;
    }
    
    .page-hop-tac .system-content h3 {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .apartment-title {
        font-size: 24px;
    }
    
    .price-current {
        font-size: 24px;
    }
    
    .price-original {
        font-size: 20px;
    }
    
    .gallery-main {
        height: 300px;
    }
    
    .gallery-thumbnails {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .thumbnail-item {
        height: 150px;
    }
    
    .apartment-amenities-icons {
        gap: 20px;
        justify-content: center;
    }
    
    .amenity-item {
        flex: 0 0 calc(33.333% - 14px);
    }
    
    .amenity-icon {
        width: 50px;
        height: 50px;
    }
    
    .amenity-item span {
        font-size: 16px;
    }
    
    .apartment-section .section-title {
        font-size: 24px;
    }
    
    .gallery-modal-content {
        padding: 20px;
    }
    
    .gallery-modal-main {
        height: 60vh;
    }
    
    .gallery-modal-thumbnails {
        gap: 8px;
    }
    
    .modal-thumbnail {
        width: 80px;
        height: 80px;
    }
}

/* ============================================
   TRANG CHÍNH SÁCH
   ============================================ */

.page-chinh-sach {
    padding: 0;
}

/* Breadcrumb */
.page-chinh-sach .breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.page-chinh-sach .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.page-chinh-sach .breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s;
}

.page-chinh-sach .breadcrumb a:hover {
    color: #4c291b;
}

.page-chinh-sach .breadcrumb .separator {
    color: #999;
}

.page-chinh-sach .breadcrumb .current {
    color: #4c291b;
    font-weight: 500;
}

/* Page Title */
.policy-page-title-section {
    padding: 40px 0;
    background: #fff;
}

.policy-page-title {
    font-size: 40px;
    font-weight: 400;
    color: #4c291b;
    text-align: center;
    margin: 0;
}

/* Policy Sections */
.policy-section {
    padding: 50px 0;
    background: #fff;
}

.policy-section-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.policy-section-wrapper.image-left {
    grid-template-columns: 588px 1fr;
}

.policy-section-wrapper.image-right {
    grid-template-columns: 1fr 588px;
}

.policy-section-wrapper.image-right .policy-section-image {
    order: 2;
}

.policy-section-wrapper.image-right .policy-section-content {
    order: 1;
}

.policy-section-image {
    width: 100%;
}

.policy-image-card {
    background: #eff2f6;
    border-radius: 26px;
    overflow: hidden;
    width: 588px;
    height: 410px;
    position: relative;
}

.policy-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.policy-section-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.policy-section-title {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #565966;
    line-height: 1.5;
    margin: 0;
}

.policy-section-text {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #565966;
    line-height: 1.5;
}

.policy-section-text p {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #565966;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

/* FAQ Section */
.policy-faq-section {
    padding: 80px 0;
    background: #fff;
}

.faq-title {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 300;
    color: #23252e;
    text-align: center;
    margin: 0 0 60px 0;
    letter-spacing: -1.26px;
}

.faq-list {
    max-width: 1072px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-item {
    border-bottom: 1px solid #4c291b;
    padding-bottom: 8px;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px 12px 0;
    cursor: pointer;
    gap: 140px;
}

.faq-question h3 {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: #4c291b;
    line-height: 32px;
    margin: 0;
    flex: 1;
}

.faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-icon svg {
    width: 100%;
    height: 100%;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.faq-item.active .faq-answer {
    max-height: 2000px;
    padding: 20px 0 16px 0;
}

.faq-answer-content {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #23252e;
    line-height: 1.4;
}

.faq-answer-content p {
    font-family: 'Be Vietnam Pro', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #23252e;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .policy-section-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .policy-section-wrapper.image-left,
    .policy-section-wrapper.image-right {
        grid-template-columns: 1fr;
    }
    
    .policy-section-wrapper.image-right .policy-section-image,
    .policy-section-wrapper.image-right .policy-section-content {
        order: initial;
    }
    
    .policy-image-card {
        width: 100%;
        max-width: 588px;
        margin: 0 auto;
    }
    
    .faq-question {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .page-chinh-sach .breadcrumb-section {
        padding: 15px 0;
    }
    
    .page-chinh-sach .breadcrumb {
        font-size: 12px;
    }
    
    .policy-page-title-section {
        padding: 30px 0;
    }
    
    .policy-page-title {
        font-size: 32px;
    }
    
    .policy-section {
        padding: 40px 0;
    }
    
    .policy-section-wrapper {
        gap: 30px;
    }
    
    .policy-image-card {
        height: 300px;
        border-radius: 20px;
    }
    
    .policy-section-title {
        font-size: 18px;
    }
    
    .policy-section-text,
    .policy-section-text p {
        font-size: 16px;
    }
    
    .policy-faq-section {
        padding: 50px 0;
    }
    
    .faq-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    
    .faq-list {
        gap: 20px;
    }
    
    .faq-question {
        padding: 10px 4px 10px 0;
        gap: 20px;
    }
    
    .faq-question h3 {
        font-size: 20px;
        line-height: 28px;
    }
    
    .faq-answer-content,
    .faq-answer-content p {
        font-size: 16px;
    }
    
    .page-chinh-sach .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ============================================
   TRANG DANH SÁCH TIN TỨC (ARCHIVE)
   ============================================ */

.archive-news-page {
    padding: 0;
}

/* Breadcrumb */
.archive-news-page .breadcrumb-section {
    padding: 20px 0;
    background: #fff;
}

.archive-news-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4c291b;
}

.archive-news-page .breadcrumb a {
    color: #bd651f;
    text-decoration: none;
    transition: color 0.3s;
}

.archive-news-page .breadcrumb a:hover {
    color: #4c291b;
}

.archive-news-page .breadcrumb .separator {
    color: #999;
}

.archive-news-page .breadcrumb .current {
    color: #4c291b;
    font-weight: 500;
}

/* Banner Section */
.news-archive-banner {
    position: relative;
    min-height: 400px;
    background: linear-gradient(135deg, #4c291b 0%, #6b3d2a 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
    overflow: hidden;
}

.news-archive-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(76, 41, 27, 0.6);
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.banner-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 40px 0;
    line-height: 1.2;
}

.search-keywords-banner {
    margin-top: 30px;
}

.keywords-label {
    font-size: 16px;
    color: #fff;
    margin: 0 0 20px 0;
    font-weight: 300;
}

.keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.keyword-tag {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    color: #4c291b;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.keyword-tag:hover {
    background: #bd651f;
    color: #fff;
    transform: translateY(-2px);
}

/* Featured News Section */
.featured-news-section {
    padding: 50px 0;
    background: #fff;
}

.featured-news-section {
    padding: 50px 0;
    background: #fff;
}

.featured-news-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.featured-news-grid {
    display: grid;
    grid-template-columns: 572px 270px 270px;
    grid-template-rows: 200px 200px;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

.featured-news-item {
    display: contents;
}

.featured-news-item.featured-large .featured-news-card {
    grid-column: 1;
    grid-row: 1 / 3;
}

.featured-news-item.featured-small:nth-child(2) .featured-news-card {
    grid-column: 2;
    grid-row: 1;
}

.featured-news-item.featured-small:nth-child(3) .featured-news-card {
    grid-column: 3;
    grid-row: 1;
}

.featured-news-item.featured-small:nth-child(4) .featured-news-card {
    grid-column: 2;
    grid-row: 2;
}

.featured-news-item.featured-small:nth-child(5) .featured-news-card {
    grid-column: 3;
    grid-row: 2;
}

.featured-news-carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    .featured-news-carousel-btn {
        display: none !important;
    }
}

.featured-news-carousel-btn:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.featured-news-carousel-btn svg {
    width: 24px;
    height: 24px;
    color: #4c291b;
}

.featured-news-carousel-prev {
    left: 0;
}

.featured-news-carousel-next {
    right: 0;
}

.featured-news-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.featured-small .featured-news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.featured-card-image {
    position: relative;
    width: 100%;
    height: 304px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.featured-small .featured-card-image {
    height: 130px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.featured-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
}

.featured-small .featured-card-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.featured-news-card:hover .featured-card-image img {
    transform: scale(1.05);
}

.featured-card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.featured-small .featured-card-content {
    padding: 12px 14px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.featured-card-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #4c291b;
    display: block;
}

.featured-small .featured-card-title {
    font-size: 14px;
    margin: 0 0 8px 0;
    line-height: 1.4;
    font-weight: 600;
    color: #4c291b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em;
}

.featured-card-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.featured-card-title a:hover {
    color: #bd651f;
}

.featured-card-excerpt {
    flex: 1;
    margin-bottom: 16px;
    color: #4c291b;
    font-size: 16px;
    line-height: 1.5;
    display: block;
}

.featured-small .featured-card-excerpt {
    display: none;
}

.featured-card-meta {
    margin-top: auto;
    font-size: 14px;
    color: #8d8d8d;
}

.featured-small .featured-card-meta {
    display: none;
}

/* Regular News Section - Archive Page Only */
.archive-news-page .regular-news-section {
    padding: 50px 0;
    background: #fff;
}

.archive-news-page .regular-news-layout {
    display: grid;
    grid-template-columns: 1fr 299px;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.archive-news-page .regular-news-main {
    min-width: 0;
}

.archive-news-page .regular-news-grid-wrapper {
    position: relative;
    overflow: hidden;
}

.archive-news-page .regular-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.archive-news-page .news-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.archive-news-page .sidebar-ad {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #f5f5f5;
}

.archive-news-page .sidebar-ad a {
    display: block;
    width: 100%;
}

.archive-news-page .sidebar-ad img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.archive-news-page .sidebar-ad-placeholder {
    width: 100%;
    height: 480px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

.archive-news-page .regular-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.archive-news-page .regular-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.archive-news-page .regular-card-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.archive-news-page .regular-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.archive-news-page .regular-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.archive-news-page .regular-news-card:hover .regular-card-image img {
    transform: scale(1.05);
}

.archive-news-page .regular-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.archive-news-page .regular-card-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #4c291b;
}

.archive-news-page .regular-card-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-news-page .regular-card-title a:hover {
    color: #bd651f;
}

.archive-news-page .regular-card-excerpt {
    margin-bottom: 16px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-news-page .regular-card-meta {
    font-size: 14px;
    color: #8d8d8d;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* Pagination */
.pagination-wrapper {
    margin-top: 50px;
    text-align: center;
}

.pagination-wrapper .page-numbers {
    display: inline-flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-wrapper .page-numbers li {
    display: inline-block;
}

.pagination-wrapper .page-numbers a,
.pagination-wrapper .page-numbers span {
    display: inline-block;
    padding: 10px 16px;
    background: #fff;
    color: #4c291b;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    font-size: 16px;
}

.pagination-wrapper .page-numbers a:hover {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
}

.pagination-wrapper .page-numbers .current {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
}

.pagination-wrapper .page-numbers .prev,
.pagination-wrapper .page-numbers .next {
    font-weight: 600;
}

/* Responsive */
@media (max-width: 992px) {
    .featured-news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .featured-news-item.featured-large .featured-news-card {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    
    .regular-news-layout {
        grid-template-columns: 1fr;
    }
    
    .news-sidebar {
        position: static;
        margin-top: 30px;
    }
    
    .regular-news-grid {
        grid-template-columns: 1fr;
    }
    
    .regular-news-card {
        flex-direction: column;
    }
    
    .regular-card-image {
        width: 100%;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .archive-news-page .breadcrumb-section {
        padding: 15px 0;
    }
    
    .archive-news-page .breadcrumb {
        font-size: 12px;
    }
    
    .news-archive-banner {
        min-height: 300px;
        margin-bottom: 30px;
    }
    
    .banner-content {
        padding: 40px 15px;
    }
    
    .banner-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .keywords-label {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .keyword-tag {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .featured-news-section {
        padding: 30px 0;
    }
    
    .featured-news-section .section-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .featured-news-wrapper {
        padding: 0 50px;
        position: relative;
        overflow: hidden;
    }
    
    .featured-news-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .featured-news-grid::-webkit-scrollbar {
        display: none;
    }
    
    .featured-news-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
        margin-right: 20px;
    }
    
    .featured-news-card:last-child {
        margin-right: 0;
    }
    
    .featured-news-carousel-btn {
        display: flex;
    }
    
    .featured-card-image {
        height: 250px;
    }
    
    .featured-card-title {
        font-size: 18px;
    }
    
    .featured-card-excerpt {
        font-size: 14px;
    }
    
    .archive-news-page .regular-news-section {
        padding: 30px 0;
    }
    
    .archive-news-page .regular-news-grid-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 10px;
    }
    
    .archive-news-page .regular-news-grid-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .archive-news-page .regular-news-grid {
        display: flex;
        gap: 20px;
        padding: 0 20px;
        scroll-snap-type: x mandatory;
    }
    
    .archive-news-page .regular-news-card {
        flex: 0 0 calc(100% - 40px);
        min-width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        scroll-snap-align: start;
    }
    
    .archive-news-page .regular-card-image {
        height: 200px;
    }
    
    .archive-news-page .regular-card-title {
        font-size: 18px;
    }
    
    .archive-news-page .regular-card-excerpt {
        font-size: 14px;
    }
    
    .archive-news-page .pagination-wrapper {
        margin-top: 30px;
    }
    
    .archive-news-page .pagination-wrapper .page-numbers a,
    .archive-news-page .pagination-wrapper .page-numbers span {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .archive-news-page .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   Single News Page Styles
   ======================================== */

.single-news-page {
    background: #fff;
}

/* Hero Image Section */
.single-news-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-bottom: 0;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}

/* Single News Layout */
.single-news-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    padding: 40px 0;
}

.single-news-main {
    min-width: 0;
}

/* Article Header */
.article-header {
    margin-bottom: 40px;
}

.article-category {
    margin-bottom: 16px;
}

.article-category a {
    display: inline-block;
    padding: 6px 16px;
    background: #4c291b;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.article-category a:hover {
    background: #bd651f;
}

.article-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    color: #4c291b;
    margin: 0 0 24px 0;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.meta-item svg {
    color: #bd651f;
    flex-shrink: 0;
}

/* Article Content */
.article-content {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 50px;
}

.article-content p {
    margin-bottom: 24px;
}

.article-content h2 {
    font-size: 32px;
    font-weight: 600;
    color: #4c291b;
    margin: 40px 0 20px 0;
    line-height: 1.3;
}

.article-content h3 {
    font-size: 26px;
    font-weight: 600;
    color: #4c291b;
    margin: 32px 0 16px 0;
    line-height: 1.3;
}

.article-content h4 {
    font-size: 22px;
    font-weight: 600;
    color: #4c291b;
    margin: 28px 0 14px 0;
    line-height: 1.3;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 30px 0;
}

.article-content ul,
.article-content ol {
    margin: 24px 0;
    padding-left: 30px;
}

.article-content li {
    margin-bottom: 12px;
}

.article-content blockquote {
    border-left: 4px solid #bd651f;
    padding: 20px 30px;
    margin: 30px 0;
    background: #f8f9fa;
    border-radius: 8px;
    font-style: italic;
    color: #555;
}

.article-content a {
    color: #bd651f;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.article-content a:hover {
    color: #4c291b;
}

/* Article Footer */
.article-footer {
    padding: 40px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 40px;
}

.article-tags {
    margin-bottom: 30px;
}

.tags-title {
    font-size: 16px;
    font-weight: 600;
    color: #4c291b;
    margin-bottom: 12px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    display: inline-block;
    padding: 6px 14px;
    background: #f5f5f5;
    color: #4c291b;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.tag-item:hover {
    background: #4c291b;
    color: #fff;
}

/* Share Buttons */
.article-share {
    margin-top: 30px;
}

.share-title {
    font-size: 16px;
    font-weight: 600;
    color: #4c291b;
    margin-bottom: 16px;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #4c291b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.share-btn:hover {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
    transform: translateY(-2px);
}

.share-btn svg {
    flex-shrink: 0;
}

.share-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.share-twitter:hover {
    background: #1da1f2;
    border-color: #1da1f2;
    color: #fff;
}

.share-linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: #fff;
}

/* Sidebar */
.single-news-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Author Box */
.author-box {
    text-align: center;
}

.author-avatar {
    margin-bottom: 16px;
}

.author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 20px;
    font-weight: 600;
    color: #4c291b;
    margin-bottom: 12px;
}

.author-bio {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Related Posts in Sidebar */
.widget-title {
    font-size: 20px;
    font-weight: 600;
    color: #4c291b;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.related-posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.related-post-item {
    display: flex;
    gap: 12px;
}

.related-post-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-post-content {
    flex: 1;
    min-width: 0;
}

.related-post-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.related-post-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-post-title a:hover {
    color: #bd651f;
}

.related-post-date {
    font-size: 12px;
    color: #8d8d8d;
}

/* Related Posts Section (Full Width) */
.related-posts-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.related-posts-section .section-title {
    font-size: 32px;
    font-weight: 300;
    color: #4c291b;
    text-align: center;
    margin-bottom: 40px;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.related-post-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.related-card-image {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-card-image img {
    transform: scale(1.05);
}

.related-card-content {
    padding: 20px;
}

.related-card-category {
    display: inline-block;
    padding: 4px 12px;
    background: #4c291b;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    margin-bottom: 12px;
}

.related-card-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.related-card-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-title a:hover {
    color: #bd651f;
}

.related-card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-date {
    font-size: 12px;
    color: #8d8d8d;
}

/* Responsive */
@media (max-width: 992px) {
    .single-news-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .single-news-sidebar {
        position: static;
    }
    
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .article-title {
        font-size: 32px;
    }
    
    .article-content {
        font-size: 16px;
    }
    
    .article-content h2 {
        font-size: 28px;
    }
    
    .article-content h3 {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .single-news-hero {
        height: 300px;
    }
    
    .article-title {
        font-size: 28px;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .article-content {
        font-size: 16px;
    }
    
    .article-content h2 {
        font-size: 24px;
    }
    
    .article-content h3 {
        font-size: 20px;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Search Results Page Styles
   ======================================== */

.search-results-page {
    background: #fff;
    padding-bottom: 60px;
}

/* Search Page Header */
.search-page-header {
    padding: 40px 0 30px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 40px;
}

.search-page-title {
    font-size: 32px;
    font-weight: 600;
    color: #4c291b;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.search-query {
    color: #bd651f;
    font-weight: 700;
}

.search-results-count {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.search-results-count strong {
    color: #4c291b;
    font-weight: 600;
}

/* Search Results Grid */
.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 50px;
}

.search-result-item {
    display: flex;
    gap: 30px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-result-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    border-color: #bd651f;
}

.search-result-image {
    flex-shrink: 0;
    width: 280px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.search-result-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.search-result-item:hover .search-result-image img {
    transform: scale(1.05);
}

.search-result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-result-type {
    display: inline-block;
    padding: 4px 12px;
    background: #4c291b;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    margin-bottom: 12px;
    width: fit-content;
}

.search-result-title {
    margin: 0 0 16px 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.search-result-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.search-result-title a:hover {
    color: #bd651f;
}

.search-result-excerpt {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 20px;
    flex: 1;
}

.search-result-excerpt mark {
    background: #ffc642;
    color: #4c291b;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
}

.search-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.search-result-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #8d8d8d;
}

.search-result-date svg {
    flex-shrink: 0;
}

.search-result-link a {
    color: #bd651f;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.3s ease;
}

.search-result-link a:hover {
    color: #4c291b;
}

/* No Results */
.no-search-results {
    text-align: center;
    padding: 80px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.no-results-icon {
    margin-bottom: 30px;
    opacity: 0.5;
}

.no-results-title {
    font-size: 28px;
    font-weight: 600;
    color: #4c291b;
    margin: 0 0 16px 0;
}

.no-results-message {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 24px;
}

.no-results-message strong {
    color: #4c291b;
}

.no-results-suggestions {
    font-size: 16px;
    font-weight: 600;
    color: #4c291b;
    margin: 24px 0 12px 0;
}

.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: left;
    display: inline-block;
}

.suggestions-list li {
    padding: 8px 0;
    color: #666;
    font-size: 15px;
    position: relative;
    padding-left: 24px;
}

.suggestions-list li:before {
    content: "•";
    color: #bd651f;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Search Form Inline */
.no-results-search-form {
    margin-top: 40px;
}

.search-form-inline {
    max-width: 500px;
    margin: 0 auto;
}

.search-input-wrapper-inline {
    display: flex;
    gap: 0;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.search-input-wrapper-inline:focus-within {
    border-color: #bd651f;
}

.search-input-inline {
    flex: 1;
    padding: 14px 20px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #4c291b;
    background: #fff;
}

.search-input-inline::placeholder {
    color: #999;
}

.search-submit-inline {
    padding: 14px 24px;
    background: #4c291b;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit-inline:hover {
    background: #bd651f;
}

/* Popular Posts Section */
.popular-posts-section {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 2px solid #e0e0e0;
}

.popular-posts-title {
    font-size: 28px;
    font-weight: 600;
    color: #4c291b;
    text-align: center;
    margin-bottom: 40px;
}

.popular-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.popular-post-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.popular-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.popular-post-image {
    display: block;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.popular-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-post-card:hover .popular-post-image img {
    transform: scale(1.05);
}

.popular-post-content {
    padding: 20px;
}

.popular-post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.popular-post-title a {
    color: #4c291b;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-post-title a:hover {
    color: #bd651f;
}

.popular-post-date {
    font-size: 12px;
    color: #8d8d8d;
}

/* Search Pagination */
.search-pagination-wrapper {
    margin-top: 50px;
    text-align: center;
}

.search-pagination-wrapper .page-numbers {
    display: inline-flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-pagination-wrapper .page-numbers li {
    display: inline-block;
}

.search-pagination-wrapper .page-numbers a,
.search-pagination-wrapper .page-numbers span {
    display: inline-block;
    padding: 10px 16px;
    background: #fff;
    color: #4c291b;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    font-size: 16px;
}

.search-pagination-wrapper .page-numbers a:hover {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
}

.search-pagination-wrapper .page-numbers .current {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
}

/* Responsive */
@media (max-width: 992px) {
    .search-result-item {
        flex-direction: column;
        gap: 20px;
    }
    
    .search-result-image {
        width: 100%;
        height: 250px;
    }
    
    .popular-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .search-page-title {
        font-size: 24px;
    }
    
    .search-result-item {
        padding: 20px;
    }
    
    .search-result-title {
        font-size: 20px;
    }
    
    .search-result-excerpt {
        font-size: 15px;
    }
    
    .search-result-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .popular-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .no-results-title {
        font-size: 24px;
    }
}

/* ========================================
   Search Modal Styles
   ======================================== */

.search-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.search-modal-overlay.active {
    display: flex;
}

.search-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px;
    border-bottom: 1px solid #e0e0e0;
}

.search-modal-title {
    font-size: 32px;
    font-weight: 600;
    color: #4c291b;
    margin: 0;
}

.search-modal-close {
    background: transparent;
    border: none;
    color: #4c291b;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.search-modal-close:hover {
    background: #f5f5f5;
    transform: rotate(90deg);
}

.search-modal-body {
    padding: 40px;
}

.search-form-modal {
    margin-bottom: 30px;
}

.search-input-wrapper {
    display: flex;
    gap: 0;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.search-input-wrapper:focus-within {
    border-color: #bd651f;
}

.search-input {
    flex: 1;
    padding: 16px 24px;
    border: none;
    outline: none;
    font-size: 18px;
    color: #4c291b;
    background: #fff;
}

.search-input::placeholder {
    color: #999;
}

.search-submit-btn {
    padding: 16px 28px;
    background: #4c291b;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit-btn:hover {
    background: #bd651f;
}

.search-suggestions {
    margin-top: 30px;
}

.suggestions-title {
    font-size: 16px;
    font-weight: 600;
    color: #4c291b;
    margin-bottom: 16px;
}

.suggestions-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.suggestion-tag {
    display: inline-block;
    padding: 10px 20px;
    background: #f5f5f5;
    color: #4c291b;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.suggestion-tag:hover {
    background: #4c291b;
    color: #fff;
    border-color: #4c291b;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .search-modal {
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .search-modal-header {
        padding: 20px;
    }
    
    .search-modal-title {
        font-size: 24px;
    }
    
    .search-modal-body {
        padding: 20px;
    }
    
    .search-input {
        font-size: 16px;
        padding: 14px 20px;
    }
    
    .search-submit-btn {
        padding: 14px 24px;
    }
}