/* =========================================================
   BALI.HOME — main.css
   Style chính của theme (nạp qua functions.php)
   ========================================================= */

:root{
  /* ===== Modern Luxury Interior — BALI.HOME Premium ===== */
  --brown-900:#20140d;
  --brown-800:#2a1b12;
  --brown-700:#3a2518;
  --brown-600:#6b4423;
  --brown-500:#7a5230;
  --brown:#6b4423;
  --brown-dark:#2a1b12;
  --gold:#c99a4b;
  --gold-soft:#e8d2a4;
  --cream:#f8f5ef;      /* bg-main (warm) */
  --cream-2:#fffdf8;    /* bg-soft (near white) */
  --bg-main:#f8f5ef;
  --bg-soft:#fffdf8;
  --beige:#efe6d8;
  --line:#e8ded2;
  --ink:#241811;
  --muted:#7a6a5d;
  --white:#ffffff;
  --card-bg:#ffffff;
  --danger:#d9534f;
  --radius:18px;
  --shadow:0 18px 44px -24px rgba(42,27,18,.26);
  --shadow-sm:0 10px 26px -16px rgba(42,27,18,.20);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.section-title{
  text-align:center;font-size:clamp(24px,3vw,34px);font-weight:700;
  color:var(--brown-800);margin-bottom:10px;
}
.section-sub{
  text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px;
  font-size:15px;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;border-radius:12px;
  padding:13px 24px;transition:.2s;
}
.btn-primary{background:linear-gradient(180deg,var(--brown-500),var(--brown-600));color:#fff}
.btn-primary:hover{filter:brightness(1.07);box-shadow:var(--shadow-sm);color:#fff}
.btn-ghost{background:transparent;color:var(--brown-700);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff}
.btn-block{width:100%;justify-content:center}
.section{padding:70px 0}
.bg-cream2{background:var(--cream-2)}
.mt-30{margin-top:30px}
.mt-34{margin-top:34px}

/* SVG icon sizing */
.svgi{display:inline-block;vertical-align:-2px;flex:none}
.btn .svgi{width:15px;height:15px}
.phone .ic .svgi{width:14px;height:14px}
.stat .ic .svgi{width:24px;height:24px}
.prob-card .ic .svgi{width:26px;height:26px}
.proc-step .ic .svgi{width:20px;height:20px}
.why-item .ic .svgi{width:20px;height:20px}
.contact .ic .svgi{width:15px;height:15px}
.socials a .svgi{width:15px;height:15px}
.menu-toggle .svgi{width:22px;height:22px}
.proj-meta .svgi{width:13px;height:13px;color:var(--gold)}
.proj-link .svgi{width:13px;height:13px}
.stars{display:flex;gap:2px;margin-bottom:5px}
.stars .svgi{width:13px;height:13px;color:var(--gold)}

/* placeholder "photo" blocks — thay bằng ảnh thật khi có */
.ph{
  border-radius:12px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#efe6d6 0%,#e3d5c1 46%,#d9c7ac 47%,#cbb493 100%);
}
.ph::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120px 80px at 78% 30%,rgba(255,255,255,.4),transparent 70%),
    linear-gradient(90deg,transparent 60%,rgba(122,92,62,.18));
}
.ph.warm{background:
    linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#e9dcc7 0%,#d9c3a2 50%,#c7ac86 51%,#b89b78 100%);}
.ph.cool{background:
    linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#efe9df 0%,#ddd2c1 48%,#cbbfa9 49%,#bdae95 100%);}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ================= HEADER ================= */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,253,248,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(232,222,210,.8);
}
.admin-bar .site-header{top:32px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto;gap:16px;position:relative}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .logo{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--brown-800)}
.brand .logo b{color:var(--gold)}
.brand small{font-size:10px;color:var(--muted);letter-spacing:.04em}
.brand .custom-logo-link img{max-height:48px;width:auto}

.main-nav ul{display:flex;gap:26px;font-size:14px;font-weight:500;list-style:none;margin:0;padding:0}
.main-nav li{list-style:none}
.main-nav a{color:#5a4f43;transition:.2s;display:block;position:relative}
.main-nav a:hover,
.main-nav .current-menu-item>a,
.main-nav .current_page_item>a{color:var(--brown-700)}
.main-nav .current-menu-item>a::after,
.main-nav .current_page_item>a::after{
  content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:var(--gold)
}

.head-right{display:flex;align-items:center;gap:18px}
.phone{display:flex;align-items:center;gap:8px}
.phone .ic{width:30px;height:30px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;color:var(--gold);border:1px solid var(--line)}
.phone .num{font-weight:700;color:var(--brown-800);font-size:15px}
.phone small{display:block;font-size:10px;color:var(--muted);font-weight:400}
.menu-toggle{display:none;background:none;border:none;color:var(--brown-700);cursor:pointer;padding:4px}

/* ================= HERO ================= */
.hero{position:relative}
.hero-media{
  position:relative;display:flex;align-items:center;
  min-height:clamp(520px,48vw,680px);
  background-color:#efe7d9;
  background-position:center right;background-size:cover;background-repeat:no-repeat;
  overflow:hidden;
}
.hero:not(.has-hero-img) .hero-media{
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#e9dcc7 0%,#d9c3a2 50%,#c7ac86 51%,#b89b78 100%);
}
.hero-media::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--cream) 0%,
    rgba(250,247,242,.94) 24%,
    rgba(250,247,242,.62) 44%,
    rgba(250,247,242,.14) 62%,
    rgba(250,247,242,0) 76%);
}
.hero-media .wrap{position:relative;z-index:1;width:100%}
.hero-left{max-width:500px;padding:56px 0}
.hero-left .eyebrow{margin-bottom:14px}
.hero h1{font-size:clamp(36px,5vw,64px);line-height:1.06;color:var(--brown-900);font-weight:700;letter-spacing:-.01em}
.hero p.lead{color:#5c5245;margin:20px 0 28px;font-size:16px;max-width:460px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* stats bar — chồng lên đáy hero như mockup */
.stats{
  position:relative;z-index:2;margin-top:-44px;
  background:linear-gradient(100deg,var(--brown-900),var(--brown-700));
  border-radius:20px;display:grid;grid-template-columns:repeat(4,1fr);
  color:#f3e9db;box-shadow:var(--shadow);overflow:hidden;
}
.stat{padding:20px 24px;display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:none}
.stat .ic{color:var(--gold-soft);margin-bottom:6px}
.stat .big{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:var(--gold-soft)}
.stat .lbl{font-weight:600;font-size:14px}
.stat small{color:#d8c8b2;font-size:12px}

/* ================= GRIDS ================= */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px}

/* problems */
.prob-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;text-align:center;box-shadow:var(--shadow-sm);transition:.2s;
}
.prob-card:hover,.sol-card:hover,.proj:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sol-card,.proj{transition:.2s}
.prob-card .ic{
  width:56px;height:56px;border-radius:14px;margin:0 auto 16px;
  display:grid;place-items:center;background:var(--cream-2);color:var(--gold);border:1px solid var(--line);
}
.prob-card h3{font-family:'Be Vietnam Pro',sans-serif;font-size:16px;font-weight:600;color:var(--brown-800);margin-bottom:8px}
.prob-card p{font-size:13.5px;color:var(--muted)}

