/* =========================================================
   NỘI THẤT LX5 — Website thương hiệu
   Style chung cho toàn bộ trang
   Bảng màu: Gỗ espresso + Vàng đồng + Kem
   ========================================================= */

/* Font serif tạp chí cho tiêu đề lớn (ATELIER v12) — có hỗ trợ tiếng Việt.
   @import phải nằm trên mọi rule khác nên đặt ngay đầu file. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');

:root {
  --espresso: #2a2a2a;      /* xám khói - nền tối sang, nhẹ hơn đen */
  --espresso-soft: #383838;
  --charcoal: #1f1f1f;
  --gold: #c9a96a;          /* champagne - điểm nhấn ánh kim */
  --gold-bright: #ddc292;
  --cream: #ffffff;         /* trắng sạch - nền chính */
  --cream-dark: #f6f3ee;    /* trắng ấm - nền mục xen kẽ */
  --ink: #1a1a1a;           /* đen mềm - chữ chính */
  --ink-soft: #6e6e6e;
  --white: #ffffff;
  --line: #eeeae3;
  --shadow: 0 18px 50px rgba(43, 33, 28, 0.12);
  --shadow-lg: 0 30px 70px rgba(43, 33, 28, 0.18);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1200px;
  --font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.72;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: var(--ink); }
h1, h2 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.005em; }
.article-body h2, .article-body h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); display: inline-block; }

.section { padding: 96px 0; }
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 100px; font-weight: 600; font-size: 0.98rem;
  cursor: pointer; border: 1.5px solid transparent; transition: all 0.35s var(--ease);
  font-family: var(--font-body);
}
.btn-primary { background: var(--gold); color: var(--charcoal); }
.btn-primary:hover { background: var(--gold-bright); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(193,154,107,0.4); }
.btn-outline { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-outline:hover { background: var(--gold); color: var(--charcoal); transform: translateY(-3px); }
.btn-dark { background: var(--espresso); color: var(--cream); }
.btn-dark:hover { background: var(--charcoal); transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0; transition: all 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(246,241,234,0.92); backdrop-filter: blur(14px);
  padding: 14px 0; box-shadow: 0 8px 30px rgba(43,33,28,0.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 12px;
  background: #0d0d0d url('../img/logo-mark.png') center/cover no-repeat;
  display: grid; place-items: center; color: transparent; font-size: 0;
  box-shadow: var(--shadow); border: 1px solid rgba(193,154,107,0.35);
  flex-shrink: 0;
}
.brand-name { line-height: 1.1; }
.brand-name strong { font-family: var(--font-display); font-size: 1.2rem; display: block; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 400px) { .brand-name strong { font-size: 1.02rem; } }
.brand-name span { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.site-header:not(.scrolled) .brand-name strong { color: var(--cream); }
.site-header.at-top-light .brand-name strong { color: var(--cream); }

.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a { font-size: 0.94rem; font-weight: 500; color: var(--ink); position: relative; transition: color 0.3s; }
.site-header:not(.scrolled) .nav-links a { color: rgba(246,241,234,0.9); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--gold); transition: width 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.site-header:not(.scrolled) .nav-phone { color: var(--cream); }

.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { width: 26px; height: 2px; background: var(--ink); transition: all 0.3s; }
.site-header:not(.scrolled) .menu-toggle span { background: var(--cream); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(120deg, var(--charcoal) 0%, var(--espresso) 55%, var(--espresso-soft) 100%);
  color: var(--cream); overflow: hidden; padding: 140px 0 80px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 78% 30%, rgba(193,154,107,0.28), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(193,154,107,0.12), transparent 40%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: stretch; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); color: var(--cream); margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--gold-bright); }
.hero p.lead { font-size: 1.18rem; color: rgba(246,241,234,0.82); max-width: 520px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-stats { display: flex; gap: 40px; }
.hero-stats .stat strong { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-bright); display: block; }
.hero-stats .stat span { font-size: 0.85rem; color: rgba(246,241,234,0.7); letter-spacing: 0.04em; }

.hero-segments { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.hero-segments a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgba(193,154,107,0.4); border-radius: 100px; color: rgba(246,241,234,0.9); font-size: 0.9rem; font-weight: 500; transition: all 0.3s var(--ease); }
.hero-segments a:hover { background: var(--gold); color: var(--charcoal); border-color: var(--gold); transform: translateY(-2px); }
.hero-segments a i { color: var(--gold); }
.hero-segments a:hover i { color: var(--charcoal); }

.hero-visual { position: relative; z-index: 2; display: flex; }
.hero-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  width: 100%; height: 100%; min-height: 560px; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(193,154,107,0.3);
}
.hero-badge {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  background: rgba(28,22,19,0.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(193,154,107,0.3); border-radius: var(--radius);
  padding: 18px 22px; display: flex; align-items: center; gap: 14px;
}
.hero-badge .dot { width: 44px; height: 44px; border-radius: 12px; background: var(--gold); display: grid; place-items: center; color: var(--charcoal); font-size: 1.3rem; flex-shrink: 0; }
.hero-badge strong { display: block; color: var(--cream); font-family: var(--font-body); font-size: 0.98rem; }
.hero-badge span { font-size: 0.82rem; color: rgba(246,241,234,0.7); }

/* Placeholder ảnh */
.img-ph {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(193,154,107,0.06) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, var(--espresso-soft), var(--espresso));
  display: grid; place-items: center; text-align: center; color: rgba(246,241,234,0.55);
  font-size: 0.82rem; letter-spacing: 0.05em; padding: 20px;
}
.img-ph.light {
  background:
    repeating-linear-gradient(45deg, rgba(193,154,107,0.08) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, var(--cream-dark), var(--cream));
  color: var(--ink-soft);
}
.img-ph i { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.6; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--espresso); color: var(--cream); padding: 30px 0; }
.trust-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.trust-row .t-item { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: rgba(246,241,234,0.85); }
.trust-row .t-item i { color: var(--gold); font-size: 1.3rem; }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 40px 32px;
  border: 1px solid var(--line); transition: all 0.4s var(--ease); position: relative; overflow: hidden;
}
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: var(--cream); color: var(--gold); font-size: 1.8rem; margin-bottom: 24px;
  transition: all 0.4s var(--ease);
}
.service-card:hover .service-icon { background: var(--gold); color: var(--white); transform: rotate(-6deg); }
.service-card h3 { font-size: 1.4rem; margin-bottom: 14px; }
.service-card p { color: var(--ink-soft); margin-bottom: 20px; font-size: 0.97rem; }
.service-card .learn { color: var(--gold); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; }
.service-card .learn i { transition: transform 0.3s; }
.service-card:hover .learn i { transform: translateX(5px); }

