/*
Theme Name: Hung Vuong
Theme URI: https://hungvuong.local
Author: Peter
Author URI: https://hungvuong.local
Description: Theme custom cho Cong ty TNHH Thuong mai Xay dung va Dich vu Hung Vuong
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: hungvuong
*/

/* ===== BIEN MAU THUONG HIEU (bach kim - platinum pha vang, sang trong) ===== */
:root {
    --brand:       #4d5560;  /* bach kim xam dam - mau chinh (nut, tieu de) */
    --brand-dark:  #353b44;  /* graphite dam hon - hover/footer/gradient */
    --accent:      #c8a04a;  /* vang kim - mau nhan, chu noi bat */
    --accent-soft: #e3d7b8;  /* vang nhat - dung khi can diu */
    --text:        #333;
    --footer-bg:   #2f343c;  /* footer graphite cho sang trong */
    --soft:        #f5f4f1;  /* bach kim sang - nen nhe xen ke giua cac phan */
}

/* CSS thuc su cua ban bat dau tu day */
* {
    box-sizing: border-box; /* padding khong lam phinh chieu rong phan tu */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;          /* bo padding 20px cu de header sat mep man hinh */
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ================= HIEU UNG CUON (scroll reveal) ================= */
/* Trang thai ban dau: mo (huong dich do .reveal-* quyet dinh) */
.reveal {
    opacity: 0;
    /* easing co overshoot -> nay nhe nhu "rung chuyen" khi xuat hien */
    transition: opacity .7s ease, transform .7s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

/* Huong xuat hien */
.reveal-up    { transform: translateY(40px); }   /* tu duoi len */
.reveal-down  { transform: translateY(-40px); }  /* tu tren xuong */
.reveal-left  { transform: translateX(-55px); }  /* tu trai sang */
.reveal-right { transform: translateX(55px); }   /* tu phai sang */

/* Khi cuon toi -> ve vi tri that */
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Ton trong nguoi dung tat hieu ung chuyen dong */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ================= HEADER (2 tang giong igcons) ================= */
.site-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ----- Topbar: dai thong tin mong tren cung ----- */
.topbar {
    background: var(--brand-dark);
    color: rgba(255,255,255,.85);
    font-size: 13px;
}

.topbar .header-inner {
    padding-top: 7px;
    padding-bottom: 7px;
    gap: 26px;
}

.tb-item { white-space: nowrap; }
.tb-item i { color: var(--accent); margin-right: 6px; }
.tb-right { margin-left: auto; }   /* day gio lam viec + email ve ben phai */
a.tb-item:hover { color: var(--accent); }

/* khung gioi han chieu rong, can giua - dung chung cho ca 2 tang */
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
}

/* ----- Tang tren ----- */
.header-top .header-inner {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Logo: ten + khau hieu xep doc */
.logo a {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Logo dang anh */
.logo-img {
    height: 120px;
    width: auto;
    display: block;
}

.logo-name {
    font-size: 26px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo-tagline {
    font-size: 11px;
    color: #888;
    letter-spacing: 1px;
    margin-top: 4px;
    text-transform: uppercase;
}

/* O tim kiem o giua, co gian chiem khoang trong */
.header-search {
    flex: 1;
    max-width: 460px;
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 12px 46px 12px 18px;
    border: 1px solid #ddd;
    border-radius: 30px;          /* bo tron kieu vien thuoc */
    font-size: 15px;
    outline: none;
}

.header-search input:focus { border-color: var(--brand); }

.header-search button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;      /* bo nen, chi con icon */
    color: #888;
    cursor: pointer;
    font-size: 18px;
    opacity: .8;
    transition: opacity .2s;
}

.header-search button:hover { opacity: 1; }

/* ----- Goi y tim kiem truc tiep (live search) ----- */
.search-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    padding: 8px;
    z-index: 300;
    max-height: 420px;
    overflow-y: auto;
}
.search-suggest.is-open { display: block; }

.ss-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.ss-item:hover { background: var(--soft); }

.ss-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 38px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #efeeea;
}
.ss-thumb--none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    opacity: .5;
}

.ss-text { min-width: 0; }
.ss-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-type {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
}

.ss-empty {
    padding: 14px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Bang xanh 3 muc nhanh ben phai */
.header-quick {
    display: flex;
    margin-left: auto;            /* day sat ve ben phai */
    background: var(--brand-dark);
    border-radius: 10px;
    overflow: hidden;
}

.header-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    border-left: 1px solid rgba(255,255,255,.15);  /* gach phan cach */
    transition: background .2s;
}

.header-quick a:first-child { border-left: none; }
.header-quick a:hover { background: var(--brand); }

.header-quick .q-icon {
    font-size: 22px;
    margin-bottom: 6px;
    color: var(--accent);   /* icon vang kim noi tren nen graphite */
}

.header-quick .q-text { text-transform: uppercase; }

/* ----- Tang duoi: thanh menu ----- */
.main-menu {
    border-top: 1px solid #eee;
    background: #fff;
    position: sticky;             /* dinh tren cung khi cuon, tang tren troi di */
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);  /* tao do noi khi dinh tren cung */
}

