/* Trang tạm "Sắp ra mắt". Màu, phông theo design/he-thong-thiet-ke/tokens.json; bố cục theo W01 (docs/thiet-ke-web/). */
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/phong/noto-sans-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/phong/noto-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/phong/noto-sans-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/phong/noto-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/phong/noto-sans-vietnamese-700-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/phong/noto-sans-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/phong/noto-serif-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/phong/noto-serif-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FBFAF7;color:#1B1F24;font-family:'Noto Sans',system-ui,sans-serif;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}
.serif,h1{font-family:'Noto Serif',Georgia,serif}
a{color:inherit}

/* Phần đầu trên nền biển, đáy có sóng trôi chậm (như W01) */
.bien{position:relative;overflow:hidden;background:linear-gradient(180deg,#13406B 0%,#0B2545 70%,#0A2242 100%);color:#F4F1EA}
.dau{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:64px;padding-bottom:128px}
.logo{width:112px;height:112px}
h1{margin:20px 0 0;font-size:clamp(34px,5vw,52px);line-height:1.2;font-weight:600;text-wrap:balance}
.sap{margin:20px 0 0;display:inline-block;padding:8px 18px;border-radius:999px;font-size:16px;font-weight:600;color:#E9C866;box-shadow:inset 0 0 0 1.5px rgba(233,200,102,.6);background:rgba(11,37,69,.35)}
.gioi-thieu{margin:20px 0 0;font-size:17px;line-height:1.65;color:#E1E7EF;max-width:600px;text-wrap:pretty}
.song{position:absolute;left:0;right:0;bottom:-1px;height:72px;overflow:hidden}
.song svg{position:absolute;left:0;bottom:0;width:2560px;height:72px}
.s1{animation:troi 34s linear infinite}
.s2{animation:troi 26s linear infinite reverse}
.s3{animation:troi 44s linear infinite}
.lap{animation:troi 30s linear infinite,lap 6s ease-in-out infinite}
@keyframes troi{from{transform:translateX(0)}to{transform:translateX(-1280px)}}
@keyframes lap{0%,100%{opacity:.25}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.s1,.s2,.s3,.lap{animation:none}}

/* Thẻ */
.the{padding:24px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px #DDD8CE}
.the .t{margin:0;font-size:20px;font-weight:700;line-height:1.35}
.the .t.serif{font-weight:600}
.the p{margin:8px 0 0;font-size:16px;line-height:1.6;color:#2C323B}
.ic{width:64px;height:64px;border-radius:16px;background:#0B2545;color:#E9C866;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ba-diem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:40px;padding-bottom:56px}
.thu-vien{background:#F2F0EA;padding:56px 0 64px}
.tieu-de{font-size:28px;margin:0 0 24px;font-weight:700}
.bon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.chan{background:#0B2545;color:#C9D3E0;font-size:14px;padding:28px 0 32px}
.chan a{color:#F4F1EA}

@media (max-width:700px){
 .wrap{padding:0 16px}
 .dau{padding-top:44px;padding-bottom:112px}
 .logo{width:88px;height:88px}
 .sap{font-size:15px}
 .gioi-thieu{font-size:16px}
 .ba-diem,.bon{grid-template-columns:1fr;gap:14px}
 .ba-diem{padding-top:28px;padding-bottom:44px}
 .thu-vien{padding:44px 0 52px}
 .the{padding:20px}
 .tieu-de{font-size:23px;margin-bottom:18px}
 .chan{font-size:13px}
}