/* Trang câu chuyện thương hiệu. Header, menu, chân trang, màu và .pill-link lấy từ catalog.css. */
/* Nền: kem sáng làm gốc; xanh trời nhạt và hồng anh đào nhạt làm dải xen kẽ. Không dùng --emi-cream-soft của catalog.css (#f1ebd8, ngả kaki). */
:root {
  --emi-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}
#story-page{
  --st-base:var(--emi-cream-light);
  background:
    radial-gradient(48% 620px at 92% 0,rgba(242,198,207,.38),transparent 70%),
    radial-gradient(52% 640px at 0 8%,rgba(207,226,239,.6),transparent 70%),
    var(--st-base);
  color:var(--emi-navy);font-size:16px;line-height:1.75}
/* Một mép trái chung cho cả trang: rộng tối đa 1280px, cách mép màn hình tối thiểu 6% */
.st-wrap,.st-hero{width:min(1280px,88%);margin-inline:auto}
.st-wrap.st-narrow{width:min(820px,88%);margin-left:max(6%,calc((100% - 1280px)/2));margin-right:auto}
.st-kicker{display:inline-block;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;font-weight:600;color:var(--emi-sky-dark);margin-bottom:10px}
.st-h2{font:400 clamp(32px,4vw,52px)/1.15 var(--emi-serif);letter-spacing:-1px;color:var(--emi-navy);margin:8px 0 22px}
.st-h2 em,#st-title em{font-style:italic;font-weight:400;color:var(--emi-sky-dark)}
.st-body{margin:0 0 16px;max-width:56ch;color:var(--emi-navy-soft)}
.st-strong{color:var(--emi-navy);font-weight:500}
.st-note{margin:20px 0 0;font-size:14px;color:var(--emi-navy-soft);letter-spacing:.3px}
.st-lead{font-size:18px;line-height:1.75;max-width:46ch;color:var(--emi-navy-soft);margin:0}
#st-title,.st-h2,.st-quote,.st-intro,.st-lead,.st-list h3{text-wrap:balance}
.st-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--emi-navy);border-bottom:1px solid var(--emi-sky-dark);align-self:flex-start}
.st-link:hover{color:var(--emi-sky-dark)}
.st-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.st-reveal.is-visible{opacity:1;transform:none}

/* Hình / video: khung dùng chung, bo 24px */
.st-media{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(31,53,87,.45);background:var(--emi-sky-soft)}
.st-media img{display:block;width:100%;height:100%;object-fit:cover}
.st-pending{display:grid;place-items:center;background:linear-gradient(145deg,var(--emi-sakura-soft),var(--emi-sky-soft));border:1px dashed var(--emi-border)}
.st-pending-label{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:var(--emi-sky-dark);padding:8px 16px;border-radius:999px;background:rgba(255,253,248,.7)}
.st-tall{aspect-ratio:4/5}
.st-wide{aspect-ratio:16/10}

/* 1. Mở đầu: chữ trái, ảnh phải */
.st-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:130px 0 80px}
.st-hero .breadcrumbs{font-size:13px}
#st-title{font:400 clamp(40px,5vw,72px)/1.08 var(--emi-serif);letter-spacing:-2px;color:var(--emi-navy);margin:14px 0 22px}
.st-hero-media{aspect-ratio:4/3.4}

/* 2. Câu hỏi */
.st-question{padding:90px 0 100px}
.st-intro{font-size:18px;line-height:1.8;color:var(--emi-navy-soft);margin:6px 0 28px}
.st-quote{margin:0 0 28px;padding:0 0 0 28px;border-left:3px solid var(--emi-sky-dark);font:italic 400 clamp(26px,3vw,38px)/1.35 var(--emi-serif);color:var(--emi-navy)}

/* 3–4. Chữ + hình */
.st-split{padding:100px 0}
.st-split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:72px;align-items:center}
.st-split-flip .st-split-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.st-tint{background:linear-gradient(180deg,rgba(207,226,239,.55) 0,rgba(207,226,239,.28) 100%)}

/* 5. CÓ / KHÔNG */
.st-promise{padding:100px 0}
.st-head{margin-bottom:36px}
.st-lists{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px}
.st-list h3{font:400 24px/1.3 var(--emi-serif);margin:0 0 6px;color:var(--emi-navy)}
.st-list ul{list-style:none;margin:0;padding:0}
.st-list li{padding:16px 0;border-top:1px solid var(--emi-border);color:var(--emi-navy-soft)}
.st-list-no li{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.st-list-no li span{font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--emi-sky-dark);white-space:nowrap}
.st-foot{margin:28px 0 0;font-size:14px;color:var(--emi-navy-soft)}
.st-foot a{border-bottom:1px solid var(--emi-sky-dark)}