.main-menu .header-inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* wp_nav_menu xuat ra <ul><li> - xep ngang, bo dau cham */
.main-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li { position: relative; }   /* moc cho dropdown con */

/* gach doc phan cach giua cac muc */
.main-menu > .header-inner > ul > li + li > a { border-left: 1px solid #eee; }

.main-menu a {
    display: block;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 18px 22px;
    color: #333;
    transition: color .2s, background .2s;
    position: relative;
}

/* Gach chan vang chay tu giua ra khi hover (chi menu cap 1) */
.main-menu > .header-inner > ul > li > a::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 10px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.main-menu > .header-inner > ul > li > a:hover::before,
.main-menu > .header-inner > ul > li.current-menu-item > a::before {
    transform: scaleX(1);
}

.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a {
    color: var(--brand);
}

/* ----- Menu con (dropdown) ----- */
.main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    border-radius: 12px;          /* bo tron 4 goc */
    padding: 8px;                 /* de muc hover co nen bo tron rieng, khong cham mep */
    z-index: 200;
    /* hien muot, mem mai */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.main-menu li:hover > .sub-menu {   /* hien khi di chuot vao */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-menu .sub-menu li + li a { border-left: none; }

.main-menu .sub-menu a {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;           /* bo tron tung muc */
    transition: background .2s, color .2s;
}

.main-menu .sub-menu a:hover {
    background: var(--soft);      /* nen nhe khi hover */
    color: var(--brand);
}

/* ----- Icon mui ten cho muc CO menu con ----- */
/* Cap 1: mui ten xuong (dropdown) */
.main-menu > .header-inner > ul > li.menu-item-has-children > a::after {
    content: "\25BE";           /* ▾ */
    font-size: 11px;
    margin-left: 7px;
    display: inline-block;
    transition: transform .2s;
}

/* Khi ro chuot vao thi xoay mui ten len cho sinh dong */
.main-menu > .header-inner > ul > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Cap sau (menu con co menu con nua): mui ten phai > */
.main-menu .sub-menu li.menu-item-has-children > a::after {
    content: "\203A";           /* › */
    float: right;
    font-size: 15px;
    line-height: 1;
}

/* Hotline ben phai thanh menu */
.menu-hotline {
    margin-left: auto;            /* day ve ben phai */
    align-self: center;
    background: var(--accent);
    color: var(--brand-dark);
    font-weight: 800;
    padding: 9px 18px;
    border-radius: 30px;
    white-space: nowrap;
}

.menu-hotline:hover { filter: brightness(.95); }

/* Nut hamburger - an o desktop, hien o tablet/phone (xem responsive) */
.menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand);
    padding: 16px 4px;
}

.menu-toggle i { font-size: 20px; }

/* ================= NOI DUNG ================= */
.site-content {
    max-width: 1140px;
    margin: 0 auto;               /* can giua trang */
    padding: 40px 20px;
}

/* ================= FOOTER (nhieu cot) ================= */
.site-footer {
    background: var(--footer-bg);
    color: #cfd3e6;
    padding: 56px 20px 28px;
}

.footer-cols {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;  /* cot dau rong hon */
    gap: 36px;
}

.footer-logo {
    height: 80px;
    width: auto;
    margin-bottom: 14px;
    display: block;
}

.footer-col h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 14px;
    line-height: 1.4;
}

.footer-col p i {
    color: var(--accent);
    width: 18px;
    text-align: center;
    margin-right: 7px;
}

.zalo a i { margin-right: 6px; }

.footer-col h4 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 14px;
}

.footer-col p { margin: 0 0 10px; font-size: 14px; }

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li { margin-bottom: 10px; }

.footer-col a { color: var(--accent); }
.footer-col ul a { color: #cfd3e6; }
.footer-col ul a:hover { color: var(--accent); }

.site-footer .zalo a {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
}

.copyright {
    max-width: 1140px;
    margin: 36px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    font-size: 14px;
    color: #9aa0bd;
}

/* ================= NUT NOI: LIEN HE + LEN DAU TRANG ================= */
/* Cum lien he ben trai - luon hien */
.floating-contact {
    position: fixed;
    left: 16px;
    bottom: 200px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.float-btn {
    width: 54px;
    height: 54px;
    border-radius: 14px;          /* bo tron mem mai */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);   /* bong dam hon de noi len */
    position: relative;
    transition: transform .15s, box-shadow .2s;
}

.float-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.32);
}

.float-zalo {                             /* dung anh icon Zalo */
    background: #fff;
    padding: 0;
    overflow: visible;                    /* de badge tran ra ngoai goc */
}

.float-zalo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;                  /* bo tron anh thay cho overflow */
    display: block;
    transform-origin: center;
    /* rung dinh ky nhu co tin nhan den */
    animation: zalo-shake 3s ease-in-out infinite;
}

/* Badge so tin nhan - nay len theo nhip */
.zalo-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;           /* vien trang tach khoi nut */
    animation: zalo-badge-pop 3s ease-in-out infinite;
}

/* Rung lac qua lai (phong nhip cham luc gan cuoi chu ky) */
@keyframes zalo-shake {
    0%, 82%, 100% { transform: rotate(0); }
    84% { transform: rotate(-14deg); }
    86% { transform: rotate(12deg); }
    88% { transform: rotate(-9deg); }
    90% { transform: rotate(7deg); }
    92% { transform: rotate(-4deg); }
    94% { transform: rotate(2deg); }
}

