/* Trang chủ */

/* ---------- Ảnh kiểu polaroid ---------- */
.polaroid{position:relative;margin:0;background:#fff;padding:12px 12px 14px;border-radius:4px;box-shadow:0 30px 50px -28px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.1)}
.polaroid img{width:100%;object-fit:cover;background:var(--stone)}
.polaroid figcaption{padding:12px 6px 2px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:15px;line-height:1.35}
.tape{position:absolute;width:min(110px,42%);height:28px;background:rgba(212,178,130,.6);top:-12px;left:50%;transform:translateX(-50%) rotate(3deg);z-index:1}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--charcoal);color:var(--cream);overflow:hidden;padding:150px 0 96px}
.hero::before{content:"";position:absolute;right:-12%;top:-30%;width:780px;height:780px;background:radial-gradient(circle,rgba(212,178,130,.26) 0%,rgba(212,178,130,0) 64%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(46px,7.4vw,88px);line-height:1.02;margin:0 0 28px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold)}
.hero .lead{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.55;color:#EDE6DA;max-width:560px;margin:0 0 34px}
.hero .polaroid{transform:rotate(3deg);max-width:420px;margin-left:auto}
.hero .polaroid img{aspect-ratio:4/5}
.js .hero .polaroid.rv.in{transform:rotate(3deg)}

/* ---------- SECTIONS ---------- */
section{padding:88px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sec-head .more-link{flex:none;margin-bottom:40px}

/* ---------- TUYỂN DỤNG ---------- */
.careers{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:48px}
.careers .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.careers .chip{font-size:13.5px;padding:7px 13px;border-radius:999px;background:var(--cream);border:1px solid var(--line);font-weight:500}
.stack{position:relative;height:380px}
.stack .polaroid{position:absolute;width:58%}
.stack .polaroid img{aspect-ratio:4/5}
.stack .p1{left:2%;top:18px;transform:rotate(-6deg)}
.stack .p2{right:2%;top:0;transform:rotate(5deg)}

/* ---------- CƠ SỞ ---------- */
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.place{position:relative;border-radius:22px;padding:28px 26px 26px;overflow:hidden;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:230px}
.place::before{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:var(--tint)}
.place:nth-child(3n+1){--tint:var(--tint-gold)} .place:nth-child(3n+2){--tint:var(--tint-moss)} .place:nth-child(3n){--tint:var(--tint-terra)}
.place > *{position:relative}
.place .num{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--gold)}
.place h3{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.25;margin:8px 0 0}
.place p{margin:0;color:var(--ink-soft)}
.place a.map{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--terracotta);text-decoration:none}
.place a.map:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:8px 6px}
.gallery .polaroid img{aspect-ratio:1}
.gallery .polaroid:nth-child(odd){transform:rotate(-2.5deg)}
.gallery .polaroid:nth-child(even){transform:rotate(2deg) translateY(14px)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .hero{padding:130px 0 72px}
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero .polaroid{margin:0 auto;max-width:340px}
  .careers{grid-template-columns:1fr;padding:34px 26px}
  .stack{height:320px;max-width:440px;width:100%;margin:0 auto}
  .place{min-height:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .hero{padding-top:112px}
  .hero .lead{font-size:18.5px}
  section{padding-top:68px}
  .sec-head{display:block}
  .sec-head .more-link{margin:-20px 0 24px}
  .stack{height:270px}
  .polaroid figcaption{font-size:13.5px;padding-top:9px}
}