/* ---------- Why us / Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-visual { order: 2; }
.split-visual { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow); }
.feature-list { list-style: none; margin-top: 30px; display: grid; gap: 22px; }
.feature-list li { display: flex; gap: 18px; }
.feature-list .fi-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--espresso); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem; }
.feature-list h4 { font-size: 1.12rem; margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; }
.feature-list p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Process ---------- */
.process { background: var(--espresso); color: var(--cream); }
.process .section-head h2 { color: var(--cream); }
.process .section-head p { color: rgba(246,241,234,0.72); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step { position: relative; padding: 32px 24px; border: 1px solid rgba(193,154,107,0.25); border-radius: var(--radius); background: rgba(255,255,255,0.02); transition: all 0.4s var(--ease); }
.process-step:hover { background: rgba(193,154,107,0.08); transform: translateY(-6px); }
.process-step .num { font-family: var(--font-display); font-size: 3rem; color: var(--gold); opacity: 0.5; line-height: 1; margin-bottom: 14px; }
.process-step h4 { color: var(--cream); font-family: var(--font-body); font-size: 1.15rem; margin-bottom: 10px; }
.process-step p { color: rgba(246,241,234,0.7); font-size: 0.92rem; }

/* ---------- Projects ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; box-shadow: var(--shadow); }
.project-card .img-ph { transition: transform 0.6s var(--ease); }
.project-card:hover .img-ph { transform: scale(1.06); }
.project-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; background: linear-gradient(to top, rgba(28,22,19,0.88) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.project-card:hover .project-overlay { opacity: 1; }
.project-overlay .tag { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; }
.project-overlay h3 { color: var(--cream); font-size: 1.4rem; }
.project-overlay p { color: rgba(246,241,234,0.78); font-size: 0.9rem; margin-top: 6px; }
.project-card.static-caption .project-overlay { opacity: 1; background: linear-gradient(to top, rgba(28,22,19,0.9) 0%, transparent 65%); }

/* filter */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.filter-btn { padding: 10px 24px; border-radius: 100px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; font-weight: 500; font-family: var(--font-body); transition: all 0.3s; color: var(--ink-soft); }
.filter-btn.active, .filter-btn:hover { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testi-card { background: var(--white); border-radius: var(--radius-lg); padding: 36px 32px; border: 1px solid var(--line); }
.testi-card .stars { color: var(--gold); margin-bottom: 18px; letter-spacing: 3px; }
.testi-card blockquote { font-size: 1.05rem; color: var(--ink); margin-bottom: 24px; line-height: 1.7; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-author .avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--espresso)); display: grid; place-items: center; color: var(--cream); font-weight: 700; font-family: var(--font-display); }
.testi-author strong { display: block; font-family: var(--font-body); }
.testi-author span { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Stats band ---------- */
.stats-band { background: linear-gradient(120deg, var(--espresso), var(--charcoal)); color: var(--cream); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-block strong { font-family: var(--font-display); font-size: 3.2rem; color: var(--gold-bright); display: block; line-height: 1; }
.stat-block span { color: rgba(246,241,234,0.75); font-size: 0.95rem; margin-top: 10px; display: block; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--gold); color: var(--charcoal); text-align: center; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.25), transparent 60%); }
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 18px; color: var(--charcoal); }
.cta-band p { font-size: 1.15rem; margin-bottom: 34px; max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-band .btn-dark { background: var(--charcoal); }

/* ---------- Contact / Form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-info h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 20px; }
.contact-info p { color: var(--ink-soft); margin-bottom: 34px; }
.contact-items { display: grid; gap: 22px; }
.contact-item { display: flex; gap: 18px; align-items: flex-start; }
.contact-item .ci-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--espresso); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; font-size: 1.3rem; }
.contact-item strong { display: block; margin-bottom: 2px; }
.contact-item span, .contact-item a { color: var(--ink-soft); font-size: 0.96rem; }
.contact-item a:hover { color: var(--gold); }

.form-card { background: var(--white); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-card h3 { font-size: 1.6rem; margin-bottom: 8px; }
.form-card > p { color: var(--ink-soft); margin-bottom: 28px; font-size: 0.95rem; }
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink); background: var(--cream);
  transition: all 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 4px rgba(193,154,107,0.12);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-card .btn { width: 100%; justify-content: center; }
.form-note { font-size: 0.82rem; color: var(--ink-soft); text-align: center; margin-top: 16px; }
.form-success { display: none; padding: 16px; background: #e8f5e9; color: #2e7d32; border-radius: 12px; margin-bottom: 20px; font-size: 0.92rem; }
.form-success.show { display: block; }

/* ---------- Page hero (trang phụ) ---------- */
.page-hero {
  background: linear-gradient(120deg, var(--charcoal), var(--espresso)); color: var(--cream);
  padding: 170px 0 80px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(193,154,107,0.2), transparent 50%); }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--cream); margin-bottom: 16px; }