/* Badge phong to roi thu nho dong bo voi luc rung */
@keyframes zalo-badge-pop {
    0%, 80%, 100% { transform: scale(1); }
    84% { transform: scale(1.4); }
    90% { transform: scale(.9); }
    94% { transform: scale(1.12); }
}
.float-call {
    /* xanh la tuoi - mau goi dien quen thuoc, noi bat tren nen bach kim */
    background: linear-gradient(145deg, #2fd06e 0%, #18a957 100%);
    font-size: 26px;
}

.float-call i { line-height: 1; }   /* icon dien thoai can giua */

/* Vong nhap nhay (pulse) quanh nut goi de thu hut */
.float-call::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(37,193,106,.6); }
    70%  { box-shadow: 0 0 0 16px rgba(37,193,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,193,106,0); }
}

/* Nut len dau trang ben phai - chi hien khi cuon xuong */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 200px;
    z-index: 900;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--footer-bg);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    /* an mac dinh, hien muot khi them class .show */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover { background: var(--brand); }

/* Tat pulse neu nguoi dung tat hieu ung */
@media (prefers-reduced-motion: reduce) {
    .float-call::before,
    .float-zalo img,
    .zalo-badge { animation: none; }
}

/* ================= HOME BANNER SLIDER ================= */
.home-banner-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 440px;
    max-height: 660px;
    overflow: hidden;
    background: var(--brand-dark);
}

.hbs-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;             /* cat phan anh zoom tran ra */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease;
}

.hbs-slide.is-active { opacity: 1; visibility: visible; }

/* Lop anh nen rieng de zoom (Ken Burns) ma khong keo theo chu */
.hbs-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1);
}

/* Khi slide hien -> anh phong to cham trong suot thoi gian hien */
.hbs-slide.is-active .hbs-bg {
    animation: hbs-zoom 6s ease-out forwards;
}

@keyframes hbs-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .hbs-slide.is-active .hbs-bg { animation: none; }
}

/* Slide chua co anh -> nen gradient bach kim */
.hbs-noimg { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }

.hbs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(20, 24, 30, .48);    /* lop phu cho chu de doc */
}

.hbs-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 820px;
    padding: 0 20px;
}

.hbs-content h2 {
    font-size: 46px;
    line-height: 1.2;
    margin: 0 0 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hbs-content p {
    font-size: 18px;
    margin: 0 0 28px;
    opacity: .95;
}

/* Noi dung slide dang hien -> troi len mem mai */
.hbs-slide.is-active .hbs-content > * { animation: hbs-rise .7s both; }
.hbs-slide.is-active .hbs-content > *:nth-child(2) { animation-delay: .12s; }
.hbs-slide.is-active .hbs-content > *:nth-child(3) { animation-delay: .24s; }

@keyframes hbs-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* Mui ten trai/phai */
.hbs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.hbs-arrow:hover { background: rgba(255,255,255,.42); }
.hbs-prev { left: 18px; }
.hbs-next { right: 18px; }

/* Cham dieu huong */
.hbs-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.hbs-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.hbs-dot.is-active { background: var(--accent); transform: scale(1.25); }

@media (max-width: 768px) {
    .home-banner-slider { height: 56vh; min-height: 340px; }
    .hbs-content h2 { font-size: 28px; }
    .hbs-content p { font-size: 15px; }
    .hbs-arrow { width: 38px; height: 38px; font-size: 15px; }
}

/* ================= TRANG CHU: HERO (banner) ================= */
.hero {
    /* nen xanh thuong hieu, sau nay co the thay bang anh cong trinh */
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 90px 20px;
}

.hero h1 {
    font-size: 40px;
    margin: 0 0 16px;
    line-height: 1.25;
}

.hero h1 .highlight {
    color: var(--accent);   /* chu vang noi bat giong bien hieu */
}

.hero p {
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto 28px;
    opacity: .95;
}

/* nhom 2 nut bam */
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    transition: transform .15s, background .2s;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {            /* nut vang - hanh dong chinh */
    background: var(--accent);
    color: var(--brand-dark);
}

.btn-outline {           /* nut vien trang */
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover { background: rgba(255,255,255,.12); }

/* ================= TRANG CHU: 6 CAM KET ================= */
/* Band = dai full-width de dat mau nen; ben trong chua .section can giua */
.band { width: 100%; }

/* Bo nen sang nhe (bach kim - vang) de phan tach tung component.
   Duoc phep lap lai, mien khong trung o 2 phan lien ke. */
.bg-soft { background: #f5f4f1; }   /* bach kim am (warm platinum) */
.bg-cool { background: #eef1f4; }   /* bach kim mat (cool platinum) */
.bg-gold { background: #faf6ec; }   /* champagne - anh vang rat nhe */
.band-alt { background: #f5f4f1; }  /* giu tuong thich cu = bg-soft */

.section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 64px 20px;
    overflow-x: clip;   /* chan thanh cuon ngang khi hieu ung truot trai/phai */
}

.section-title {
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;  /* serif thanh lich */
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--brand);
    margin: 0 0 14px;
    padding-bottom: 16px;
    position: relative;
}

/* Gach chan vang gradient mem o giua + cham nho hai ben */
.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.section-title::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    z-index: 1;
}

/* Tieu de canh trai (vd "Ve Hung Vuong") -> gach chan ve ben trai */
.section-title[style*="left"]::after,
.section-title[style*="left"]::before {
    left: 0;
    transform: none;
}

.section-subtitle {
    text-align: center;
    font-style: italic;            /* in nghieng cho mem mai */
    font-size: 17px;
    color: #8a8f98;
    margin: 0 0 42px;
}

.commit-grid {
    display: grid;
    /* tu dong xep 3 cot tren desktop, co gian xuong it cot khi man hinh hep */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.commit-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 28px 24px;
    text-align: center;
    transition: box-shadow .2s, transform .2s;
}

.commit-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-4px);
}

.commit-card .icon {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--accent);   /* icon vang kim */
}

