/*
Theme Name: Vinhomes
Description: This is a child theme for Flatsome Theme
Theme URI: https://vhmseo.com
Author: vhmseo.com - 0833585658
Author URI: https://vhmseo.com
Template: flatsome
Version: 3.20.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ======================================================



2. TYPOGRAPHY & BASE STYLES=========================================*/ body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    /* Chỉnh lại độ dày cho dễ đọc */
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-bg);
    /* Nền màu kem nhẹ sang trọng */
}

/* Link mặc định */
a {
    color: var(--primary-color);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
    /* Hover chuyển sang vàng */
}

/* Các thẻ Heading - Tạo vẻ bề thế */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    /* Yêu cầu load font này trong Theme Option */
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Hiệu ứng gạch chân vàng cho H2 (Tiêu đề Section) */
h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
}

.alt-font {
    font-family: "Alex Brush", sans-serif;
    /* Giữ lại font chữ ký */
    font-weight: 400 !important;
    color: var(--secondary-color);
    /* Đổi sang màu vàng */
}

/* =========================================
   3. BUTTONS & INPUTS (NÂNG CẤP SANG TRỌNG)
   ========================================= */
/* Nút bấm chung và nút Submit */
input[type='submit'],
.button.primary,
.cta-button {
    background-color: var(--secondary-color) !important;
    /* Màu Vàng */
    color: var(--white) !important;
    border-radius: 2px !important;
    /* Bo góc vuông vức, sang hơn bo tròn 20px cũ */
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid var(--secondary-color);
    transition: all 0.3s ease;
    margin-bottom: 0;
}

input[type='submit']:hover,
.button.primary:hover,
.cta-button:hover {
    background-color: var(--primary-color) !important;
    /* Hover chuyển xanh */
    border-color: var(--primary-color);
}

/* Form Inputs - Xóa bỏ viền đỏ lòe loẹt */
input[type='email'],
input[type='tel'],
input[type='text'],
textarea,
.forminator-field--phone {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D1D1 !important;
    /* Viền xám tinh tế */
    border-radius: 2px !important;
    font-size: 15px;
    padding: 10px;
    color: var(--primary-color);
}

input:focus,
textarea:focus {
    border-color: var(--secondary-color) !important;
    /* Focus hiện viền vàng */
    box-shadow: 0 0 5px rgba(197, 160, 101, 0.2);
}

/* Giữ lại icon trong input nếu muốn, nhưng chỉnh nền trắng */
.forminator-name--field,
input[type=email],
.forminator-field--phone {
    background-color: #fff !important;
}

/* Form Tại bảng giá - Làm đẹp container */
.formtaibanggia {
    border: 2px solid var(--secondary-color);
    /* Viền vàng thay vì đỏ dotted */
    background: #fff;
    border-radius: 4px;
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

div#checkbox-1 {
    background: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #eee;
}

span.forminator-checkbox-label {
    color: var(--primary-color);
    font-weight: 500;
}

/* =========================================
   4. HEADER & NAVIGATION
   ========================================= */
.page-template-page-transparent-header-php .header-main .header-inner {
    background: rgba(255, 255, 255, 0.98);
    margin-top: 20px;
    border-radius: 0;
    /* Vuông vức */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 2px solid var(--secondary-color);
    /* Viền vàng chân header */
}

/* =========================================
   5. SECTIONS STYLING (HÒA TRỘN CSS CŨ)
   ========================================= */

.blog-wrapper .large-8.col {
    padding: 0;
}

.row-large>.col,
.blog-single .large-8.col {
    padding: 0 15px 15px
}

.col.large-12,
.row-logo .col,
.video-section .col.medium-4,
.gioi-thieu-section .col,
.tieu-chi-section .col,
.lien-he-section .col,
.footer-section .col,
.section6 .col {
    padding-bottom: 0;
}

div.img {
    margin-bottom: 35px !important;
}

/* Section 1 - List styles */
.section1 ul li {
    background-image: none !important;
    /* Xóa icon cũ nếu không hợp */
    list-style: none !important;
    padding: 7px 15px 7px 30px !important;
    margin-bottom: 5px;
    position: relative;
    border-bottom: 1px dashed #eee;
}

