:root{
  --bg:#0f0f11;
  --card:#16171a;
  --muted:#a8acb3;
  --text:#f6f7f9;
  --accent:#ffffff;
  --brand:#111827;
  --primary:#1111ff; /* auto-safe link blue feel */
  --primary-contrast:#fff;
  --ring: rgba(255,255,255,.2);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block}

.container{width:min(1200px,92%);margin-inline:auto}

a{color:#cfd6ff;text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:14px 22px;font-weight:700;border:1px solid transparent;
  cursor:pointer;transition:.2s ease; text-decoration:none;
}
.btn--primary{background:#5b6cff;color:var(--primary-contrast);box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-1px);opacity:.95}
.btn--ghost{border-color:var(--ring);color:var(--text);background:transparent}
.btn--ghost:hover{background:#1d1f25}
.btn--sm{padding:10px 14px;font-size:.9rem}

.muted{color:var(--muted)}
.section-head{display:flex;align-items:end;justify-content:space-between;margin:28px 0 16px}
.section-head h2{margin:0;font-size:1.6rem}
.link{font-weight:700}

.announcement{
  position:sticky;top:0;z-index:50;background:#111827;color:#fff;
  display:flex;gap:12px;align-items:center;justify-content:center;padding:10px 16px;border-bottom:1px solid #1f2330
}
.announcement .link{color:#9ab1ff}

.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{width:160px;height:auto}
.nav{display:none;gap:22px}
.nav a{color:#d7dbeb}
@media (min-width:900px){ .nav{display:flex} }

.hero{display:grid;gap:22px;grid-template-columns:1fr;align-items:center;padding:16px 0 28px}
.hero__img{
  width:100%;aspect-ratio:16/9;background:#23252c center/cover no-repeat;border-radius:var(--radius);box-shadow:var(--shadow);
  /* Replace with lifestyle hero 1600x900 */
}
.hero__content{padding:6px 4px}
.hero__content h1{font-size:2rem;line-height:1.1;margin:10px 0}
.hero__content p{color:#d7dbeb;max-width:680px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
.coupon{display:flex;gap:10px;align-items:center;background:#181a20;border:1px dashed #2a2e3b;padding:10px 12px;border-radius:12px}
.coupon .copy{background:#2a2e3b;border:none;color:#e7eaff;padding:6px 10px;border-radius:8px;cursor:pointer}
.trust{display:flex;gap:16px;list-style:none;padding:0;margin:16px 0 0;color:#b8bfd1;font-size:.95rem;flex-wrap:wrap}

.grid-section{padding:10px 0 20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){ .grid{grid-template-columns:repeat(4,1fr)} }

.card{background:var(--card);border:1px solid #1f2330;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card img{aspect-ratio:4/5;object-fit:cover;background:#242731}
.card__body{padding:14px}
.card__body h3{margin:0 0 6px;font-size:1.05rem}
.price{color:#cdd5ff;font-weight:700;margin:0 0 10px}

.collections{padding:10px 0 14px}
.grid--collections{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .grid--collections{grid-template-columns:repeat(4,1fr)} }
.collection{position:relative;border-radius:var(--radius);overflow:hidden;background:#20222a;border:1px solid #2a2e3b}
.collection img{aspect-ratio:3/2;object-fit:cover}
.collection span{
  position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  color:#fff;padding:8px 12px;border-radius:999px;font-weight:700
}

.features{padding:10px 0 30px}
.feature-list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .feature-list{grid-template-columns:repeat(4,1fr)} }
.feature{background:var(--card);padding:16px;border-radius:var(--radius);border:1px solid #1f2330;text-align:left}
.feature img{width:64px;height:64px;margin-bottom:8px;opacity:.95}
.feature h3{margin:6px 0 6px}
.cta-box{margin-top:18px;background:linear-gradient(180deg,#23263a,#1a1d2d);padding:18px;border-radius:var(--radius);border:1px solid #2a2e3b;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

.ugc{padding:8px 0 24px}
.ugc-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.ugc-grid img{aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid #1f2330;background:#242731}

.bundles{padding:8px 0 24px}
.card--accessory img{aspect-ratio:1/1}

.faq details{background:#161821;border:1px solid #262a38;padding:14px;border-radius:12px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}

.footer{background:#0b0c10;margin-top:28px;padding:28px 0 0;border-top:1px solid #151824}
.footer__grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:900px){ .footer__grid{grid-template-columns:2fr 1fr 1fr} }
.footer h4{margin:.2rem 0 .4rem}
.footer__legal{border-top:1px solid #151824;margin-top:18px;padding:12px 0;color:#9aa0aa}

.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:12px;background:#12131a;border:1px solid #2a2e3b;border-radius:14px;
  padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow);z-index:60
}

.ugc-grid.single {
  display: block;
  text-align: center;
}

.ugc-grid.single img {
  width: 100%;
  max-width: 1200px; /* cho đẹp, không vượt container */
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

/* REVIEWS */
.reviews { padding: 8px 0 28px; }
.reviews__summary {
  display:flex; align-items:center; gap:14px; margin:6px 0 14px;
}
.stars { font-size:1.2rem; color:#ffd862; letter-spacing:2px; }
.stars .half { position:relative; display:inline-block; }
.reviews__grid {
  display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:900px){ .reviews__grid{ grid-template-columns:repeat(4,1fr);} }
.review {
  background:#16171a; border:1px solid #1f2330; border-radius:16px; padding:14px; min-height:200px;
}
.review__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.review h3 { margin:4px 0 6px; font-size:1.02rem; }
.review p { color:#cfd3dd; margin:0 0 8px; }
.review .meta { color:#9aa0aa; font-size:.9rem; }
.badge {
  background:#1f2330; color:#dbe1ff; border:1px solid #2a2e3b;
  padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:700;
}
.reviews__cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.reviews__cta .micro { color:#9aa0aa; margin:0; }

.badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; color:#cfd3dd; }
.badges span { background:#181a20; border:1px solid #2a2e3b; padding:6px 10px; border-radius:999px; font-size:.9rem; }