.commit-card h3 {
    color: var(--brand);
    font-size: 19px;
    margin: 0 0 10px;
}

.commit-card p {
    color: #666;
    font-size: 15px;
    margin: 0;
}

/* ================= TRANG CHU: DU AN TIEU BIEU ================= */
/* Tab loc loai du an */
.project-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.ptab {
    padding: 9px 22px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ptab:hover { border-color: var(--brand); color: var(--brand); }

.ptab.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Nhan loai tren goc anh du an */
.project-thumb { position: relative; }
.project-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--accent);
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 30px;
}

/* The bi loc -> an */
.project-card.is-hidden { display: none; }

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.project-card {
    display: block;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;            /* bo goc anh theo the card */
    transition: box-shadow .2s, transform .2s;
    color: inherit;
}

.project-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    transform: translateY(-4px);
}

.project-thumb {
    aspect-ratio: 4 / 3;         /* khung anh dong deu nhau */
    background: #efeeea;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* anh phu kin, khong meo */
}

.project-thumb .no-thumb {
    color: var(--brand);
    font-weight: 700;
    opacity: .5;
}

.project-body {
    padding: 18px 20px;
}

.project-body h3 {
    color: var(--brand);
    font-size: 18px;
    margin: 0 0 8px;
}

.project-body p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* nut "Xem tat ca" can giua duoi luoi */
.section-cta {
    text-align: center;
    margin-top: 36px;
}

/* ----- Phan trang (the_posts_pagination) ----- */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-weight: 700;
    font-size: 14px;
    transition: background .2s, color .2s, border-color .2s;
}

.pagination .page-numbers:hover { border-color: var(--brand); color: var(--brand); }

.pagination .page-numbers.current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pagination .page-numbers.dots { border: none; background: none; }

.btn-brand {                     /* nut nen xanh thuong hieu */
    background: var(--brand);
    color: #fff;
}

.btn-brand:hover { background: var(--brand-dark); }

/* ===== Khung anh tam (thay bang anh that sau) ===== */
.img-placeholder {
    background: repeating-linear-gradient(45deg, #efeeea, #efeeea 12px, #e5e3dd 12px, #e5e3dd 24px);
    color: var(--brand);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    min-height: 220px;
    text-align: center;
    padding: 12px;
}

/* ================= GIOI THIEU ================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.about-text p { color: #555; margin: 0 0 16px; }
.about-text .btn { margin-top: 8px; }

/* So lieu */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.stat-item {
    text-align: center;
    padding: 24px 12px;
    background: var(--soft);
    border-radius: 10px;
}

.stat-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: var(--brand);
}

.stat-label { color: #666; font-size: 14px; }

/* ----- Khoi so lieu co anh nen ----- */
.stats-band { position: relative; }
.stats-band.has-bg { background-size: cover; background-position: center; }
.stats-overlay { display: none; }
.stats-band.has-bg .stats-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 30, .62);   /* lop phu toi de so doc ro */
}
.stats-band .section { position: relative; z-index: 1; }

/* Khi co anh nen: thay mau cho noi bat */
.stats-band.has-bg .stat-item { background: rgba(255,255,255,.08); }
.stats-band.has-bg .stat-num { color: var(--accent); }   /* so vang kim */
.stats-band.has-bg .stat-label { color: rgba(255,255,255,.9); }

/* ================= LY DO CHON (nen champagne vang kim) ================= */
.why {
    background: linear-gradient(160deg, #f7f0dd 0%, #eee1c2 100%);
    border-top: 3px solid var(--accent);
}

.why-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 64px 20px;
    overflow-x: clip;   /* chan thanh cuon ngang khi why-item truot tu trai */
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.why-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.why-icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--accent);   /* icon vang kim noi tren nen graphite */
    width: 38px;
    text-align: center;
}

.why-item h3 { margin: 0 0 6px; color: var(--accent); font-size: 19px; }
.why-item p { margin: 0; color: rgba(255,255,255,.9); font-size: 15px; }

/* Luoi the "Vi sao chon" (gop cam ket + ly do) tren nen graphite */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    background: #fff;
    border: 1px solid #eadfc4;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.feature-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(160, 128, 58, .16);
    transform: translateY(-4px);
}