/* solution cards */
.sol-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.sol-card .ph{height:180px;border-radius:0}
.sol-body{padding:18px}
.sol-num{font-family:'Playfair Display',serif;color:var(--gold);font-weight:700;font-size:14px}
.sol-body h3{font-family:'Be Vietnam Pro',sans-serif;font-size:16px;font-weight:600;color:var(--brown-800);margin:2px 0 8px}
.sol-body p{font-size:13px;color:var(--muted)}

/* services */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.svc .ph{height:120px;border-radius:0}
.svc-body{padding:14px 14px 18px}
.svc-body h3{font-family:'Be Vietnam Pro',sans-serif;font-size:14.5px;font-weight:600;color:var(--brown-800);margin-bottom:4px}
.svc-body p{font-size:12px;color:var(--muted)}

/* projects */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tab{padding:7px 16px;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:500;color:#6a5f52;cursor:pointer;transition:.2s}
.tab.active,.tab:hover{background:var(--brown-600);color:#fff;border-color:var(--brown-600)}
.proj{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.proj .ph{height:150px;border-radius:0}
.proj-body{padding:16px}
.proj-body h3{font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:600;color:var(--brown-800);margin-bottom:8px}
.proj-meta{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:4px;flex-wrap:wrap}
.proj-meta span{display:inline-flex;align-items:center;gap:5px}
.proj-desc{font-size:12.5px;color:#6a5f52;margin-bottom:10px}
.proj-link{color:var(--gold);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.proj-link:hover{color:var(--brown-600)}

/* process */
.proc-wrap{background:var(--cream-2);border:1px solid var(--line);border-radius:18px;padding:40px 30px}
.proc{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.proc-step{text-align:center}
.proc-step .top{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.proc-step .ic{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold-soft);display:grid;place-items:center;color:var(--gold);background:#fff}
.proc-step .n{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--gold)}
.proc-step h3{font-family:'Be Vietnam Pro',sans-serif;font-size:13.5px;font-weight:600;color:var(--brown-800);margin-bottom:5px}
.proc-step p{font-size:11.5px;color:var(--muted)}

/* materials + why */
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}
.panel h2{font-size:22px;color:var(--brown-800);margin-bottom:22px;text-align:left}
.mat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mat{text-align:center}
.mat .sw{height:56px;border-radius:10px;margin-bottom:7px;border:1px solid rgba(0,0,0,.05)}
.mat span{font-size:11.5px;color:#6a5f52;font-weight:500}
.sw-1{background:linear-gradient(135deg,#d8b98a,#c19a63)}
.sw-2{background:linear-gradient(135deg,#e6cfa6,#cbb083)}
.sw-3{background:linear-gradient(135deg,#e9e4da,#cfc7b6)}
.sw-4{background:linear-gradient(135deg,#efe9df,#d9d0bf)}
.sw-5{background:linear-gradient(135deg,#c8a878,#a9895e)}
.sw-6{background:linear-gradient(135deg,#d4bd97,#b89b6f)}
.sw-7{background:linear-gradient(135deg,#dfe6e4,#c2cfcc)}
.sw-8{background:linear-gradient(135deg,#cfc3ad,#b3a488)}
.sw-9{background:linear-gradient(135deg,#f0e2b8,#e6cf8b)}
.sw-10{background:linear-gradient(135deg,#3f3a34,#5c554c)}
.panel .note{margin-top:22px;font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:16px}
.why-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.why-item:last-child{border-bottom:none}
.why-item .ic{width:42px;height:42px;flex:none;border-radius:10px;background:var(--cream-2);display:grid;place-items:center;color:var(--gold);border:1px solid var(--line)}
.why-item h3{font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:600;color:var(--brown-800);margin-bottom:2px}
.why-item p{font-size:13px;color:var(--muted)}

/* quote / form / testimonials */
.trio{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:24px;align-items:start}
.card-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow-sm)}
.card-box h2{font-size:20px;color:var(--brown-800);text-align:left;margin-bottom:18px}
table.price{width:100%;border-collapse:collapse;font-size:13px}
table.price th{background:var(--cream-2);color:var(--brown-700);font-weight:600;text-align:left;padding:9px 10px;font-size:12px}
table.price td{padding:9px 10px;border-bottom:1px solid var(--line);color:#5c5245}
table.price td:last-child{color:var(--gold);font-weight:600;text-align:right}
.price-note{font-size:11px;color:var(--muted);margin:14px 0 16px;font-style:italic}
.form-row{margin-bottom:12px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form input,.form select,.form textarea{
  width:100%;font-family:inherit;font-size:13px;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--cream);color:var(--ink);outline:none;transition:.15s;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold-soft);background:#fff}
.form textarea{resize:vertical;min-height:70px}
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}
.form-msg{margin-top:12px;font-size:13px;color:var(--brown-600);background:var(--cream-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:none}
.form-msg.show{display:block}
.testi{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.testi:last-child{border-bottom:none}
.testi .av{width:42px;height:42px;flex:none;border-radius:50%;background:linear-gradient(135deg,#d9c3a2,#b89b78)}
.testi .q{font-size:12.5px;color:#5c5245;margin-bottom:6px}
.testi .who{font-size:12px;font-weight:600;color:var(--brown-700)}

/* ================= FOOTER ================= */
.site-footer{background:var(--brown-800);color:#e6dccc;padding:56px 0 22px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.5fr;gap:34px}
.foot .logo{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#fff}
.foot .logo b{color:var(--gold-soft)}
.foot p.tag{font-size:13px;color:#c7b8a4;margin:10px 0 16px;max-width:280px}
.foot h4{font-size:14px;color:#fff;margin-bottom:14px;font-family:'Be Vietnam Pro',sans-serif;font-weight:600}
.foot ul{list-style:none;font-size:13px;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.foot ul a{color:#cdbfab;transition:.2s}
.foot ul a:hover{color:var(--gold-soft)}
.foot .contact li{display:flex;gap:10px;color:#cdbfab;margin-bottom:9px;font-size:13px}
.foot .contact .ic{color:var(--gold-soft);flex:none;margin-top:3px}
.foot .contact b,.foot .contact b a{color:#fff}
.foot-cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:22px;margin-top:16px}
.foot-cta h4{font-size:16px}
.foot-cta p{font-size:12.5px;color:#c7b8a4;margin-bottom:14px}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#e6dccc;transition:.2s;cursor:pointer}
.socials a:hover{background:var(--gold)}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;text-align:center;font-size:12px;color:#a89882}

/* ================= BLOG FALLBACK ================= */
.blog-list{min-height:40vh}
.blog-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:22px;box-shadow:var(--shadow-sm)}
.blog-title{font-size:24px;color:var(--brown-800);margin-bottom:6px}
.blog-title a:hover{color:var(--gold)}
.blog-meta{font-size:12px;color:var(--muted);margin-bottom:12px}
.blog-content p,.blog-excerpt p{margin-bottom:14px}

/* ================= RESPONSIVE ================= */
@media(max-width:960px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:16px 24px;box-shadow:var(--shadow-sm);
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:14px}
  .main-nav .current-menu-item>a::after{display:none}
  .phone small,.phone .num{display:none}
  .menu-toggle{display:block}
  .hero-media{min-height:auto}
  .hero-media::before{background:linear-gradient(180deg,rgba(250,247,242,.9),rgba(250,247,242,.64))}
  .hero-left{max-width:100%;padding:44px 0}
  .stats{margin-top:18px}
  .stats,.grid-4,.grid-6,.proc{grid-template-columns:repeat(2,1fr)}
  .grid-3,.trio,.grid-2{grid-template-columns:1fr}
  .mat-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:782px){
  .admin-bar .site-header{top:46px}
}
@media(max-width:560px){
  .grid-4,.grid-6,.stats,.foot-grid{grid-template-columns:1fr}
  .form-2{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .head-right .btn{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

/* ================= TIN TỨC (news) ================= */
.news-hero{background:linear-gradient(180deg,var(--cream-2),var(--cream));border-bottom:1px solid var(--line);padding:54px 0 40px}
.news-hero .news-kicker{display:inline-block;font-size:12px;letter-spacing:.22em;font-weight:700;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.news-hero h1{font-size:38px;line-height:1.15;color:var(--brown-800);margin:0 0 10px}
.news-hero .news-sub{font-size:16px;color:var(--muted);max-width:680px;margin:0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.news-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2);position:relative}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.news-card:hover .news-thumb img{transform:scale(1.05)}
.news-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;letter-spacing:.05em;color:var(--gold-soft);font-weight:700}
.news-thumb-ph b{color:var(--brown-600)}
.news-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.news-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:8px}
.news-cat{background:var(--beige);color:var(--brown-700);border-radius:99px;padding:2px 10px;font-weight:600}
.news-card-title{font-size:19px;line-height:1.35;color:var(--brown-800);margin:0 0 10px}
.news-card-title a:hover{color:var(--gold)}
.news-excerpt{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 14px}
.news-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--gold)}
.news-more svg{width:16px;height:16px}
.news-more:hover{gap:10px;color:var(--brown-600)}
.news-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:40px}
.news-pagination .page-numbers{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--brown-700);font-weight:600;font-size:14px}
.news-pagination .page-numbers.current{background:var(--brown-600);border-color:var(--brown-600);color:#fff}
.news-pagination a.page-numbers:hover{border-color:var(--gold);color:var(--gold)}
.news-empty{text-align:center;padding:50px 20px;background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}
.news-empty h2{color:var(--brown-800);margin:0 0 8px}
.news-empty p{color:var(--muted);margin:0 0 18px}

/* ---- Bài viết đơn ---- */
.news-single{padding-bottom:20px}
.ns-head{background:linear-gradient(180deg,var(--cream-2),var(--cream));border-bottom:1px solid var(--line);padding:34px 0 30px}
.ns-back{display:inline-block;font-size:13px;font-weight:600;color:var(--gold);margin-bottom:14px}
.ns-back:hover{color:var(--brown-600)}
.ns-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px}
.ns-title{font-size:34px;line-height:1.2;color:var(--brown-900);margin:0;max-width:820px}
.ns-cover{margin:26px auto 0}
.ns-cover img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
.ns-content{max-width:800px;margin:28px auto 0;font-size:16.5px;line-height:1.8;color:var(--ink)}
.ns-content p{margin:0 0 18px}
.ns-content h2{font-size:24px;color:var(--brown-800);margin:32px 0 12px}
.ns-content h3{font-size:20px;color:var(--brown-800);margin:26px 0 10px}
.ns-content img{max-width:100%;height:auto;border-radius:12px;margin:10px 0}
.ns-content a{color:var(--gold);text-decoration:underline}
.ns-content ul,.ns-content ol{margin:0 0 18px 22px}
.ns-content li{margin-bottom:8px}
.ns-content blockquote{border-left:3px solid var(--gold);background:var(--cream-2);padding:14px 18px;margin:0 0 18px;border-radius:0 10px 10px 0;color:var(--brown-700)}
.ns-tags{margin-top:24px;font-size:13px;color:var(--gold-soft)}
.ns-foot{max-width:800px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.ns-back2{font-weight:600;color:var(--brown-600)}
.ns-back2:hover{color:var(--gold)}
.ns-related-h{font-size:22px;color:var(--brown-800);margin:0 0 20px}

@media(max-width:960px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .news-hero h1{font-size:30px}
  .ns-title{font-size:27px}
}
@media(max-width:560px){
  .news-grid{grid-template-columns:1fr}
  .news-hero{padding:40px 0 30px}
  .news-hero h1{font-size:25px}
  .ns-content{font-size:16px}
}

/* ================= HERO TRUST + DẢI KHU VỰC + NÚT NỔI ================= */
.hero-trust{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:#fff;background:rgba(74,55,40,.42);border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:99px;backdrop-filter:blur(4px)}
.hero-trust svg{width:17px;height:17px;color:var(--gold-soft);flex:none}
.hero:not(.has-hero-img) .hero-trust{color:var(--brown-700);background:var(--cream-2);border-color:var(--line)}
.hero:not(.has-hero-img) .hero-trust svg{color:var(--gold)}

.region-band{background:var(--brown-800);padding:16px 0}
.region-band .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.region-lead{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap}
.region-lead svg{width:16px;height:16px;flex:none}
.region-chips{display:flex;flex-wrap:wrap;gap:8px}
.region-chip{font-size:13px;font-weight:600;color:#f4ede0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:5px 13px}

/* Nút liên hệ nổi (mọi trang) */
.float-dock{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px}
.float-dock .fd-btn{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;color:#fff;box-shadow:0 8px 22px -6px rgba(0,0,0,.45);transition:transform .15s}
.float-dock .fd-btn:hover{transform:scale(1.08)}
.float-dock .fd-call{background:linear-gradient(150deg,#2fa060,#1f8a4d);animation:fdpulse 2s infinite}
.float-dock .fd-zalo{background:#0068ff;font-weight:800;font-size:14px;letter-spacing:.02em}
.float-dock .fd-ic{display:inline-flex;align-items:center;justify-content:center}
.float-dock .fd-ic svg{width:26px;height:26px}
.float-dock .fd-tip{position:absolute;right:64px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--brown-800);color:#fff;font-size:13px;font-weight:600;padding:6px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:var(--shadow-sm)}
.float-dock .fd-btn:hover .fd-tip{opacity:1}
@keyframes fdpulse{0%{box-shadow:0 8px 22px -6px rgba(0,0,0,.45),0 0 0 0 rgba(47,160,96,.5)}70%{box-shadow:0 8px 22px -6px rgba(0,0,0,.45),0 0 0 12px rgba(47,160,96,0)}100%{box-shadow:0 8px 22px -6px rgba(0,0,0,.45),0 0 0 0 rgba(47,160,96,0)}}
@media(max-width:560px){.float-dock{right:12px;bottom:12px}.float-dock .fd-btn{width:50px;height:50px}.float-dock .fd-tip{display:none}}

/* ================= CAM KẾT & BẢO HÀNH ================= */
.commit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.commit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow-sm);text-align:center}
.commit .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--cream-2);color:var(--gold);margin-bottom:12px}
.commit .ic svg{width:26px;height:26px}
.commit h3{font-size:16px;color:var(--brown-800);margin:0 0 6px}
.commit p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
@media(max-width:960px){.commit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.commit-grid{grid-template-columns:1fr}}

/* ============ GALLERY CÔNG TRÌNH ============ */
.gal-tabs{margin-bottom:26px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal{margin:0}
.gal-btn{display:block;width:100%;padding:0;border:0;background:var(--cream-2);border-radius:var(--radius);overflow:hidden;cursor:zoom-in;position:relative;line-height:0;box-shadow:var(--shadow-sm)}
.gal-btn img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .4s ease}
.gal-btn:hover img{transform:scale(1.05)}
.gal-zoom{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(47,36,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
.gal-zoom svg{width:18px;height:18px}
.gal-btn:hover .gal-zoom,.gal-btn:focus-visible .gal-zoom{opacity:1}
.gal figcaption{font-size:13px;color:var(--brown-700);margin-top:9px;line-height:1.5;text-align:center}
.gal-video-note{margin-top:28px;text-align:center;color:var(--brown-700);font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px}
.gal-video-note svg{width:20px;height:20px;color:var(--gold)}
@media(max-width:960px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}.gal-btn img{height:160px}}
@media(max-width:400px){.gallery-grid{grid-template-columns:1fr}.gal-btn img{height:220px}}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(28,21,14,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox .lb-img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.lightbox .lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#f4efe6;font-size:14px;padding:0 20px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer;border-radius:50%;transition:background .2s ease}
.lightbox button:hover{background:rgba(255,255,255,.28)}
.lb-close{top:18px;right:20px;width:44px;height:44px;font-size:28px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:30px;line-height:1}
.lb-prev{left:16px}
.lb-next{right:16px}
@media(max-width:680px){.lb-prev,.lb-next{width:42px;height:42px;font-size:24px}}

/* ============ PHỤ KIỆN (VẬT LIỆU) ============ */
.acc-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.acc-thumb{border-radius:10px;overflow:hidden;background:var(--cream-2);line-height:0;box-shadow:var(--shadow-sm)}
.acc-thumb img{width:100%;height:92px;object-fit:cover;display:block}
.acc-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:13.5px;color:var(--brown-700);line-height:1.6}
.acc-note svg{width:18px;height:18px;color:var(--gold);flex:0 0 auto;margin-top:2px}
@media(max-width:520px){.acc-strip{grid-template-columns:repeat(2,1fr)}.acc-thumb img{height:110px}}

/* ============ CARD 03 -> LINK XƯỞNG (trang chủ) ============ */
.sol-media-link{position:relative;display:block;line-height:0;overflow:hidden;cursor:pointer}
.sol-media-link .ph{transition:transform .4s ease}
.sol-media-link:hover .ph{transform:scale(1.05)}
.sol-media-badge{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;background:linear-gradient(to top,rgba(47,36,26,.82),rgba(47,36,26,0));color:#fff;font-size:13px;font-weight:600;line-height:1.2}
.sol-media-badge svg{width:16px;height:16px}
.sol-inline-link{color:var(--gold);font-weight:600;white-space:nowrap}
.sol-inline-link:hover{text-decoration:underline}

/* ============ TRANG GIỚI THIỆU XƯỞNG ============ */
.xuong-hero{padding-bottom:10px}
.xuong-lead{max-width:760px;color:var(--brown-700);font-size:16px;line-height:1.75;margin:6px 0 24px}
.xuong-empty{text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:40px 24px;color:var(--muted)}
.xuong-empty .ic svg{width:44px;height:44px;color:var(--gold-soft)}
.xuong-empty p{max-width:560px;margin:12px auto 0;line-height:1.7}
.xuong-empty a{color:var(--gold);font-weight:600}
.xuong-specs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.xspec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;text-align:center;box-shadow:var(--shadow-sm)}
.xspec .ic svg{width:30px;height:30px;color:var(--gold)}
.xspec-label{display:block;font-size:12.5px;color:var(--muted);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.03em}
.xspec-val{display:block;font-size:15px;font-weight:600;color:var(--brown-800)}
.xspec.is-pending .xspec-val{color:var(--muted);font-weight:500;font-style:italic}
.xuong-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.xstep-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.xstep-top .ic svg{width:26px;height:26px;color:var(--gold)}
.xstep-top .n{font-family:'Be Vietnam Pro',sans-serif;font-size:22px;font-weight:700;color:var(--cream-2);-webkit-text-stroke:1px var(--gold-soft)}
.xstep h3{font-size:15px;color:var(--brown-800);margin:0 0 6px}
.xstep p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
.xuong-cta-box{background:linear-gradient(135deg,var(--brown-800),var(--brown-600));color:#fff;border-radius:var(--radius);padding:38px 30px;text-align:center;box-shadow:var(--shadow)}
.xuong-cta-box h2{color:#fff;margin:0 0 10px}
.xuong-cta-box p{max-width:620px;margin:0 auto 22px;color:rgba(255,255,255,.9);line-height:1.7}
.xuong-cta-box .hero-cta{justify-content:center}
.xuong-cta-box .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.xuong-cta-box .btn-ghost:hover{background:rgba(255,255,255,.14)}
@media(max-width:960px){.xuong-specs{grid-template-columns:repeat(3,1fr)}.xuong-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.xuong-specs{grid-template-columns:repeat(2,1fr)}.xuong-steps{grid-template-columns:1fr}}

/* ================= MOBILE STICKY CTA (chuyển đổi) ================= */
.m-cta{display:none}
@media(max-width:760px){
  .m-cta{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -8px 24px -14px rgba(42,27,18,.5);
  }
  .m-cta a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:10px 6px 11px;font-size:12px;font-weight:700;background:var(--brown-800);color:#fff;
  }
  .m-cta a .svgi,.m-cta a svg{width:20px;height:20px}
  .m-cta a.m-call{background:linear-gradient(150deg,#2fa060,#1f8a4d)}
  .m-cta a.m-zalo{background:#0068ff}
  .m-cta a.m-quote{background:linear-gradient(150deg,var(--gold),#b5863b);color:#2a1b02}
  /* chừa chỗ cho thanh CTA + ẩn nút nổi để không chồng */
  body{padding-bottom:64px}
  .float-dock{display:none}
}