/* Lecons — lớp giao diện "điện ảnh" cho trang chủ (19/10/2026). Nạp SAU site.css. Chỉ đổi hình thức; nội dung/số liệu vẫn là thật.
   Ý tưởng tham chiếu từ thư viện bố cục Layers (Agency/Studio, Portfolio, Process/Roadmap) nhưng viết lại bằng CSS thuần: không WebGL,
   không thêm thư viện → tải nhanh, không ảnh hưởng SEO/điểm tốc độ. Màu lấy từ --primary/--accent (Quản trị). */
:root{--serif:"Playfair Display","Be Vietnam Pro",Georgia,serif;--sand:#f6f2ec;--sand-2:#ece5d9;--gold:#d9b877;--ink-deep:#07131f}
body{background:var(--sand)}
h1,h2{font-family:var(--serif);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;letter-spacing:-.02em}
h1{font-weight:700}h2{font-weight:700}
.section--alt{background:var(--sand-2)}.section{padding:100px 0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:.22em;font-size:.7rem}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.12}

/* ---------- Thanh điều hướng kính mờ ---------- */
.nav{background:rgba(250,247,242,.82);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(7,19,31,.08)}
.brand__mark,.btn{box-shadow:0 8px 22px rgba(7,19,31,.18)}
.btn{letter-spacing:.01em}
.btn--accent{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent) 70%);color:#fff}
.btn--ghost{backdrop-filter:blur(8px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}

/* ---------- Hero ---------- */
.hero2{background:var(--ink-deep)}
.hero2__slide{transform:scale(1.14);transition:opacity 1.6s ease}
.hero2__slide.is-on{transform:scale(1);animation:lux-kb 16s ease-out forwards}
@keyframes lux-kb{from{transform:scale(1.14) translate3d(1.2%,0,0)}to{transform:scale(1.02) translate3d(-.6%,0,0)}}
.hero2__slide::after{background:linear-gradient(100deg,rgba(7,19,31,.95) 0%,rgba(7,19,31,.72) 42%,rgba(7,19,31,.22) 100%),linear-gradient(0deg,rgba(7,19,31,.78),transparent 38%),radial-gradient(900px 480px at 90% 8%,rgba(217,184,119,.2),transparent 62%)}
.hero2 h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.04;text-wrap:balance}
.hero2 h1 em{font-style:italic;font-weight:600;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.hero2 .eyebrow{color:var(--gold)}
.hero2__copy p{line-height:1.75}
.hero2__glass{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;z-index:3;width:min(1200px,100% - 32px);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero2__glass>div{padding:16px 22px;background:rgba(7,19,31,.38);display:grid;gap:2px;min-width:0}
.hero2__glass small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.hero2__glass b{font-size:.95rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero2__glass a{color:#fff;text-decoration:none}
.hero2__dots{bottom:30px}.hero2__scroll{display:none}

/* ---------- Lĩnh vực ---------- */
.field{border-radius:24px;border:1px solid rgba(7,19,31,.08);background:linear-gradient(180deg,#fff,#fbf9f5);box-shadow:0 1px 2px rgba(7,19,31,.05),0 14px 40px rgba(7,19,31,.07)}
.field h3{font-family:var(--serif);font-size:1.35rem}
.field__no{font-family:var(--serif)!important;color:rgba(7,19,31,.06)!important}
.field:hover{background:linear-gradient(160deg,#10304f,var(--ink-deep));box-shadow:0 30px 70px rgba(7,19,31,.32)}

/* ---------- Dự án tiêu biểu (showcase) ---------- */
.section--dark{background:radial-gradient(900px 400px at 85% 0,rgba(217,184,119,.12),transparent 60%),linear-gradient(180deg,#0b1d31,var(--ink-deep))}
.section--dark h2{color:#fff}
.chips button{border-radius:999px;backdrop-filter:blur(6px);background:rgba(255,255,255,.05);letter-spacing:.02em}
.chips button.is-on{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));color:#fff;border-color:transparent}
.mosaic{gap:16px;grid-auto-rows:250px;counter-reset:p}
.tile{border-radius:22px;counter-increment:p;box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);isolation:isolate}
.tile::before{content:counter(p,decimal-leading-zero);position:absolute;left:18px;top:14px;z-index:3;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:rgba(255,255,255,.85);text-shadow:0 2px 12px rgba(0,0,0,.5);font-variant-numeric:lining-nums}
.tile img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s}
.tile:hover img{transform:scale(1.09);filter:saturate(1.08)}
.tile__ov{padding:24px;background:linear-gradient(0deg,rgba(7,19,31,.94) 0%,rgba(7,19,31,.55) 55%,transparent);transform:translateY(8px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile__ov{transform:none}
.tile__ov small{color:var(--gold);letter-spacing:.12em}
.tile__ov b{font-family:var(--serif);font-weight:600;line-height:1.2}
.tile--big .tile__ov b{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.tile__ov em{transition:max-height .5s}

/* ---------- Vì sao chọn ---------- */
.why__grid{border:0;gap:18px}
.why__item{border:1px solid rgba(7,19,31,.08);border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(7,19,31,.04),0 12px 34px rgba(7,19,31,.06);padding:32px}
.why__item:hover{background:#fff;transform:translateY(-4px);box-shadow:0 24px 54px rgba(7,19,31,.12)}
.why__item span{font-family:var(--serif);font-size:3rem;font-weight:600;font-variant-numeric:lining-nums;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Quy trình: lộ trình có đường vẽ dần ---------- */
.timeline::before{top:27px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--gold));transform-origin:left;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.timeline.is-drawn::before{transform:scaleX(1)}
.timeline li::before{font-family:var(--serif);font-weight:600;font-size:1.3rem;background:var(--ink-deep);color:var(--gold);box-shadow:0 0 0 6px var(--sand-2),0 0 0 7px rgba(217,184,119,.55),0 14px 30px rgba(7,19,31,.25)}
.timeline li{transition:opacity .8s ease,transform .8s ease}
.timeline b{font-family:var(--serif);font-size:1.08rem}
.timeline.is-drawn li::before{animation:lux-pop .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0)*.28s)}
@keyframes lux-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- Báo giá / chân trang ---------- */
.section--quote{background:radial-gradient(800px 360px at 0 0,rgba(217,184,119,.2),transparent 60%),var(--sand)}
.quote__panel{border-radius:28px;background:radial-gradient(500px 240px at 100% 0,rgba(217,184,119,.18),transparent 60%),linear-gradient(160deg,#10304f,var(--ink-deep));box-shadow:0 30px 70px rgba(7,19,31,.3)}
.quote__panel h2{font-family:var(--serif)}
.qform,.quote form{border-radius:28px}

/* ---------- Điện thoại / iPad ---------- */
@media(max-width:1024px){
  .section{padding:72px 0}
  .hero2__glass{grid-template-columns:1fr;bottom:56px}
  .hero2__glass>div:nth-child(n+2){display:none}
  .timeline.is-drawn::before{display:none}
}
@media(max-width:640px){
  .section{padding:56px 0}
  .hero2{padding:104px 0 150px}
  .hero2 h1{font-size:clamp(2rem,9vw,2.6rem)}
  .tile{border-radius:18px}.mosaic{grid-auto-rows:210px}
  .field,.why__item{border-radius:20px}
  .hero2__glass{border-radius:16px;bottom:50px}
}
@media(prefers-reduced-motion:reduce){.hero2__slide.is-on{animation:none}.timeline::before{transform:none}.timeline.is-drawn li::before{animation:none}}

@media(max-width:640px){.hero2__btns{gap:10px}.hero2__btns .btn{flex:1 1 0;padding:13px 14px;font-size:.95rem;text-align:center;white-space:nowrap}}