.feature-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(200,160,74,.14);   /* nen vang rat nhe */
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.feature-card h3 { color: var(--brand); font-size: 18px; margin: 0 0 10px; }
.feature-card p { color: #666; font-size: 14px; margin: 0; }

/* Ban do trang Lien he */
.contact-map {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.contact-map iframe { display: block; }
.contact-extra { margin-top: 32px; }

/* ================= GALLERY CONG TRUONG ================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gallery-grid .img-placeholder { min-height: 200px; }

/* Trang chu chi hien 6 o dau; cac anh con lai van co trong DOM de lightbox luot het */
.gallery-grid .gallery-item:nth-child(n+7) { display: none; }

/* Moi o anh: nen anh + caption + icon zoom */
.gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #e5e3dd;
    cursor: pointer;
}

.gallery-item::after {       /* lop phu toi nhe de chu de doc */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
    opacity: .85;
    transition: opacity .25s;
}
.gallery-item:hover::after { opacity: 1; }

.gallery-cap {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

.gallery-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: opacity .25s, transform .25s;
}
.gallery-item:hover .gallery-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ===== Lightbox album ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 17, 20, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.lightbox.is-open { display: flex; }

.lb-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 92vw;
}

.lb-stage {
    margin: 0;
    max-width: 90vw;
    text-align: center;
}

.lb-img {
    max-width: 90vw;
    max-height: 64vh;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* Dai thumbnail duoi lightbox */
.lb-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    max-width: 92vw;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: thin;
}
.lb-thumbs::-webkit-scrollbar { height: 6px; }
.lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }

.lb-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s, border-color .2s;
}
.lb-thumb:hover { opacity: .85; }
.lb-thumb.is-active { opacity: 1; border-color: var(--accent); }

.lb-caption { color: #fff; margin-top: 14px; }
.lb-title { font-size: 18px; margin: 0 0 4px; color: var(--accent); }
.lb-desc { font-size: 14px; margin: 0; color: rgba(255,255,255,.85); }

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(255,255,255,.32); }

.lb-close { top: 22px; right: 22px; }
.lb-prev  { left: 22px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 22px; top: 50%; transform: translateY(-50%); }

/* ================= DANH GIA KHACH HANG (slider anh) ================= */
.reviews { background: #faf6ec; }   /* champagne nhe */

.reviews-carousel { position: relative; }

/* Vung cuon ngang chua cac the */
.reviews-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -ms-overflow-style: none;        /* an thanh cuon (IE/Edge) */
    scrollbar-width: none;            /* Firefox */
}
.reviews-slider::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* Moi the: anh nen full + panel o duoi, hien 2 the/khung tren desktop */
.review-item {
    flex: 0 0 calc((100% - 24px) / 2);
    scroll-snap-align: start;
    position: relative;
    height: 460px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    background: #e5e3dd;
}

.ri-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.ri-photo--none { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }

/* Panel ban trong suot phu phan duoi */
.ri-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(77, 85, 96, .88);   /* graphite ban trong suot (tone bach kim) */
    color: #fff;
    padding: 22px 26px 26px;
}