.page-hero p { color: rgba(246,241,234,0.8); font-size: 1.1rem; max-width: 620px; margin: 0 auto; }
.breadcrumb { display: flex; gap: 8px; justify-content: center; margin-top: 24px; font-size: 0.88rem; color: rgba(246,241,234,0.6); }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); transition: all 0.4s var(--ease); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-thumb { aspect-ratio: 16/10; overflow: hidden; }
.blog-thumb .img-ph { transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-thumb .img-ph { transform: scale(1.06); }
.blog-body { padding: 28px; }
.blog-body .meta { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.blog-body h3 { font-size: 1.3rem; margin-bottom: 12px; line-height: 1.35; }
.blog-body p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 16px; }
.blog-body .read { color: var(--gold); font-weight: 600; font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-q { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 1.05rem; gap: 20px; }
.faq-q .icon { color: var(--gold); font-size: 1.4rem; transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a-inner { padding: 0 26px 24px; color: var(--ink-soft); }
.faq-item.open .faq-a { max-height: 300px; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 34px; display: flex; flex-direction: column; transition: all 0.4s var(--ease); }
.price-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.price-card.featured { background: var(--espresso); color: var(--cream); border-color: var(--gold); transform: scale(1.03); }
.price-card.featured h3, .price-card.featured .price { color: var(--cream); }
.price-badge { display: inline-block; background: var(--gold); color: var(--charcoal); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px; align-self: flex-start; }
.price-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.price-card .price { font-family: var(--font-display); font-size: 2.6rem; color: var(--ink); margin-bottom: 4px; }
.price-card .price small { font-size: 1rem; color: var(--ink-soft); font-family: var(--font-body); }
.price-card.featured .price small { color: rgba(246,241,234,0.7); }
.price-card .price-sub { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 26px; }
.price-card.featured .price-sub { color: rgba(246,241,234,0.7); }
.price-features { list-style: none; display: grid; gap: 14px; margin-bottom: 30px; flex-grow: 1; }
.price-features li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.price-features li i { color: var(--gold); flex-shrink: 0; }
.price-card.featured .price-features li i { color: var(--gold-bright); }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(246,241,234,0.7); padding: 72px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
.footer-brand .brand { margin-bottom: 20px; }
.footer-brand .brand-name strong { color: var(--cream); }
.footer-brand p { font-size: 0.94rem; max-width: 300px; margin-bottom: 22px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.06); display: grid; place-items: center; color: var(--cream); transition: all 0.3s; font-size: 1.1rem; }
.footer-social a:hover { background: var(--gold); color: var(--charcoal); transform: translateY(-3px); }
.footer-col h4 { color: var(--cream); font-family: var(--font-body); font-size: 1rem; margin-bottom: 20px; letter-spacing: 0.03em; }
.footer-col ul { list-style: none; display: grid; gap: 12px; }
.footer-col a { font-size: 0.92rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 12px; font-size: 0.92rem; margin-bottom: 14px; }
.footer-contact i { color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 0.86rem; }

/* ---------- Floating actions ---------- */
.float-actions { position: fixed; bottom: 24px; right: 24px; z-index: 90; display: flex; flex-direction: column; gap: 14px; }
.float-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-size: 1.5rem; box-shadow: var(--shadow); transition: all 0.3s; cursor: pointer; }
.float-btn:hover { transform: scale(1.1) translateY(-2px); }
.float-btn.zalo { background: #0068ff; }
.float-btn.phone { background: #25d366; }
.float-btn.phone::after {
  content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; opacity: 0.4; animation: ring 1.6s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; width: 100%; }
  .hero-frame { min-height: 420px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-visual { order: 0; }
  .services-grid, .projects-grid, .testi-grid, .blog-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .price-card.featured { transform: none; }
}
@media (max-width: 680px) {
  .section { padding: 68px 0; }
  .nav-links { position: fixed; top: 0; right: -100%; width: 82%; max-width: 360px; height: 100vh; background: var(--espresso); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 84px 32px 48px; gap: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transition: right 0.4s var(--ease); z-index: 200; box-shadow: -20px 0 60px rgba(0,0,0,0.3); }
  .nav-links.open { right: 0; }
  .nav-links a { color: var(--cream) !important; font-size: 1.12rem; }
  .nav-links .has-dd { width: 100%; }
  .nav-links .dd-menu a { font-size: 1rem; color: rgba(246,241,234,0.82) !important; }
  .menu-toggle { display: flex; z-index: 201; }
  .nav-phone { display: none; }
  .services-grid, .projects-grid, .testi-grid, .blog-grid, .pricing-grid, .process-grid, .stats-grid, .form-row, .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; }
  .hero-stats .stat strong { font-size: 1.7rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .form-card { padding: 30px 22px; }
  .btn { padding: 13px 26px; }
  .hero { min-height: auto; padding: 96px 0 40px; }
}
@media (max-width: 767px) {
  .form-group input, .form-group select, .form-group textarea { font-size: 1rem; }
}
.article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table > * { min-width: 480px; }

/* =========================================================
   NÂNG CẤP GIAO DIỆN — MODERN LUXURY SALON (trend Hà Nội)
   ========================================================= */
:root { --radius: 16px; --radius-lg: 26px; --sage: #7c7a63; }

/* ---- Header tinh tế hơn ---- */
.site-header.scrolled {
  border-bottom: 1px solid rgba(193,154,107,0.18);
  box-shadow: 0 10px 40px rgba(43,33,28,0.07);
}
.nav-links a { letter-spacing: 0.01em; }

/* ---- Nút: hiệu ứng ánh sáng lướt (shine) ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-22deg); transition: left 0.65s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 150%; }

/* ---- Ô ảnh placeholder sang hơn: shimmer tinh tế ---- */
.img-ph { position: relative; letter-spacing: 0.05em; overflow: hidden; }
.img-ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  background-size: 220% 100%; animation: ph-shimmer 4s infinite linear; pointer-events: none;
}
@keyframes ph-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }

/* ---- Tiêu đề mục: gạch chân vàng đồng tinh tế (khi căn giữa) ---- */
.section-head.center h2 { position: relative; display: inline-block; padding-bottom: 18px; }
.section-head.center h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---- Card mềm mại, shadow khuếch tán cao cấp ---- */
.service-card, .blog-card, .price-card, .testi-card {
  box-shadow: 0 10px 40px rgba(43,33,28,0.05);
}
.service-card:hover, .blog-card:hover, .price-card:hover {
  box-shadow: 0 34px 70px rgba(43,33,28,0.16);
}
.service-icon { border-radius: 18px; }

/* ---- Dự án: overlay mượt + viền vàng khi hover ---- */
.project-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(43,33,28,0.22); }

/* ---- Hero: quầng sáng ấm gián tiếp mềm hơn ---- */
.hero::after {
  content: ""; position: absolute; left: -10%; bottom: -20%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(193,154,107,0.16), transparent 70%);
  pointer-events: none;
}
.hero-frame { border-radius: 28px; }
.hero-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(216,177,132,0.25); pointer-events: none;
}

