@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

:root{--red:#a51f22;--dark:#241710;--cream:#f5efe3;--paper:#fffaf2;--gold:#d9a64b;--muted:#73665b;--line:rgba(36,23,16,.16);--serif:'Be Vietnam Pro',Arial,sans-serif;--sans:'Be Vietnam Pro',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--dark);font-family:var(--sans);font-size:16px;line-height:1.6}img{display:block;width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.skip-link{position:fixed;left:1rem;top:-100px;z-index:100;background:white;padding:.7rem 1rem}.skip-link:focus{top:1rem}.site-header{height:88px;position:absolute;z-index:20;top:0;left:0;width:100%;display:flex;align-items:center;padding:0 clamp(1.25rem,4vw,4rem);color:white;border-bottom:1px solid rgba(255,255,255,.28)}.brand{width:152px;height:64px;display:grid;place-items:center;background:#fff;border-radius:0 0 16px 16px;padding:8px 14px;align-self:flex-start}.brand img{max-height:50px;object-fit:contain}.site-header nav{display:flex;gap:2.2rem;margin-left:auto;margin-right:2.2rem}.site-header nav a{font-size:.85rem;letter-spacing:.04em}.site-header nav a:hover{color:#ffd9ac}.header-cta{border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:.65rem 1rem;font-size:.8rem}.menu-toggle{display:none;background:none;border:0;color:white}.hero{position:relative;min-height:820px;height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}.hero-image{position:absolute;inset:0;background:url('assets/cua-hang-dem.jpg') center/cover no-repeat;animation:heroZoom 15s ease-out both}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,12,6,.8) 0%,rgba(26,12,6,.42) 51%,rgba(26,12,6,.14) 100%),linear-gradient(0deg,rgba(18,8,3,.62),transparent 55%)}@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1)}}.hero-content{position:relative;z-index:2;width:min(800px,90%);padding:0 0 clamp(4rem,9vh,7rem) clamp(1.25rem,7vw,7.5rem)}.eyebrow,.section-kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600}.eyebrow.light{color:#f5d7b5}.hero h1,.display{font-family:var(--serif);font-weight:400;line-height:.92;letter-spacing:-.03em}.hero h1{font-size:clamp(4.2rem,8.5vw,8.5rem);margin:.8rem 0 1.5rem}.hero h1 em,.display em,.contact h2 em{font-weight:400;color:#f2b8a6}.hero-copy{max-width:650px;font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.88)}.hero-actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem;padding:.9rem 1.35rem;border-radius:999px;font-weight:600;font-size:.85rem;transition:.25s ease;border:1px solid transparent}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--red);color:white}.btn-primary:hover{background:#c12a2d}.btn-ghost{border-color:rgba(255,255,255,.6);color:white}.btn-ghost:hover{background:white;color:var(--dark)}.hero-note{position:absolute;right:clamp(1.5rem,5vw,5rem);bottom:3rem;z-index:2;border-left:1px solid rgba(255,255,255,.5);padding-left:1rem;display:flex;flex-direction:column}.hero-note span{font-size:.67rem;text-transform:uppercase;letter-spacing:.15em}.hero-note strong{font-family:var(--serif);font-size:1.6rem;font-weight:400}.section-pad{padding:clamp(5rem,9vw,9rem) clamp(1.25rem,7vw,7.5rem)}.section-kicker{display:flex;align-items:center;gap:1rem;margin-bottom:3rem}.section-kicker span{display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%}.section-kicker p{margin:0}.intro-grid,.section-heading,.process-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(3rem,9vw,9rem);align-items:end}.display{font-size:clamp(3.3rem,6vw,6rem);margin:0}.display em{color:var(--red)}.intro-copy{max-width:540px;color:var(--muted)}.intro-copy>p{font-size:1.05rem}.text-link{display:inline-flex;align-items:center;gap:1rem;margin-top:1rem;font-weight:600;border-bottom:1px solid var(--dark);padding-bottom:.2rem}.text-link span{transition:transform .2s}.text-link:hover span{transform:translateX(4px)}.feature-photo{position:relative;margin-top:5rem;height:min(65vw,700px);overflow:hidden;border-radius:2px}.feature-photo img{height:100%;object-fit:cover}.photo-caption{position:absolute;right:0;bottom:0;background:var(--paper);padding:1.4rem 2rem;min-width:250px}.photo-caption span{font-size:.7rem;color:var(--red)}.photo-caption p{margin:.4rem 0 0;font-family:var(--serif);font-size:1.25rem;line-height:1.2}.products{background:var(--cream)}.section-heading{margin-bottom:4rem}.section-heading>p{max-width:480px;color:var(--muted)}.product-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem}.product-card{position:relative;background:white;overflow:hidden;min-height:470px}.product-card--large{grid-row:span 2;min-height:960px}.product-card--wide{grid-column:1/-1;min-height:520px}.product-card img{height:100%;position:absolute;object-fit:cover;transition:transform .7s}.product-card:hover img{transform:scale(1.035)}.product-card:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(20,8,4,.8))}.product-info{position:absolute;z-index:2;bottom:0;padding:2rem;color:white;display:flex;gap:1.5rem;align-items:flex-start}.product-info>span{font-size:.7rem;border:1px solid rgba(255,255,255,.7);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;flex:none}.product-info h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:0}.product-info p{margin:.25rem 0 0;color:rgba(255,255,255,.8)}.services{background:var(--red);color:white;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(4rem,9vw,10rem)}.section-kicker--light{color:#f3c7ae}.services-copy>p{color:rgba(255,255,255,.75);max-width:480px}.btn-cream{background:var(--cream);color:var(--red);margin-top:1.5rem}.service-list{border-top:1px solid rgba(255,255,255,.25)}.service-item{display:grid;grid-template-columns:42px 1fr 30px;gap:1.3rem;padding:2rem 0;border-bottom:1px solid rgba(255,255,255,.25)}.service-num{font-size:.7rem;opacity:.65}.service-item h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:0}.service-item p{margin:.3rem 0 0;max-width:550px;color:rgba(255,255,255,.7)}.service-arrow{font-size:1.4rem;transition:transform .25s}.service-item:hover .service-arrow{transform:translate(4px,-4px)}.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.steps li{display:grid;grid-template-columns:42px 1fr;gap:1.2rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}.steps li>span{color:var(--red);font-family:var(--serif);font-size:1.5rem}.steps h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.7rem}.steps p{margin:.35rem 0 0;color:var(--muted)}.gallery{background:#ede3d3}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.gallery-head .section-kicker{margin-bottom:1.4rem}.filters{display:flex;gap:.5rem;flex-wrap:wrap}.filters button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.55rem .9rem;cursor:pointer;font-size:.78rem}.filters button.active,.filters button:hover{background:var(--dark);color:white}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:310px;gap:1rem}.gallery-item{margin:0;position:relative;overflow:hidden;background:#ddd}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}.gallery-item img{height:100%;object-fit:cover;transition:transform .6s}.gallery-item:hover img{transform:scale(1.04)}.gallery-item figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(255,250,242,.9);padding:.35rem .7rem;font-size:.75rem}.gallery-item.hidden{display:none}.contact{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--dark);color:white}.contact-image img{height:100%;object-fit:cover}.contact-panel{padding:clamp(4rem,8vw,8rem);display:flex;flex-direction:column;justify-content:center}.contact-panel h2{font-family:var(--serif);font-size:clamp(3.3rem,5.5vw,6rem);font-weight:400;line-height:.95;margin:1rem 0 3rem}.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:1px solid rgba(255,255,255,.2);padding-top:2rem}.contact-details span{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#e5b494}.contact-details p{margin:.5rem 0;font-size:1.05rem}.contact-actions{display:flex;align-items:center;gap:2rem;margin-top:2.5rem}.contact-actions .text-link{border-color:white}.contact h2 em{font-weight:400}footer{background:#190f0b;color:white;padding:3rem clamp(1.25rem,7vw,7.5rem);display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:2rem;border-top:1px solid rgba(255,255,255,.12)}footer img{background:white;border-radius:12px;padding:.4rem}footer p{font-family:var(--serif);font-size:1.4rem}footer div{display:flex;gap:1.5rem;font-size:.8rem}footer small{grid-column:1/-1;color:rgba(255,255,255,.45)}.mobile-actions{display:none}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:900px){.site-header{height:72px}.brand{width:125px;height:55px}.header-cta{display:none}.menu-toggle{display:flex;margin-left:auto;width:42px;height:42px;flex-direction:column;gap:7px;justify-content:center;align-items:center;z-index:2}.menu-toggle span{height:1px;width:24px;background:currentColor;transition:.25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.site-header nav{position:fixed;inset:0;background:var(--dark);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.7rem;margin:0;opacity:0;pointer-events:none;transition:.25s}.site-header nav.open{opacity:1;pointer-events:auto}.site-header nav a{font-family:var(--serif);font-size:2.3rem}.hero{min-height:720px}.hero-content{padding-left:1.25rem}.hero-note{display:none}.intro-grid,.section-heading,.process-grid,.services{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr 1fr}.product-card--large{grid-row:auto;grid-column:1/-1;min-height:600px}.product-card--wide{min-height:430px}.services{gap:4rem}.gallery-head{align-items:flex-start;flex-direction:column}.gallery-grid{grid-template-columns:repeat(2,1fr)}.contact{grid-template-columns:1fr}.contact-image{height:520px}footer{grid-template-columns:150px 1fr}footer div{grid-column:1/-1}.mobile-actions{position:fixed;z-index:15;bottom:0;left:0;width:100%;height:58px;background:white;box-shadow:0 -4px 20px rgba(0,0,0,.14);display:grid;grid-template-columns:1fr 1fr}.mobile-actions a{display:grid;place-items:center;font-weight:600;font-size:.85rem}.mobile-actions a:last-child{background:var(--red);color:white}body{padding-bottom:58px}}
@media (max-width:600px){.hero h1{font-size:3.9rem}.hero-copy{font-size:.95rem}.hero-actions .btn{width:100%}.section-pad{padding-top:4.5rem;padding-bottom:4.5rem}.display{font-size:3.35rem}.feature-photo{height:620px;margin-top:3rem}.photo-caption{left:0;right:auto}.product-grid{display:block}.product-card,.product-card--large,.product-card--wide{min-height:500px;margin-bottom:1rem}.product-info{padding:1.4rem}.product-info h3{font-size:1.7rem}.service-item{grid-template-columns:28px 1fr}.service-arrow{display:none}.gallery-grid{display:block}.gallery-item{height:430px;margin-bottom:1rem}.gallery-item.wide,.gallery-item.tall{height:430px}.contact-image{height:390px}.contact-details{grid-template-columns:1fr}.contact-actions{align-items:flex-start;flex-direction:column}.contact-panel{padding:4rem 1.25rem}footer{grid-template-columns:1fr}footer img{width:150px}footer p,footer div{grid-column:1}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.hero-image{animation:none}.product-card img,.gallery-item img{transition:none}}

/* Hệ chữ Việt linh hoạt, cân dòng và giữ trọn nhận diện thương hiệu */
body{font-family:var(--sans);font-size:clamp(15px,.22vw + 14.2px,17px);line-height:1.7;letter-spacing:-.006em;-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none;user-drag:none}
p,li{orphans:3;widows:3;text-wrap:pretty}
h1,h2,h3,.display{text-wrap:balance;overflow-wrap:normal;word-break:normal}
.brand{position:relative;width:clamp(142px,11vw,170px);height:70px;padding:0;overflow:hidden}
.brand img{position:absolute;inset:8px 14px;width:calc(100% - 28px);height:calc(100% - 16px);max-height:none;object-fit:contain;object-position:center}
footer img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
.site-header nav{gap:clamp(1.3rem,2.4vw,2.6rem)}
.site-header nav a{font-size:clamp(.76rem,.2vw + .72rem,.88rem);letter-spacing:.015em;white-space:nowrap}
.header-cta{white-space:nowrap;flex:0 0 auto}
.hero{min-height:760px}
.hero-image{background-position:18% center;animation-name:heroZoomVietnamese}
@keyframes heroZoomVietnamese{from{transform:scale(1.025)}to{transform:scale(1)}}
.hero-content{width:min(880px,92%);padding-bottom:clamp(3.5rem,8vh,6.5rem)}
.eyebrow,.section-kicker{font-size:clamp(.67rem,.12vw + .64rem,.76rem);letter-spacing:.12em;font-weight:700}
.hero h1,.display{font-weight:600;line-height:1.08;letter-spacing:-.045em}
.hero h1{font-size:clamp(3rem,6.8vw,7rem);max-width:12ch}
.display{font-size:clamp(2.7rem,5.2vw,5.4rem);max-width:17ch}
.hero h1 em,.display em,.contact h2 em{font-weight:500}
.hero-copy{max-width:68ch;font-size:clamp(.98rem,.55vw + .82rem,1.18rem);line-height:1.75}
.hero-note span{letter-spacing:.1em}.hero-note strong{font-weight:600;font-size:1.5rem}
.product-info h3,.service-item h3,.steps h3,.photo-caption p,footer p{font-weight:600;letter-spacing:-.025em;line-height:1.3}
.contact-panel h2{font-weight:600;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.contact-image img{object-position:24% center}
footer img{width:180px;max-width:100%;aspect-ratio:2.7/1;background:white;padding:.55rem .8rem}

/* Logo chìm bảo vệ hình ảnh thương hiệu */
.feature-photo,.product-card,.gallery-item,.contact-image{position:relative}
.feature-photo::before,.product-card::before,.gallery-item::before,.contact-image::before{content:"";position:absolute;z-index:3;inset:0;background:url('assets/logo-lam-nguyen-wide.png') center/28% auto no-repeat;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.product-card::before{z-index:2;opacity:.14}.gallery-item::before{opacity:.17}.contact-image::before{background-size:32% auto;opacity:.13}
.photo-caption,.gallery-item figcaption{z-index:4}
.copy-notice{position:fixed;z-index:9999;left:50%;bottom:78px;transform:translate(-50%,18px);padding:.72rem 1rem;border-radius:999px;background:rgba(36,23,16,.94);color:#fff;font-size:.78rem;box-shadow:0 12px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.22s ease;white-space:nowrap}
.copy-notice.show{opacity:1;transform:translate(-50%,0)}
.faq{background:var(--paper)}.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);gap:clamp(3rem,8vw,8rem);align-items:start}.faq-intro>p{max-width:520px;color:var(--muted)}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:1.4rem 0}.faq-list summary{cursor:pointer;list-style:none;font-size:1.15rem;font-weight:700;display:flex;justify-content:space-between;gap:1rem}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';color:var(--red);font-size:1.5rem;font-weight:400;line-height:1}.faq-list details[open] summary::after{content:'−'}.faq-list p{margin:.9rem 2.5rem 0 0;color:var(--muted);max-width:68ch}.faq-list a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .brand{width:clamp(122px,34vw,148px);height:60px;padding:0}
  .brand img{inset:7px 12px;width:calc(100% - 24px);height:calc(100% - 14px)}
  .site-header nav a{font-family:var(--sans);font-size:clamp(1.65rem,6vw,2.15rem);font-weight:600;letter-spacing:-.025em}
}
@media (max-width:600px){
  .hero{min-height:700px}
  .hero-image{background-position:14% center}
  .hero-content{width:100%;padding-right:1.25rem}
  .hero h1{font-size:clamp(2.65rem,12vw,3.65rem);max-width:11ch;line-height:1.1}
  .hero-copy{font-size:clamp(.92rem,3.7vw,1rem);line-height:1.7}
  .display{font-size:clamp(2.35rem,10.5vw,3.3rem);line-height:1.15}
  .contact-panel h2{font-size:clamp(2.35rem,10.5vw,3.3rem);line-height:1.15}
  .contact-image img{object-position:22% center}
  footer img{width:160px;height:auto}
  .faq-layout{grid-template-columns:1fr}.faq-list summary{font-size:1rem}
}
