/* ==========================================================================
   S SELECT — CSS chỉ dùng ở trang chủ (index.html)
   Hero, Về S-Select, Vì sao chọn, Ngôi sao sản phẩm, Bộ sưu tập,
   Điểm bán, Đánh giá, Hỏi & đáp.
   ========================================================================== */

/* --- HERO ------------------------------------------------------------- */
.hero-slider { position:relative;background:#F1F7F2;border-bottom:1px solid #D7E5DA;overflow:hidden; }
.hero-slider-frame { position:relative;width:100%;aspect-ratio:2560/1080;min-height:420px;max-height:calc(100vh - 118px);overflow:hidden; }
.hero-slide { position:absolute;inset:0;opacity:0;transition:opacity .7s ease; }
.hero-slide.is-active { opacity:1;z-index:1; }
.hero-slide img { width:100%;height:100%;display:block;object-fit:cover;object-position:center; }
.hero-slider-control { position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(27,27,24,.18);border-radius:50%;background:rgba(251,249,245,.72);backdrop-filter:blur(10px);color:#17211B;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s; }
.hero-slider-control:hover { background:#F1F7F2;border-color:#17211B; }
.hero-slider-prev { left:24px; }
.hero-slider-next { right:24px; }
.hero-slider-dots { position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;gap:10px; }
.hero-slider-dot { width:10px;height:10px;border-radius:999px;border:1px solid rgba(27,27,24,.42);background:rgba(251,249,245,.62);padding:0;cursor:pointer;transition:width .2s,background .2s,border-color .2s; }
.hero-slider-dot.is-active { width:28px;background:#17211B;border-color:#17211B; }

/* --- VỀ S-SELECT ------------------------------------------------------- */
.about { background:#F1F7F2; }
.about-inner { max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) 32px; }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start; }
.about-lead { font-size:16px;line-height:1.72;color:#4B5850;margin:0 0 18px;max-width:480px; }
.about-lead:last-of-type { margin-bottom:0; }
.about-lead strong { font-weight:600;color:#17211B; }
.about-jp { color:#7F8C83; }
.about-chips-title { font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#7F8C83;margin-top:38px; }
.about-chips { display:flex;flex-wrap:wrap;gap:10px;margin-top:26px; }
.about-chip { display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #D7E5DA;border-radius:999px;background:#fff;font-size:13.5px;color:#4B5850;transition:border-color .2s, color .2s, transform .2s; }
.about-chip:hover { border-color:#019944;color:#017A36;transform:translateY(-2px); }
.about-chip span { width:5px;height:5px;border-radius:50%;background:#019944; }

.select-head { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px; }
.select-wordmark { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:#17211B;letter-spacing:0.16em; }
.select-list { border-top:1px solid #D7E5DA; }
.select-row { display:grid;grid-template-columns:64px 1fr;align-items:center;gap:20px;padding:17px 12px;border-bottom:1px solid #D7E5DA;transition:background .25s, padding-left .25s; }
.select-row:hover { background:#fff;padding-left:20px; }
.select-letter { font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;line-height:1;color:#019944;text-align:center;transition:transform .25s; }
.select-row:hover .select-letter { transform:scale(1.12); }
.select-en { font-size:16px;font-weight:600;color:#17211B;margin-bottom:3px; }
.select-vi { font-size:14px;color:#617066; }
.sugi-seal { display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50%;background:#019944;color:#fff;line-height:1.15;box-shadow:0 20px 40px -22px rgba(1,153,68,0.9); }
.sugi-seal strong { font-size:19px;font-weight:700;letter-spacing:0.06em; }
.sugi-seal em { font-style:normal;font-size:12px;letter-spacing:0.18em;opacity:.9;padding-top:5px;margin-top:5px;border-top:1px solid rgba(255,255,255,0.45); }

/* --- VÌ SAO CHỌN S SELECT ---------------------------------------------- */
.story { border-top:1px solid #D7E5DA;border-bottom:1px solid #D7E5DA;background:#fff; }
.story-inner { max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,84px) 32px; }
.story-grid { display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start; }
.ethos-grid { display:grid;grid-template-columns:1fr 1fr;gap:36px 44px;padding-top:8px; }
.ethos-item { position:relative; }
.ethos-head { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.ethos-icon { flex:none;width:52px;height:52px;border-radius:50%;background:#EAF4ED;border:1px solid #D0E4D6;color:#017A36;display:flex;align-items:center;justify-content:center;transition:background .28s ease, color .28s ease, transform .28s ease; }
.ethos-icon svg { width:24px;height:24px; }
.ethos-item:hover .ethos-icon { background:#019944;color:#fff;transform:translateY(-3px); }
.ethos-num { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:#019944;line-height:1; }
.ethos-title { font-size:16.5px;font-weight:600;margin:0 0 9px;color:#17211B; }
.ethos-text { font-size:14.5px;line-height:1.65;color:#617066;margin:0; }

/* --- NGÔI SAO SẢN PHẨM -------------------------------------------------- */
.feature-band { max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) 32px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center; }
/* display:block bat buoc — the nay la <a> (mac dinh inline) nen thieu se vo bo cuc */
.feature-media { display:block;border-radius:4px;overflow:hidden;box-shadow:0 24px 60px -36px rgba(0,0,0,0.35); }
.feature-media img { display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.feature-media:hover img { transform:scale(1.03); }
.feature-text { font-size:16px;line-height:1.72;color:#4B5850;max-width:440px;margin:0 0 30px; }
.feature-points { display:flex;flex-direction:column;gap:16px;margin-bottom:34px; }
.feature-point { display:flex;gap:14px;align-items:flex-start; }
.feature-badge { flex:none;width:22px;height:22px;border-radius:50%;background:#019944;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px; }
.feature-point strong { font-weight:600; }
.feature-foot { display:flex;align-items:center;gap:26px;flex-wrap:wrap; }
.feature-price-label { font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#7F8C83;margin-bottom:5px; }
.feature-price { font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:#017A36;line-height:1; }
.feature-link { display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#17211B;border-bottom:1.5px solid #17211B;padding-bottom:4px; }

/* --- BỘ SƯU TẬP SẢN PHẨM ------------------------------------------------ */
.products { background:#fff;border-top:1px solid #D7E5DA; }
.products-inner { max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,88px) 32px; }
.products-head { display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-bottom:clamp(32px,4vw,54px); }
.products-note { font-size:15px;color:#617066;max-width:340px;margin:0;line-height:1.6; }
.prod-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px); }
.prod-card { background:#F1F7F2;border:1px solid #E1EDE4;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s, box-shadow .3s; }
.prod-card:hover { transform:translateY(-6px);box-shadow:0 26px 50px -34px rgba(0,0,0,0.4); }
/* Khung vuông cố định: ảnh co theo khung, không phải khung nở theo ảnh. */
/* display:block bat buoc — the nay la <a> (mac dinh inline) nen thieu se vo aspect-ratio */
.prod-media { display:block;aspect-ratio:1/1;background:#fff;padding:24px;overflow:hidden;border-bottom:1px solid #E1EDE4; }
.prod-media img { width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.prod-media:hover img { transform:scale(1.04); }
/* Ảnh chụp nền trắng: hoà nền để khớp với ảnh PNG trong suốt. */
.prod-media img.is-blend { mix-blend-mode:multiply; }
.prod-body { padding:20px 20px 24px;display:flex;flex-direction:column;flex:1; }
.prod-tag { font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;color:#017A36; }
.prod-tag--gold { color:#B08A2E; }
.prod-tag--indigo { color:#3B3B8F; }
.prod-name { font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;margin:0 0 6px;color:#17211B;line-height:1.16;min-height:2.32em; }
.prod-desc { font-size:13px;color:#617066;line-height:1.55;margin:0 0 16px;min-height:3.1em; }
/* CKEditor boc san the <p> — bo margin mac dinh de khong pha nhip the card. */
.prod-tag p, .prod-desc p { margin:0; }
.prod-tag p + p, .prod-desc p + p { margin-top:6px; }
.prod-foot { margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.prod-price { font-size:16.5px;font-weight:600;color:#017A36;white-space:nowrap; }
.prod-price small { font-size:11.5px;font-weight:400;color:#7F8C83;display:block;letter-spacing:0.04em; }
.prod-link { font-size:13px;font-weight:600;color:#17211B;border-bottom:1.5px solid #17211B;padding-bottom:3px;white-space:nowrap; }

/* --- CÓ MẶT TẠI (logo nhà bán lẻ chạy ngang) ---------------------------- */
@keyframes retailMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.retail-logo-section { border-top:1px solid #D7E5DA;border-bottom:1px solid #D7E5DA;background:#F1F7F2;overflow:hidden; }
.retail-logo-container { max-width:1240px;margin:0 auto;padding:30px 32px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:34px; }
.retail-logo-label { font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:#7F8C83;white-space:nowrap; }
.retail-logo-slider { position:relative;overflow:hidden;min-width:0;padding:8px 0;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.retail-logo-track { display:flex;align-items:center;gap:18px;width:max-content;animation: retailMarquee 24s linear infinite; }
.retail-logo-slider:hover .retail-logo-track { animation-play-state: paused; }
.retail-logo-group { display:flex;align-items:center;gap:18px; }
.retail-logo-card { flex:0 0 auto;width:178px;height:74px;background:#fff;border:1px solid #D7E5DA;border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -26px rgba(27,27,24,0.35); }
.retail-logo-card--hasaki { background:#006B54;border-color:#006B54; }
.retail-logo-img { display:block;max-width:128px;max-height:42px;width:auto;height:auto;object-fit:contain; }

/* --- KHÁCH HÀNG NÓI GÌ -------------------------------------------------- */
.reviews { max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,88px) 32px; }
.reviews-head { text-align:center;margin-bottom:clamp(34px,4vw,56px); }
.review-slider { position:relative; }
.review-viewport { overflow:hidden; }
.review-track { display:flex;transition:transform .55s cubic-bezier(.3,.8,.3,1); }
.review-slide { flex:0 0 33.3333%;padding:0 12px; }
.review-card { height:100%;background:#fff;border:1px solid #E1EDE4;border-radius:4px;padding:32px 30px;display:flex;flex-direction:column; }
.review-stars { color:#E8B23A;font-size:15px;letter-spacing:3px;margin-bottom:18px; }
.review-quote { font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.4;color:#23302A;margin:0 0 24px;font-weight:500; }
.review-author { margin-top:auto;display:flex;align-items:center;gap:12px; }
.review-name { font-size:14px;font-weight:600;color:#17211B; }
.review-meta { font-size:12.5px;color:#7F8C83; }
.review-arrow { position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #D7E5DA;background:#fff;color:#17211B;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s, color .2s, border-color .2s; }
.review-arrow:hover { background:#019944;color:#fff;border-color:#019944; }
.review-prev { left:-14px; }
.review-next { right:-14px; }
.review-dots { display:flex;justify-content:center;gap:9px;margin-top:26px; }
.review-dot { width:9px;height:9px;padding:0;border-radius:999px;border:1px solid #B4CDBC;background:transparent;cursor:pointer;transition:width .25s, background .25s, border-color .25s; }
.review-dot.is-active { width:26px;background:#019944;border-color:#019944; }
/* Chữ cái nằm dưới làm dự phòng; ảnh tự gỡ mình nếu thiếu file. */
.avatar { position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#EAF4ED;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-weight:600;color:#017A36; }
.avatar-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top; }

/* --- HỎI & ĐÁP --------------------------------------------------------- */
.faq { background:#fff;border-top:1px solid #D7E5DA; }
.faq-inner { max-width:900px;margin:0 auto;padding:clamp(48px,6vw,88px) 32px; }
.faq-head { text-align:center;margin-bottom:clamp(30px,4vw,50px); }
.faq-item { border-bottom:1px solid #D7E5DA; }
.faq-toggle { width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Be Vietnam Pro',sans-serif; }
.faq-question { font-size:17px;font-weight:600;color:#17211B; }
.faq-sign { flex:none;font-family:'Cormorant Garamond',serif;font-size:26px;color:#017A36;line-height:1; }
.faq-answer { padding:0 4px 26px;font-size:15px;line-height:1.72;color:#4B5850;max-width:680px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) { .prod-grid { grid-template-columns:repeat(3,1fr); } }

@media (max-width: 960px) {
  .story-grid, .feature-band { grid-template-columns:1fr; }
  .review-slide { flex-basis:50%; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns:1fr; }
}

@media (max-width: 820px) { .prod-grid { grid-template-columns:repeat(2,1fr);gap:14px; } }

@media (max-width: 768px) {
  /* Ảnh slide có chữ vẽ sẵn — cắt cho đầy khung sẽ mất chữ. */
  .hero-slider-frame { min-height:0; }
  .hero-slide img { object-fit:contain; }
  .hero-slider-control { width:34px;height:34px;font-size:22px; }
  .hero-slider-prev { left:8px; }
  .hero-slider-next { right:8px; }
  .hero-slider-dots { bottom:10px;gap:8px; }
  .hero-slider-dot { width:8px;height:8px; }
  .hero-slider-dot.is-active { width:22px; }
}

@media (max-width: 760px) {
  .retail-logo-container { grid-template-columns:1fr;gap:16px;padding:24px 20px;justify-items:center; }
  .select-row { grid-template-columns:48px 1fr;gap:14px; }
  .select-letter { font-size:32px; }
  .sugi-seal { width:84px;height:84px; }
  .sugi-seal strong { font-size:16px; }
}

@media (max-width: 640px) {
  .about-inner, .story-inner, .products-inner, .faq-inner, .reviews, .feature-band { padding-left:20px;padding-right:20px; }
  .ethos-grid { gap:28px 16px; }
  .ethos-head { gap:9px;margin-bottom:10px; }
  .ethos-icon { width:42px;height:42px; }
  .ethos-icon svg { width:20px;height:20px; }
  .ethos-num { font-size:21px; }
  .ethos-title { font-size:15px; }
  .ethos-text { font-size:13.5px;line-height:1.6; }
  .about-chips { gap:8px; }
  .prod-name, .prod-desc { min-height:0; }
  .review-slide { flex-basis:100%;padding:0 6px; }
  .review-arrow { display:none; }
  .review-card { padding:26px 22px; }
  .review-quote { font-size:20px; }
}

@media (max-width: 520px) {
  .prod-grid { gap:12px; }
  .prod-media { padding:14px; }
  .prod-body { padding:14px 14px 18px; }
  .prod-name { font-size:18px; }
  .prod-desc { font-size:12px;margin-bottom:12px; }
  .prod-foot { flex-direction:column;align-items:flex-start;gap:8px; }
  .prod-price { font-size:15px; }
}