.ri-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.ri-score {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.ri-name {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ri-stars {
    color: var(--accent);            /* sao vang kim */
    font-size: 14px;
    letter-spacing: 2px;
}

.ri-text { font-size: 15px; line-height: 1.6; }
.ri-text p { margin: 0; }

/* Mui ten dieu huong */
.rv-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #d0cfca;
    background: #fff;
    color: var(--brand);
    font-size: 16px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    transition: background .2s, color .2s;
}

.rv-arrow:hover { background: var(--brand); color: #fff; }
.rv-prev { left: -8px; }
.rv-next { right: -8px; }

/* ================= CTA BANNER (vang kim) ================= */
.cta-banner {
    background: linear-gradient(135deg, #dcbd6d 0%, var(--accent) 45%, #a9853d 100%);
    color: var(--brand-dark);
    text-align: center;
    padding: 64px 20px;
}

.cta-banner h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 14px;
}

.cta-banner p {
    margin: 0 0 28px;
    font-size: 18px;
    opacity: .92;
}

/* Tu nhan manh trong banner CTA (chu trang noi tren nen vang) */
.cta-em {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 6px rgba(0,0,0,.18);
}

/* Nut trong CTA: doi sang graphite de noi tren nen vang */
.cta-banner .btn-primary {
    background: var(--brand-dark);
    color: #fff;
}
.cta-banner .btn-primary:hover { background: #22262d; }

.cta-banner .btn-outline {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
}
.cta-banner .btn-outline:hover { background: rgba(0,0,0,.08); }

/* ================= DICH VU ================= */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.service-card {
    text-align: center;
    padding: 30px 22px;
    border: 1px solid #eee;
    border-radius: 12px;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.service-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transform: translateY(-4px);
    border-color: transparent;
}

.service-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.service-card h3 { color: var(--brand); font-size: 18px; margin: 0 0 10px; }
.service-card p { color: #666; font-size: 14px; margin: 0; }

/* ================= QUY TRINH THI CONG ================= */
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.process-step {
    text-align: center;
    padding: 0 8px;
    position: relative;
}

/* duong noi giua cac buoc */
.process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px);
    opacity: .5;
}

.step-num {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-step h3 { color: var(--brand); font-size: 16px; margin: 0 0 8px; }
.process-step p { color: #666; font-size: 13px; margin: 0; }

/* ================= BANG BAO GIA ================= */
/* Dong ngay cap nhat - pill nho can giua, ngay duoi phu de */
.pricing-update {
    display: inline-block;
    margin: -28px 0 34px;
    padding: 5px 16px;
    border-radius: 30px;
    background: var(--soft);
    color: #777;
    font-size: 13px;
    font-style: italic;
}
.pricing-update i { color: var(--accent); margin-right: 6px; }

/* Boc canh giua: dung wrapper text-align tren phan tu khoi cha */
#bao-gia { text-align: center; }
#bao-gia .pricing-grid,
#bao-gia .pricing-card ul { text-align: left; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 32px 26px;
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.pricing-card--featured {
    border-color: var(--accent);
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 12px;
    padding: 5px 16px;
    border-radius: 30px;
    text-transform: uppercase;
}

.pricing-card h3 { color: var(--brand); font-size: 20px; margin: 0 0 14px; }

.pricing-card .price {
    font-size: 30px;
    font-weight: 800;
    color: var(--brand);
    margin-bottom: 22px;
}
.pricing-card .price span { font-size: 15px; font-weight: 600; color: #888; }

.pricing-card ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    text-align: left;
    flex: 1;
}

.pricing-card li {
    padding: 9px 0 9px 26px;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
    color: #555;
    position: relative;
}

.pricing-card li::before {
    content: "\f00c";                 /* dau check Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent);
    position: absolute;
    left: 0;
    top: 9px;
    font-size: 12px;
}

.pricing-note {
    text-align: center;
    color: #999;
    font-size: 13px;
    font-style: italic;
    margin: 28px 0 0;
}

/* ================= FORM DANG KY TU VAN ================= */
.register-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.register-intro p { color: #555; margin: 0 0 20px; }

.register-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.register-contact li {
    margin-bottom: 12px;
    color: #555;
}
.register-contact i { color: var(--accent); width: 20px; text-align: center; margin-right: 8px; }

.register-form {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.form-field { margin-bottom: 16px; }

.register-form input,
.register-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
}

.register-form input:focus,
.register-form textarea:focus { border-color: var(--accent); }

.register-form .btn { width: 100%; border: none; cursor: pointer; font-size: 16px; }

.form-notice {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.form-notice--ok  { background: #e7f6ec; color: #1c7a3f; border: 1px solid #b6e2c4; }
.form-notice--err { background: #fdecea; color: #b3261e; border: 1px solid #f5c2bd; }

/* ================= CHI TIET DU AN ================= */
.du-an-title {
    color: var(--brand);
    font-size: 30px;
    margin: 0 0 20px;
}

.du-an-cover {
    margin-bottom: 24px;
}

.du-an-cover img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.du-an-content {
    font-size: 16px;
}

.du-an-content img { max-width: 100%; height: auto; border-radius: 8px; }

.back-link {
    margin-top: 32px;
}

.back-link a {
    color: var(--brand);
    font-weight: 600;
}

/* ================= CAM NANG / BAI VIET ================= */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.post-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.post-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-4px); }

.post-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e5e3dd;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.post-card:hover .post-thumb img { transform: scale(1.05); }

.post-thumb--none {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand); font-weight: 700; opacity: .5;
}

.post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-date { font-size: 13px; color: #999; margin-bottom: 8px; }
.post-date i { color: var(--accent); margin-right: 5px; }

.post-body h3 { font-size: 18px; margin: 0 0 10px; line-height: 1.35; }
.post-body h3 a { color: var(--brand); transition: color .2s; }
.post-body h3 a:hover { color: var(--accent); }
.post-body p { color: #666; font-size: 14px; margin: 0 0 16px; flex: 1; }

.post-more { color: var(--accent); font-weight: 700; font-size: 14px; }
.post-more i { transition: transform .2s; }
.post-more:hover i { transform: translateX(4px); }

/* ----- Chi tiet bai viet ----- */
.post-detail { max-width: 820px; }   /* khong dung .single-post vi WP gan class nay cho <body> */

.single-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 34px;
    color: var(--brand);
    margin: 0 0 14px;
    line-height: 1.25;
}

.single-meta { color: #888; font-size: 14px; margin-bottom: 22px; }
.single-meta span { margin-right: 18px; }
.single-meta i { color: var(--accent); margin-right: 5px; }
.single-meta a { color: #888; }
.single-meta a:hover { color: var(--brand); }

.single-cover { margin-bottom: 26px; }
.single-cover img { width: 100%; border-radius: 12px; }

.single-content { font-size: 16px; line-height: 1.8; color: #444; }
.single-content p { margin: 0 0 18px; }

/* Doan mo dau to hon mot chut cho co diem nhan */
.single-content > p:first-child {
    font-size: 17.5px;
    color: #555;
}

/* Tieu de muc co thanh nhan vang ben trai - do "tho" */
.single-content h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    color: var(--brand);
    margin: 40px 0 16px;
    padding-left: 16px;
    border-left: 4px solid var(--accent);
    line-height: 1.3;
}

.single-content h3 {
    font-size: 19px;
    color: var(--brand);
    margin: 26px 0 10px;
}

/* Dau cham danh sach mau vang kim */
.single-content ul li::marker { color: var(--accent); }
.single-content ol li::marker { color: var(--accent); font-weight: 700; }
.single-content li { margin-bottom: 6px; }
.single-content img { max-width: 100%; height: auto; border-radius: 8px; }
.single-content a { color: var(--accent); text-decoration: underline; }
.single-content ul, .single-content ol { margin: 0 0 18px; padding-left: 22px; }
.single-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 0 0 18px;
    padding: 6px 0 6px 18px;
    color: #666;
    font-style: italic;
}

.single-tags { margin-top: 28px; color: #888; font-size: 14px; }
.single-tags i { color: var(--accent); margin-right: 5px; }
.single-tags a { color: var(--brand); }

/* ================= TRANG DICH VU CHI TIET ================= */
.service-grid--three { grid-template-columns: repeat(3, 1fr); }
.sv-intro { padding-top: 52px; padding-bottom: 40px; }
.sv-stats { padding-top: 44px; padding-bottom: 44px; }
.sv-content { padding-top: 48px; }

/* ================= TRANG XAY NHA TRON GOI ================= */
/* Luoi 2 goi: hep hon, can giua */
.pricing-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin: 0 auto;
}

/* Bang so sanh 2 goi */
.compare-wrap { overflow-x: auto; }   /* mobile: cho phep cuon ngang */

.compare-table {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.compare-table th,
.compare-table td {
    padding: 13px 18px;
    border-bottom: 1px solid #f0efeb;
    font-size: 15px;
}

.compare-table th {
    background: var(--brand);
    color: #fff;
    text-align: left;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.compare-table th:nth-child(2),
.compare-table th:nth-child(3),
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) { text-align: center; width: 22%; }

.compare-table tr:nth-child(even) td { background: var(--soft); }
.compare-table .yes { color: #1c9c53; font-size: 16px; }
.compare-table .no  { color: #c9c5bb; font-size: 16px; }

/* Bang trong noi dung bai viet / trang con */
.single-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
}
.single-content th,
.single-content td {
    border: 1px solid #e5e3dd;
    padding: 10px 14px;
    text-align: left;
    font-size: 15px;
}
.single-content th { background: var(--soft); color: var(--brand); }

/* FAQ dong/mo trong noi dung (the <details>) */
.single-content details {
    border: 1px solid #e5e3dd;
    border-radius: 10px;
    padding: 0 18px;
    margin: 0 0 12px;
    background: #fff;
}
.single-content summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand);
    padding: 14px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.single-content summary::-webkit-details-marker { display: none; }
.single-content summary::after {
    content: "\2b";                /* dau + */
    position: absolute;
    right: 0;
    color: var(--accent);
    font-size: 18px;
    font-weight: 800;
    transition: transform .2s;
}
.single-content details[open] summary::after { content: "\2212"; }  /* dau - */
.single-content details p { margin: 0 0 14px; }

/* ================= PAGE HERO (dau trang con) ================= */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}
/* Khi co anh nen */
.page-hero--img { background-size: cover; background-position: center; }
.page-hero-overlay { position: absolute; inset: 0; background: rgba(20,24,30,.55); }
.page-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.page-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 42px;
    margin: 0 0 14px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.page-hero p { font-size: 18px; opacity: .92; margin: 0 0 26px; }

/* ================= Y TUONG THIET KE (nen champagne, 2 hang) ================= */
.design-idea {
    background: linear-gradient(160deg, #f7f0dd 0%, #eee1c2 100%);
    border-top: 3px solid var(--accent);
}
.idea-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}
.idea-row + .idea-row { margin-top: 30px; }
.idea-row--rev .idea-img-col { order: -1; }   /* hang 2: anh ben trai */

.idea-h {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    color: var(--brand);
    margin: 0 0 22px;
    padding-left: 14px;
    border-left: 4px solid var(--accent);
}
.idea-block { display: flex; gap: 16px; margin-bottom: 22px; }
.idea-ic {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(160,128,58,.18);
}
.idea-block h3 { margin: 0 0 6px; font-size: 18px; color: var(--brand); }
.idea-block p { margin: 0; font-size: 15px; color: #5d5a52; line-height: 1.7; }
.idea-img-col .img-placeholder { min-height: 300px; aspect-ratio: 4/3; }
.idea-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* ================= QUY TRINH DANG TAB ================= */
.proc-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.proc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    border: 1px solid #e5e3dd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    font: inherit;
}
.proc-step:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.proc-num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .2s, color .2s;
}
.proc-name { font-weight: 700; font-size: 13px; color: #444; text-align: center; line-height: 1.35; }
.proc-step.is-active { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.proc-step.is-active .proc-num { background: var(--brand); color: #fff; }
.proc-step.is-active .proc-name { color: var(--brand); }

.proc-panel { display: none; background: #fff; border-radius: 12px; padding: 22px 26px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.proc-panel.is-active { display: block; }
.proc-panel p { margin: 0; color: #555; font-size: 15px; line-height: 1.7; }

/* ================= LUOI PHONG CACH THIET KE ================= */
.style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.style-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.style-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); transform: translateY(-4px); }
.style-card .img-placeholder { border-radius: 0; aspect-ratio: 4 / 3; min-height: 0; }
.style-thumb { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #e5e3dd; }
.style-cap {
    display: block;
    text-align: center;
    padding: 14px;
    font-weight: 700;
    color: var(--brand);
}
.style-cap i { color: var(--accent); margin-left: 6px; }
.style-album { cursor: pointer; position: relative; }

/* The mau nha dep */
.mn-badge { top: 10px; left: 10px; }          /* dung style .project-badge, dinh vi theo .style-album */
.mn-desc {
    display: block;
    text-align: center;
    padding: 0 16px 16px;
    margin-top: -6px;
    color: #777;
    font-size: 13px;
}
.mn-item.is-hidden { display: none; }         /* the bi loc theo tab */

/* ================= RESPONSIVE (mobile) ================= */
/* ===================== RESPONSIVE ===================== */

/* ---------- Tablet & nho hon (<=1024px): luoi 2 cot, menu gon ---------- */
@media (max-width: 1024px) {
    .commit-grid,
    .project-grid,
    .review-grid,
    .gallery-grid,
    .stats-grid,
    .service-grid,
    .feature-grid,
    .post-grid,
    .style-grid,
    .footer-cols { grid-template-columns: repeat(2, 1fr); }

    .header-search { max-width: 340px; }
    .main-menu a { padding: 16px 13px; font-size: 13px; }
    .menu-hotline { padding: 8px 14px; }
    .hbs-content h2 { font-size: 38px; }
}

/* ---------- Menu mobile (<=992px): hamburger + header xep gon ---------- */
@media (max-width: 992px) {
    .topbar { display: none; }     /* an topbar cho gon */

    /* Header tren: logo + o tim kiem; an bang nhanh cho gon */
    .logo-img { height: 68px; }
    .header-top .header-inner { flex-wrap: wrap; gap: 10px 14px; }
    .header-search { order: 3; flex: 1 1 100%; max-width: 100%; }
    .header-quick { display: none; }

    /* Hien nut hamburger, an danh sach menu mac dinh */
    .menu-toggle { display: flex; }
    .main-menu .header-inner { flex-wrap: wrap; align-items: center; padding: 0 16px; }

    .main-menu ul.menu-list {
        display: none;                 /* an cho den khi bam hamburger */
        order: 3;
        flex: 1 1 100%;
        flex-direction: column;
        padding-bottom: 8px;
        border-top: 1px solid #eee;
    }
    .main-menu.is-open ul.menu-list { display: flex; }

    .main-menu ul.menu-list > li + li > a { border-left: none; border-top: 1px solid #eee; }
    .main-menu a { padding: 14px 4px; }

    /* Menu con: hien noi tiep, thut vao (khong dropdown noi) */
    .main-menu .sub-menu {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 0 18px;
    }
    .main-menu .sub-menu a { padding: 11px 4px; font-size: 13px; }
    /* bo mui ten dropdown cap 1 vi menu con luon hien */
    .main-menu > .header-inner > ul > li.menu-item-has-children > a::after { content: ""; margin: 0; }

    .menu-hotline { margin-left: auto; }
}

/* ---------- Dien thoai (<=768px): luoi 1 cot, thu nho khoang cach ---------- */
@media (max-width: 768px) {
    .commit-grid,
    .project-grid,
    .about-grid,
    .why-grid,
    .feature-grid,
    .review-grid,
    .service-grid,
    .pricing-grid,
    .process-grid,
    .post-grid,
    .style-grid,
    .register-wrap,
    .pricing-grid--two,
    .footer-cols { grid-template-columns: 1fr; }

    .page-hero { padding: 56px 18px; }
    .page-hero h1 { font-size: 30px; }

    /* Y tuong: xep doc, anh hang 2 ve dung vi tri */
    .idea-row { grid-template-columns: 1fr; gap: 28px; }
    .idea-row--rev .idea-img-col { order: 0; }

    /* Quy trinh: 2 buoc moi hang */
    .proc-steps { grid-template-columns: repeat(2, 1fr); }

    .stats-grid,
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* quy trinh xep doc -> bo duong noi ngang */
    .process-step:not(:last-child)::after { display: none; }
    .process-step { margin-bottom: 8px; }

    .section,
    .why-inner { padding: 48px 18px; }
    .section-title { font-size: 24px; }
    .stats-grid { margin-top: 36px; }

    /* Danh gia: 1 the moi khung */
    .review-item { flex: 0 0 100%; height: 430px; }
    .rv-prev { left: 2px; }
    .rv-next { right: 2px; }

    .hero { padding: 60px 18px; }
    .hero h1 { font-size: 30px; }
}

/* ---------- Dien thoai nho (<=480px) ---------- */
@media (max-width: 480px) {
    .logo-img { height: 54px; }
    .stats-grid,
    .gallery-grid { grid-template-columns: 1fr; }
    .hbs-content h2 { font-size: 23px; }
    .hbs-content p { font-size: 14px; }
    .floating-contact { left: 12px; bottom: 28px; }
    .back-to-top { right: 14px; bottom: 28px; }
    .float-btn { width: 48px; height: 48px; }
}