/* ---- Trust bar: đường kẻ vàng phân tách tinh tế ---- */
.trust-bar { border-top: 1px solid rgba(193,154,107,0.2); border-bottom: 1px solid rgba(193,154,107,0.1); }

/* ---- Nút gọi/Zalo nổi: mềm & sang hơn ---- */
.float-btn { box-shadow: 0 12px 30px rgba(0,0,0,0.22); }

/* ---- Cuộn mượt & chọn vùng theo brand ---- */
::selection { background: var(--gold); color: var(--charcoal); }
html { scroll-padding-top: 90px; }

/* =========================================================
   EDITORIAL LUXURY v3 — hiện đại nhất · sang trọng nhất
   ========================================================= */
/* Khoảng thở rộng = cảm giác cao cấp */
.section { padding: 116px 0; }
.section-head { margin-bottom: 64px; }

/* Typography lớn, tự tin, tối giản */
.hero h1 { font-size: clamp(2.35rem, 3.9vw, 3.5rem); letter-spacing: -0.028em; line-height: 1.1; margin-bottom: 22px; }
.hero p.lead { font-size: 1.16rem; max-width: 540px; }
.section-head h2 { font-size: clamp(2.1rem, 4.3vw, 3.4rem); letter-spacing: -0.03em; }
.eyebrow { letter-spacing: 0.3em; font-size: 0.72rem; }

/* Nút sắc nét hiện đại */
.btn { border-radius: 10px; padding: 16px 30px; font-weight: 600; }
.hero-segments a { border-radius: 10px; }

/* Card tối giản, bo vừa, đường viền mảnh */
.service-card, .blog-card, .price-card, .testi-card { border-radius: 16px; }
.service-card { padding: 44px 36px; }

/* Nhãn số kiểu tạp chí cho card dịch vụ */
.services-grid { counter-reset: svc; }
.service-card { counter-increment: svc; }
.service-card::after {
  content: "0" counter(svc); position: absolute; top: 30px; right: 34px;
  font-weight: 800; font-size: 1rem; color: var(--line); letter-spacing: -0.02em;
}

/* Dải chữ chạy (marquee) — nét hiện đại */
.marquee { background: var(--ink); overflow: hidden; padding: 20px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 40px; padding: 0 40px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.02em; color: var(--cream); white-space: nowrap;
}
.marquee-item i { color: var(--gold); font-size: 0.7rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero badge & frame tinh tế hơn */
.hero-badge { border-radius: 16px; }

/* Divider mảnh sang trọng */
.trust-bar { padding: 34px 0; }

@media (max-width: 680px) {
  .section { padding: 76px 0; }
  .marquee-item { font-size: 1.1rem; gap: 28px; padding: 0 28px; }
  .service-card::after { top: 24px; right: 28px; }
}

/* =========================================================
   REFINE v5 — sang trọng hơn + tinh chỉnh font/cỡ chữ
   ========================================================= */
:root {
  --cream: #fbfaf9;        /* trắng ấm, mềm mắt hơn trắng phẳng */
  --cream-dark: #f4f1ea;   /* kem sáng cho mục xen kẽ */
  --ink: #202020;          /* đen mềm dễ đọc */
  --ink-soft: #737373;
  --gold: #c19a63;         /* champagne trầm, sang */
  --gold-bright: #e3ce9e;  /* champagne sáng ánh kim */
}

/* Cỡ chữ thoáng, dễ đọc, cao cấp */
body { font-size: 17px; line-height: 1.75; }
.hero p.lead { font-size: 1.18rem; line-height: 1.7; color: rgba(246,241,234,0.86); }
.section-head p { font-size: 1.12rem; }

/* Tiêu đề thanh hơn (bớt đậm nặng = sang hơn) */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.022em; }
.hero h1 { font-weight: 700; line-height: 1.06; }