.section1 ul li:before {
    content: "✔";
    /* Hoặc dùng icon font */
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    /* Dấu tick màu vàng */
    font-size: 1.2em;
    background: transparent;
    padding: 0;
}

/* Video Section - Box Hover */
.video-section .box:hover>.box-text {
    background: var(--primary-color) !important;
    /* Hover chuyển xanh đậm */
}

.video-section .box .box-text h4 {
    color: var(--white);
    /* Chữ trắng khi hover */
}

.video-section .play {
    background-image: url(assets/images/play-button-blue.png);
    /* Cân nhắc thay icon màu vàng */
    filter: sepia(100%) hue-rotate(5deg) saturate(500%);
    /* Trick CSS chỉnh màu icon sang vàng */
}

/* Banner Section */
.banner-section .text-inner {
    border-radius: 2px;
    background: rgba(0, 45, 86, 0.85);
    /* Xanh trong suốt */
    padding: 20px;
    border: 1px solid var(--secondary-color);
}

/* Gioi Thieu Section - Watermark Text */
.gioi-thieu-section .heading {
    color: rgba(197, 160, 101, 0.1);
    /* Màu vàng cực nhạt */
}

.gioi-thieu-section .cot2 p {
    color: var(--primary-color);
}

/* Tab Du An */
.tab-du-an .nav-tabs>li a {
    background: var(--primary-color);
    /* Nền xanh */
    color: #fff;
    border-radius: 2px;
}

.tab-du-an .nav-tabs>li.active>a {
    background: var(--secondary-color) !important;
    /* Active màu vàng */
    color: #fff;
    border: none;
}

.tab-du-an .tab-panels {
    border-top: 2px solid var(--secondary-color);
}

/* Blog Archive & Lists */
.list-post .post-item .post-title {
    color: #fff;
    font-family: "Montserrat", sans-serif;
}

.blog-archive .post-item .post-title {
    color: var(--primary-color);
}

.blog-archive .post-item:hover>.post-title,
.recent-blog-posts a:hover {
    color: var(--secondary-color);
    /* Hover màu vàng */
}

.widget span.widget-title,
.bai-viet-lien-quan h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    display: inline-block;
    padding-bottom: 5px;
}

/* Footer */
.footer-section {
    background-color: var(--primary-color);
    /* Nền xanh đậm toàn bộ */
    background-image: none;
    /* Xóa ảnh nền cũ nếu làm rối */
    color: #ccc;
    border-top: 5px solid var(--secondary-color);
}

.footer-section .cot3 ul li a {
    color: #eee;
}

.footer-section .cot3 ul li a:hover {
    color: var(--secondary-color);
}

.absolute-footer {
    background-color: #002344;
    color: #888;
}

a.back-to-top {
    background: var(--secondary-color) !important;
}

/* Các thành phần nhỏ khác */
.tagcloud a:hover {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}

.slider-nav-dots-dashes-spaced .flickity-page-dots .dot {
    background: var(--secondary-color);
}

/* =========================================
   6. RESPONSIVE CSS (GIỮ NGUYÊN & TINH CHỈNH)
   ========================================= */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.25em;
    }

    /* Mobile Menu adjustments */
    .off-canvas-center .mfp-container {
        background: var(--primary-color);
    }

    .off-canvas-center .nav-sidebar.nav-vertical>li>a {
        font-family: "Playfair Display", serif;
        color: var(--secondary-color);
    }

    /* Fix spacing on mobile */
    div#checkbox-1 {
        margin: 0;
        padding: 15px;
    }

    .formtaibanggia p {
        margin-bottom: 0;
    }

    .stuck #logo img {
        max-height: 60px !important;
    }

    /* Bài viết liên quan Mobile */
    .bai-viet-lien-quan ul li {
        width: 50%;
    }

    .bai-viet-lien-quan ul li .box-image img {
        height: 100px;
    }
}

/* Ẩn các class nhãn cũ không dùng */
.label-new.menu-item>a:after,
.label-hot.menu-item>a:after,
.label-sale.menu-item>a:after,
.label-popular.menu-item>a:after {
    background-color: var(--secondary-color);
    /* Nếu dùng thì đổi sang màu vàng */
}