/* 6. Sáu góc nhà: danh sách hàng, không dàn thẻ đều */
.st-rooms{padding:100px 0;background:
  radial-gradient(46% 70% at 100% 100%,rgba(207,226,239,.5),transparent 70%),
  linear-gradient(180deg,rgba(250,232,236,0) 0,rgba(250,232,236,.5) 22%,rgba(250,232,236,.38) 78%,rgba(250,232,236,0) 100%)}
.st-room-list{list-style:none;margin:0;padding:0}
.st-room-list a{display:grid;grid-template-columns:72px 150px minmax(0,1.2fr) minmax(0,1.3fr) 32px;gap:24px;align-items:center;padding:18px 0;border-top:1px solid var(--emi-border);transition:padding .3s cubic-bezier(.2,.7,.2,1)}
.st-room-list li:last-child a{border-bottom:1px solid var(--emi-border)}
.st-room-list a:hover{padding-left:12px}
.st-room-list img{height:76px;width:72px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(31,53,87,.18))}
.st-room-name{font:400 22px/1.3 var(--emi-serif);color:var(--emi-navy)}
.st-room-prod{font-weight:600;color:var(--emi-navy);font-size:15px}
.st-room-slogan{font-size:15px;color:var(--emi-navy-soft)}
.st-room-go{font-size:20px;color:var(--emi-sky-dark)}

/* 7. Dòng sông: ảnh tràn, thẻ kính trái */
.st-river{position:relative;min-height:640px;display:flex;align-items:center;padding:80px 6% 80px max(6%,calc((100% - 1280px)/2));overflow:hidden}
.st-river-media{position:absolute;inset:0;border-radius:0;box-shadow:none}
.st-river-card{position:relative;z-index:1;max-width:520px;padding:36px 38px;border-radius:24px;background:rgba(255,253,248,.7);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 24px 60px -28px rgba(31,53,87,.45);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:2px}
.st-river-card .st-h2{margin-bottom:16px}

/* 8. Sứ mệnh */
.st-mission{padding:110px 0 120px;background:linear-gradient(180deg,var(--st-base) 0,rgba(207,226,239,.5) 100%)}
.st-mission-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:start}
.st-cta{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:30px}
/* một nút nhấn mỗi màn */
.st-cta .pill-link{background:var(--emi-accent);border-color:transparent;border-radius:999px;color:var(--emi-cream);font-weight:600;box-shadow:0 6px 20px rgba(31,53,87,0.22)}
.st-cta .pill-link:hover{background:var(--emi-accent-hover);color:var(--emi-cream);box-shadow:0 8px 24px rgba(31,53,87,0.3)}

@media(max-width:900px){
  .st-wrap,.st-hero,.st-wrap.st-narrow{width:calc(100% - 40px);margin-inline:20px}
  .st-hero,.st-split-grid,.st-split-flip .st-split-grid,.st-lists,.st-mission-grid{grid-template-columns:1fr;gap:36px}
  .st-hero{padding:110px 0 56px}
  .st-hero-media{aspect-ratio:16/10}
  .st-split,.st-promise,.st-rooms,.st-mission{padding:44px 0}
  .st-question{padding:40px 0 44px}
  .st-split-flip .st-media{order:2}
  .st-room-list a{grid-template-columns:56px minmax(0,1fr) 28px;gap:6px 16px;padding:16px 0}
  .st-room-list img{grid-row:1/4;height:64px;width:56px}
  .st-room-name,.st-room-prod,.st-room-slogan{grid-column:2}
  .st-room-go{grid-column:3;grid-row:1}
  .st-river{min-height:0;padding:56px 20px}
  .st-river-card{padding:32px 24px}
}
@media(max-width:760px){
  .st-mission-grid{gap:16px}
  .st-mission .st-head{margin-bottom:0}
  .st-mission .st-head .st-h2{margin-bottom:0}
  .st-foot a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
}
@media(prefers-reduced-motion:reduce){
  .st-reveal{transition:none;opacity:1;transform:none}
  .st-room-list a{transition:none}
}