/* Điểm nhấn champagne chuyển sắc kim loại */
.hero h1 em {
  background: linear-gradient(100deg, #b8925a, #ecdcb4 45%, #c19a63);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow { letter-spacing: 0.34em; font-size: 0.7rem; color: var(--gold); }

/* Nền tối: chiều sâu, sang trọng hơn */
.hero { background: linear-gradient(125deg, #171717 0%, #242424 60%, #2c2c2c 100%); }
.process { background: linear-gradient(125deg, #1b1b1b, #262626); }
.stats-band { background: linear-gradient(125deg, #1b1b1b, #262626); }
.footer .site-footer, .site-footer { background: #161616; }

/* Đường viền & nút tinh tế */
.service-card, .blog-card, .price-card, .testi-card { border-color: #efece6; }
.btn { font-weight: 600; letter-spacing: 0.005em; }

/* Khoảng thở tiêu đề mục */
.section-head.center h2 { padding-bottom: 20px; }
@media (max-width: 680px) { body { font-size: 16px; } }

/* ===== FIX HEADER: menu không gãy dòng, gọn gàng ===== */
.nav { gap: 20px; }
.nav-links { gap: 22px; }
.nav-links a { white-space: nowrap; }
.btn { white-space: nowrap; }
.nav-cta { flex-shrink: 0; }
.brand { flex-shrink: 0; }
@media (max-width: 1240px) { .nav-phone { display: none; } .nav-links { gap: 18px; } }
@media (max-width: 1024px) and (min-width: 681px) { .nav-links { gap: 14px; font-size: 0.88rem; } .brand-name strong { font-size: 1.05rem; } }

/* ===== TINH TẾ TIẾNG VIỆT: cân dòng, tránh gãy từ ghép / mồ côi ===== */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
.hero p.lead, .page-hero p, .section-head p, p.lead, .lead, .cs-intro,
.article-body p, .price-sub, blockquote, .stage p { text-wrap: pretty; }
.page-hero h1, .hero h1 { text-wrap: balance; }

/* =========================================================
   REFINE v6 — TYPOGRAPHY & MÀU CHỮ (tinh chỉnh đọc dễ hơn,
   sang hơn, đặc biệt trên mobile). Không đổi font, không đổi
   tông champagne — chỉ chỉnh cỡ/đậm/dòng/khoảng cách/độ tương phản.
   ========================================================= */
:root {
  /* Ink-soft cũ #737373 trên nền trắng chỉ ~4.27:1, dưới chuẩn AA (4.5:1)
     cho văn bản thường — đây là màu mô tả dịch vụ dùng rất nhiều. */
  --ink-soft: #5c5c5c;
  /* Biến riêng cho CHỮ (không phải nền/nút) dùng vàng champagne trên nền
     sáng: --gold gốc (#c19a63) làm chữ trên nền trắng chỉ ~3.18:1, không
     đạt chuẩn. Giữ nguyên --gold cho nút/viền/accent, chỉ thêm biến chữ. */
  --gold-ink: #9c7538;
}

/* ---- Phân cấp độ đậm rõ ràng hơn = nhìn sang & có trật tự hơn ----
   H1 đậm chắc (khẳng định thương hiệu), H2 vừa, H3/H4 nhẹ hơn một bậc
   (đúng tinh thần "tinh tế" thay vì mọi cấp đều đậm như nhau). */
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 700; letter-spacing: -0.025em; }
h3, h4 {
  font-weight: 600;
  letter-spacing: -0.012em;
  /* Sửa lỗi line-height 1.12 kế thừa từ H1 — quá sát khi H3/H4 xuống
     2-3 dòng trên card dịch vụ/blog, đặc biệt tiếng Việt nhiều dấu. */
  line-height: 1.32;
}

/* ---- Màu chữ vàng: chỉ dùng bản chữ đậm hơn (--gold-ink) trên nền
   sáng để đạt chuẩn đọc; trên nền tối trả lại --gold-bright vốn đã
   tương phản tốt và nổi bật hơn. ---- */
.eyebrow,
.service-card .learn,
.blog-body .read,
.blog-body .meta { color: var(--gold-ink); }
.hero .eyebrow,
.page-hero .eyebrow,
.process .eyebrow,
.stats-band .eyebrow,
.cta-band .eyebrow { color: var(--gold-bright); }
/* Header ở trạng thái scrolled có nền sáng (cream mờ) — hover/active
   dùng gold gốc sẽ khó đọc, đổi sang bản chữ đậm hơn */
.site-header.scrolled .nav-links a:hover,
.site-header.scrolled .nav-links a.active { color: var(--gold-ink); }

/* ---- Eyebrow: đọc rõ hơn ở cỡ nhỏ, letter-spacing hiện tại (0.34em)
   hơi rộng cho một nhãn 3-5 từ ở size nhỏ, giảm nhẹ để không "loãng" ---- */
.eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.26em; }

/* ---- .lead / mô tả section: dòng thoáng hơn, dễ đọc trên nền sáng ---- */
.lead, p.lead, .hero p.lead { color: var(--ink); }
.hero p.lead { color: rgba(251,250,249,0.88); }

/* ---- Nút & label: cỡ chữ rõ ràng hơn ở form, không đổi kích thước
   chạm tối thiểu (giữ padding hiện có) ---- */
.form-group label { font-size: 0.9rem; font-weight: 600; }
.btn { letter-spacing: 0.01em; }

/* ---- Service/blog card: tiêu đề nhẹ hơn (600) đọc thoáng hơn ở 2 dòng,
   mô tả giữ ink-soft mới (đã đạt chuẩn tương phản) ---- */
.service-card h3, .blog-body h3, .testi-card blockquote { letter-spacing: -0.01em; }

/* =========================================================
   MOBILE (≤600px) — 64% khách dùng điện thoại: ưu tiên dễ đọc,
   giảm bớt độ "hoành tráng" cỡ chữ hero để không lấn nội dung,
   nhưng vẫn giữ cảm giác cao cấp.
   ========================================================= */
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.68; }

  /* Hero H1 hiện dùng clamp min 2.9rem (~46px) — trên màn hình 360-390px
     với tiêu đề dài tiếng Việt sẽ chiếm gần hết màn hình đầu tiên.
     Hạ min-size để cân đối, vẫn đủ ấn tượng. */
  .hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); line-height: 1.14; letter-spacing: -0.02em; }
  .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.18; }
  .section-head h2 { font-size: clamp(1.7rem, 6.4vw, 2.2rem); line-height: 1.18; }

  h3, h4 { line-height: 1.34; }

  .hero p.lead { font-size: 1.02rem; line-height: 1.6; max-width: 100%; }
  .page-hero p { font-size: 1rem; }
  .section-head p { font-size: 1rem; line-height: 1.65; }

  /* Eyebrow: letter-spacing rộng ở màn hình hẹp dễ bị vỡ dòng/khó đọc */
  .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: 14px; }
  .eyebrow::before { width: 24px; }

  /* Card title/mô tả: giữ dễ đọc, không để chữ quá nhỏ */
  .service-card h3, .blog-body h3 { font-size: 1.22rem; }
  .service-card p, .blog-body p { font-size: 0.96rem; line-height: 1.6; }

  /* Nút: đảm bảo vùng chạm thoải mái + chữ đủ lớn để đọc bằng ngón tay */
  .btn { font-size: 0.96rem; padding: 14px 26px; }

  /* Form label/placeholder dễ đọc hơn trên di động */
  .form-group label { font-size: 0.92rem; }
  .form-group input, .form-group select, .form-group textarea { font-size: 1rem; }

  /* Stat numbers: cỡ lớn nhưng không vỡ layout ở hero */
  .hero-stats .stat strong { font-size: 1.6rem; }
  .stat-block strong { font-size: 2.3rem; }
}


/* ===== v10: chu vang ro net hon tren nen sang ===== */
.eyebrow{color:#b5843f;}
.eyebrow::before{background:#b5843f;}
a.learn,a.read,.service-card .learn,.blog-card .read{color:#b5843f;}
.hero .eyebrow{color:var(--gold-bright);}
.hero .eyebrow::before{background:var(--gold-bright);}

/* ===== Header gọn: hiện đủ menu, không bị lấp (v11 - 18/08) ===== */
.site-header .container { max-width: 1260px; }
.site-header .nav-links { gap: 10px; }
.site-header .nav-links a { font-size: 0.88rem; }
.site-header .nav-cta { gap: 10px; }
.site-header .nav-phone { display: none; }
.site-header .nav-cta .btn { padding: 11px 18px; font-size: 0.88rem; }
@media (max-width: 1200px) and (min-width: 681px) {
  .site-header .nav-links { position: fixed; top: 0; right: -100%; width: 82%; max-width: 360px; height: 100vh; background: var(--espresso); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 84px 32px 48px; gap: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transition: right 0.4s var(--ease); z-index: 200; box-shadow: -20px 0 60px rgba(0,0,0,0.3); }
  .site-header .nav-links.open { right: 0; }
  .site-header .nav-links a { color: var(--cream) !important; font-size: 1.15rem; }
  .site-header .menu-toggle { display: flex; z-index: 201; }
}

/* ===== Dropdown menu Sản phẩm ===== */
.has-dd{position:relative;}
.has-dd>a{display:inline-flex;align-items:center;}
.has-dd>a .fa-chevron-down{font-size:.6rem;margin-left:5px;opacity:.8;transition:transform .25s ease;}
.has-dd:hover>a .fa-chevron-down{transform:rotate(180deg);}
.dd-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:254px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:0 0 16px 16px;box-shadow:0 22px 52px rgba(42,32,24,.22);padding:10px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;z-index:200;}
.dd-menu::before{content:'';position:absolute;top:-15px;left:0;right:0;height:15px;}
.has-dd:hover .dd-menu,.has-dd:focus-within .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.dd-menu a{padding:11px 16px;border-radius:10px;font-size:.94rem;font-weight:500;line-height:1.2;display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--ink)!important;transition:background .15s ease,color .15s ease,padding-left .15s ease;}
.dd-menu a i{color:var(--gold);width:18px;text-align:center;font-size:.95rem;flex-shrink:0;}
.dd-menu a:hover{background:var(--cream-dark);color:var(--espresso)!important;padding-left:20px;}
@media(max-width:900px){.dd-menu{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;display:flex;box-shadow:none;border:none;border-radius:0;padding:2px 0 8px 14px;background:transparent;min-width:0;}.dd-menu::before{display:none;}.has-dd>a .fa-chevron-down{display:none;}.dd-menu a{color:var(--ink)!important;padding:8px 14px;}.dd-menu a:hover{background:transparent;padding-left:14px;}}

/* ===== Nút tìm kiếm header ===== */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--ink);background:var(--cream);transition:all .2s;flex-shrink:0;}
.nav-search:hover,.nav-search.active{border-color:var(--gold);color:var(--gold);}

/* =========================================================
   ATELIER v12 — TÁI THIẾT KẾ HƯỚNG "XƯỞNG NGHỀ / TẠP CHÍ"
   Thoát khỏi "template sang" đại trà → cảm giác atelier biên tập:
   serif cho tiêu đề lớn, khoảng thở rộng, tương tác trầm tĩnh cao cấp,
   bỏ hiệu ứng lấp lánh rẻ tiền, để ẢNH CÔNG TRÌNH làm chủ đạo.
   (Module CUỐI CÙNG — đè lên mọi phiên bản trước theo thứ tự cascade)
   ========================================================= */
:root{
  --font-serif:'Playfair Display','Times New Roman',Georgia,serif;
  --paper:#faf7f2;      /* nền giấy ấm — mềm mắt, "chất" hơn trắng phẳng */
  --hairline:#e8e2d7;   /* đường kẻ mảnh sang trọng */
  --shadow:0 20px 46px rgba(38,30,24,.07);
  --shadow-lg:0 44px 96px rgba(38,30,24,.13);
}

/* ---- 1) NỀN GIẤY ẤM: thẻ trắng "nổi" trên nền kem = cảm giác biên tập ---- */
body{background:var(--paper);}

/* ---- 2) TIÊU ĐỀ LỚN = SERIF (đòn bẩy khác biệt lớn nhất) ----
   Phủ MỌI h1/h2 toàn site (kể cả trang có hero riêng) để đồng bộ. */
h1,h2,
.hero h1,.page-hero h1,.section-head h2,.cta-band h2,.contact-info h2,.split h2{
  font-family:var(--font-serif);
  font-weight:600;letter-spacing:-.005em;line-height:1.12;
}
.hero h1{font-weight:700;line-height:1.04;}
.section-head h2{letter-spacing:0;}
/* Điểm nhấn: chữ NGHIÊNG serif — rất "tạp chí", thanh lịch (bỏ gradient kim loại cũ) */
.hero h1 em{
  font-family:var(--font-serif);font-style:italic;font-weight:500;
  background:none;-webkit-text-fill-color:currentColor;color:var(--gold-bright);
}

/* ---- 3) KHOẢNG THỞ + NHỊP BIÊN TẬP ---- */
.section{padding:128px 0;}
.section-head{max-width:760px;margin-bottom:72px;}
.section-head h2{font-size:clamp(2.3rem,4.6vw,3.7rem);margin-bottom:22px;}
.section-head p{font-size:1.14rem;line-height:1.75;color:var(--ink-soft);}
/* Eyebrow tinh gọn hơn, kèm hairline dài kiểu tạp chí */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.28em;margin-bottom:22px;}
.eyebrow::before{width:46px;height:1px;}

/* ---- 4) TƯƠNG TÁC TRẦM TĨNH (bớt "nhảy", sang hơn) ---- */
.service-card,.blog-card,.price-card,.testi-card{
  border:1px solid var(--hairline);box-shadow:none;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.service-card:hover,.blog-card:hover,.price-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;
}
.testi-card:hover{box-shadow:var(--shadow);}
/* Bỏ hiệu ứng xoay icon (gimmick) — chỉ đổi màu êm */
.service-card:hover .service-icon{transform:none;}
.service-card::before{height:3px;}

/* ---- 5) ẢNH LÀ NHÂN VẬT CHÍNH: khung tinh, zoom chậm, overlay đọc rõ ---- */
.hero-frame{border-radius:20px;box-shadow:0 50px 100px rgba(20,15,12,.45);}
.split-visual{border-radius:20px;box-shadow:var(--shadow-lg);}
.project-card{border-radius:18px;box-shadow:var(--shadow);}
.project-card .img-ph,.project-card img{transition:transform .9s var(--ease);}
.project-card:hover .img-ph,.project-card:hover img{transform:scale(1.05);}
/* Caption dự án luôn đọc được, tinh tế hơn kiểu chỉ hiện khi hover */
.project-overlay{opacity:1;background:linear-gradient(to top,rgba(24,18,14,.86) 0%,rgba(24,18,14,.28) 42%,transparent 68%);}
.project-overlay .tag{letter-spacing:.18em;}
.project-overlay h3{font-family:var(--font-serif);font-weight:600;letter-spacing:0;}

/* ---- 6) Bỏ shimmer placeholder (trông rẻ). Ô ảnh trống trầm, tĩnh ---- */
.img-ph::after{display:none;}
.img-ph{background:linear-gradient(135deg,#2c2622,#201b18);}
.img-ph.light{background:linear-gradient(135deg,var(--paper),#efe8dc);}

/* ---- 7) Số thứ tự thẻ dịch vụ kiểu tạp chí (serif, to, mảnh) ---- */
.service-card::after{
  font-family:var(--font-serif);font-weight:500;font-size:2.1rem;
  color:var(--hairline);top:26px;right:32px;line-height:1;
}

/* ---- 8) Nút: bo mềm vừa phải, trầm hơn ---- */
.btn{border-radius:12px;}
.btn-primary{box-shadow:0 10px 26px rgba(193,154,107,.22);}

/* ---- 9) Đường kẻ phân tách mảnh giữa các dải tối/sáng ---- */
.trust-bar{border-top:1px solid rgba(193,154,107,.16);border-bottom:1px solid rgba(193,154,107,.1);}

/* ---- 10) Mobile: giữ thoáng, không quá cao ---- */
@media(max-width:680px){
  .section{padding:80px 0;}
  .section-head{margin-bottom:48px;}
  .service-card::after{font-size:1.7rem;top:22px;right:26px;}
}

/* =========================================================
   FIX MOBILE v13 — chống tràn ngang + LUÔN hiện nội dung/ảnh
   (64% khách dùng ĐT: ưu tiên thấy nội dung hơn hiệu ứng)
   ========================================================= */
html{overflow-x:hidden;}                 /* chặn thanh cuộn ngang do menu fixed/marquee */
.marquee{max-width:100%;}
@media(max-width:680px){
  /* Nếu observer hiệu ứng không chạy, .reveal giữ opacity:0 = mất nội dung.
     Trên mobile bỏ ẩn — nội dung & ảnh LUÔN hiện. */
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ---- 11) THẺ DỊCH VỤ CÓ ẢNH THẬT (photo-forward, kiểu tạp chí) ---- */
.service-card.has-photo{padding:0;overflow:hidden;}
.service-card.has-photo::after{display:none;}   /* bỏ số đếm cho gọn khi có ảnh */
.svc-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:#211b17;}
.svc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.service-card.has-photo:hover .svc-photo img{transform:scale(1.05);}
/* Icon = huy hiệu vàng nổi, đè lên góc dưới ảnh */
.service-card.has-photo .service-icon{
  position:absolute;left:30px;bottom:-26px;margin:0;z-index:2;
  width:56px;height:56px;border-radius:16px;background:var(--gold);color:#fff;
  box-shadow:0 12px 28px rgba(38,30,24,.22);
}
.service-card.has-photo:hover .service-icon{background:var(--gold-bright);color:var(--charcoal);}
.svc-body{padding:44px 34px 40px;}   /* chừa khoảng cho huy hiệu nổi */
.service-card.has-photo h3{font-size:1.4rem;margin-bottom:12px;}


/* ================= LUXURY v4 — chuẩn bố cục top thế giới ================= */
/* Khoảng thở rộng hơn = cảm giác cao cấp */
.section { padding: 130px 0; }
.section-head { margin-bottom: 74px; max-width: 720px; }
.section-head h2 { font-size: clamp(2.15rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.032em; margin-bottom: 20px; }
.section-head p { font-size: 1.14rem; line-height: 1.75; max-width: 620px; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.eyebrow { letter-spacing: 0.34em; margin-bottom: 22px; }
/* Motion chậm, tinh tế hơn */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); transform: translateY(22px); }
/* Ảnh card zoom mềm khi hover (đã có ở 1 số nơi, thống nhất) */
.service-card img, .project-card img, .blog-thumb img { transition: transform .6s var(--ease); }
@media (max-width: 768px){
  .section { padding: 84px 0; }
  .section-head { margin-bottom: 46px; }
  .section-head h2 { font-size: clamp(1.9rem, 6.4vw, 2.4rem); }
}


/* ===== Khối 4 RỦI RO — dải tối editorial (luxury) ===== */
.risk-lux{background:linear-gradient(160deg,#1e1a16 0%,#2a2420 100%);color:var(--cream);}
.risk-lux .section-head h2{color:var(--cream);}
.risk-lux .section-head p{color:rgba(246,241,234,.72);}
.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(193,154,107,.30);max-width:1120px;margin:0 auto;}
.risk-item{padding:40px 30px 34px;border-right:1px solid rgba(193,154,107,.16);position:relative;transition:background .3s var(--ease);}
.risk-item:last-child{border-right:none;}
.risk-item:hover{background:rgba(193,154,107,.06);}
.risk-no{font-family:var(--font-serif);font-size:2.7rem;font-weight:600;color:var(--gold);line-height:1;display:block;margin-bottom:22px;}
.risk-item h3{color:var(--cream);font-family:var(--font-serif);font-weight:600;font-size:1.24rem;line-height:1.28;letter-spacing:0;margin-bottom:12px;}
.risk-item p{color:rgba(246,241,234,.66);font-size:.98rem;line-height:1.66;}
@media(max-width:900px){.risk-grid{grid-template-columns:1fr 1fr;}.risk-item:nth-child(2n){border-right:none;}.risk-item:nth-child(-n+2){border-bottom:1px solid rgba(193,154,107,.16);}}
@media(max-width:560px){.risk-grid{grid-template-columns:1fr;}.risk-item{border-right:none;border-bottom:1px solid rgba(193,154,107,.16);padding:28px 6px;}.risk-no{font-size:2.2rem;margin-bottom:14px;}}


/* ===== Khối SẢN PHẨM → gallery tinh hơn (bỏ hộp, ảnh lớn, caption serif) ===== */
.prod-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px;}
.prod-card{background:transparent;border:none;border-radius:0;box-shadow:none;}
.prod-card:hover{transform:translateY(-4px);box-shadow:none;border-color:transparent;}
.prod-card .pc-photo{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.prod-card:hover .pc-photo{box-shadow:var(--shadow-lg);}
.prod-card .pc-body{padding:16px 4px 0;text-align:left;}
.prod-card h4{font-family:var(--font-serif);font-weight:600;font-size:1.14rem;margin-bottom:4px;}
.prod-card span{font-size:.9rem;}

/* ---------- Lien ket noi bo (fallback cho template ko co san CSS nay) ---------- */
.article-related{margin:40px 0 8px;padding:22px 26px;background:var(--cream-dark);border-radius:16px;}
.article-related h2{font-size:1.35rem;margin:0 0 12px;}
.article-related ul{margin:0 0 0 18px;display:grid;gap:10px;}
.article-related a{color:var(--espresso);font-weight:600;}
.inbody-link{margin:14px 0;padding:10px 16px;background:var(--cream-dark);border-left:3px solid var(--espresso);border-radius:8px;font-size:.98rem;}
.inbody-link a{color:var(--espresso);font-weight:600;}

/* ---------- CTA gon giua bai (khac article-cta cuoi bai) ---------- */
.article-cta-mid{background:var(--cream-dark);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:20px 22px;margin:34px 0;text-align:center;}
.article-cta-mid p{margin:0 0 14px;font-size:1.02rem;color:var(--ink);}
.cta-mid-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@media (max-width:480px){.article-cta-mid{padding:16px;}.cta-mid-btns{flex-direction:column;}.cta-mid-btns .btn{width:100%;justify-content:center;}}