/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css ***!
  \********************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */

/*
 * Design tokens — nền tảng thẩm mỹ chung cho toàn site (header/footer/badge...).
 * File này được ng build đưa vào cuối cùng trong pipeline CSS của Angular nên
 * an toàn để override các file .css legacy load qua <link> trong index.html.
 * Không đổi behavior/markup — chỉ là biến dùng chung, hex/px rời rạc ở các
 * component vẫn hoạt động như cũ cho tới khi được chuyển sang dùng var() này.
 */

:root {
  --color-primary: #25447F;       /* navy DESGIN 2026-10-01 (thay teal #007293) — CSS toàn dự án dùng var(--color-primary) */
  --color-primary-dark: #1A3363;  /* navy đậm DESGIN (thay #005a74) */
  --color-accent: #F04452;        /* đỏ điểm nhấn kiểu Coupang/Naver cho CTA, sale, badge */
  --color-sale: #F04452;
  --color-new: var(--color-primary);
  --color-best: #3E3A39;          /* trùng màu chữ thân trang (base.css) cho đồng bộ */
  --color-text: #3E3A39;
  --color-text-muted: #6b6b6b;
  --color-border: #EAEBED;
  --color-bg-subtle: #F7F8F9;

  /* 2026-10-01: font toàn site theo DESGIN (Poppins + Noto Sans KR, load ở index.html) */
  --font-sans: "Poppins", "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* base.css gán Pretendard riêng cho input → cho form dùng chung font toàn site */

input,
button,
select,
textarea {
  font-family: var(--font-sans);
}

/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles/sn-theme.css ***!
  \*****************************************************************************************************************************************************************************************************************/
/*
 * sn-theme.css — theme giao diện mới (DESGIN/html-site).
 * - Token --sn-* chỉ có hiệu lực bên trong phần tử có class .sn
 *   → các trang legacy không bị ảnh hưởng.
 * - Chỉ chứa token + primitive dùng chung. Layout riêng từng trang
 *   đặt trong CSS của component.
 * - Quy tắc: DOS/PLAN/2026-10-01_0951_redesign-product-list-detail.md (mục 3).
 */

/* — tokens — */

.sn {
  /* nền & chữ */
  --sn-paper: #FBF7F1;
  --sn-paper-2: #F3EDE3;
  --sn-card: #FFFFFF;
  --sn-ink: #14212E;
  --sn-ink-deep: #0B1620;
  --sn-ink-2: #51616F;
  --sn-ink-3: #8A9199;
  --sn-line: #E6DED2;
  --sn-white: #FFFFFF;

  /* xanh lá */
  --sn-green: #12A15C;
  --sn-green-deep: #0B5F39;
  --sn-green-soft: #E3F4EA;
  --sn-green-mid: #8FD9B3;
  --sn-teal: #0E7A6E;

  /* hồng */
  --sn-pink: #E63E6D;
  --sn-pink-ink: #C21F4E;
  --sn-pink-dark: #A81742;
  --sn-pink-soft: #FDEBF1;
  --sn-pink-mid: #F7A8C0;

  /* xanh dương / navy / vàng */
  --sn-blue: #1F7FD6;
  --sn-blue-dark: #1A6FC0;
  --sn-blue-deep: #155A9C;
  --sn-navy: #25447F;
  --sn-navy-dark: #1A3363;
  --sn-yellow: #F2D740;
  --sn-yellow-2: #FFE14D;
  --sn-cream: #FAEB9E;
  --sn-star: #F2B705;

  /* cyan */
  --sn-cyan: #61D0E5;
  --sn-cyan-mid: #45BFD6;
  --sn-cyan-light: #9FE2F4;
  --sn-cyan-soft: #E2F6FC;
  --sn-sea: #0B4F6C;
  --sn-sea-deep: #0B3F57;
  --sn-sea-mist: #B7DCE8;

  /* phụ */
  --sn-clay: #E8643C;
  --sn-rust: #C24A26;
  --sn-peach: #FBEFE6;

  /* footer */
  --sn-foot-text: #A9B4BE;
  --sn-foot-muted: #8B98A4;
  --sn-foot-fine: #98A3AE;

  /* lớp phủ */
  --sn-overlay: rgba(20, 33, 46, .45);
  --sn-cyan-tint: rgba(97, 208, 229, .18);

  /* bo góc */
  --sn-radius-sm: 14px;
  --sn-radius-md: 18px;
  --sn-radius-card: 20px;
  --sn-radius-lg: 26px;
  --sn-radius-xl: 32px;
  --sn-radius-pill: 999px;

  /* khoảng cách */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-5: 22px;
  --sn-space-6: 32px;
  --sn-space-7: 48px;
  --sn-space-8: 64px;
  --sn-space-9: 96px;

  /* cỡ chữ */
  --sn-fs-xs: 12px;
  --sn-fs-sm: 13px;
  --sn-fs-base: 14px;
  --sn-fs-md: 15px;
  --sn-fs-lg: 16px;
  --sn-fs-xl: 17px;
  --sn-fs-icon: 18px;
  --sn-fs-2xl: 20px;
  --sn-fs-lead: 18px;
  --sn-fs-3xl: 23px;
  --sn-fs-price: 40px;

  /* bóng */
  --sn-shadow-1: 0 10px 30px -18px rgba(20, 33, 46, .28);
  --sn-shadow-2: 0 14px 36px -20px rgba(20, 33, 46, .4);
  --sn-shadow-3: 0 20px 50px -26px rgba(20, 33, 46, .35);
  --sn-shadow-cyan: 0 18px 40px -26px rgba(97, 208, 229, .6);

  /* chữ & chuyển động */
  --sn-font: "Poppins", "Noto Sans KR", sans-serif;
  --sn-ease: .2s ease;
  --sn-ease-out: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--sn-font);
  /* design dùng line-height mặc định của font; legacy đặt body 24px cố định → trả về normal */
  line-height: normal;
  color: var(--sn-ink);
  -webkit-font-smoothing: antialiased;
}

/* — reset trong phạm vi .sn — */

.sn h1,
.sn h2,
.sn h3,
.sn h4 {
  margin: 0;
  font-family: var(--sn-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.sn p {
  text-wrap: pretty;
}

.sn a {
  color: inherit;
  text-decoration: none;
}

.sn img {
  display: block;
  max-width: 100%;
}

.sn :focus-visible {
  outline: 2px solid var(--sn-pink);
  outline-offset: 2px;
}

/* — container — */

.sn-container {
  /* max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px; Oanh lock 6 October */
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 0px;
}

/* — eyebrow (chữ nhỏ trên tiêu đề) — */

.sn-eyebrow {
  margin-bottom: var(--sn-space-4);
  font-size: var(--sn-fs-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sn-green-deep);
}

/* — heading — */

.sn-h1 {
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: 1.02;
}

.sn-h2 {
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.12;
}

.sn-h2--sm {
  font-size: clamp(26px, 2.8vw, 38px);
}

/* — pill button — */

.sn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-2);
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--sn-radius-pill);
  font-family: inherit;
  font-size: var(--sn-fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--sn-ease), color var(--sn-ease), border-color var(--sn-ease), transform var(--sn-ease);
}

.sn-pill:hover {
  transform: translateY(-1px);
}

.sn-pill--block {
  width: 100%;
}

.sn-pill--blue {
  background: var(--sn-blue-dark);
  color: var(--sn-white);
}

.sn-pill--blue:hover {
  background: var(--sn-blue-deep);
  color: var(--sn-white);
}

.sn-pill--pink {
  background: var(--sn-pink-ink);
  color: var(--sn-white);
}

.sn-pill--pink:hover {
  background: var(--sn-pink-dark);
  color: var(--sn-white);
}

.sn-pill--navy {
  background: var(--sn-navy);
  color: var(--sn-yellow);
}

.sn-pill--navy:hover {
  background: var(--sn-navy-dark);
  color: var(--sn-yellow);
}

.sn-pill--cyan {
  background: var(--sn-cyan);
  color: var(--sn-sea-deep);
}

.sn-pill--cyan:hover {
  background: var(--sn-cyan-mid);
  color: var(--sn-sea-deep);
}

.sn-pill--line {
  border-color: var(--sn-line);
  background: transparent;
  color: var(--sn-ink);
}

.sn-pill--line:hover {
  border-color: var(--sn-green);
  background: var(--sn-green-soft);
  color: var(--sn-green-deep);
}

/* — chip / tag nhỏ — */

.sn-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: var(--sn-radius-pill);
  font-size: var(--sn-fs-sm);
  font-weight: 500;
  background: var(--sn-green-soft);
  color: var(--sn-green-deep);
}

/* — card — */

.sn-card {
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-card);
}

/*
 * — khung video YouTube (iframe do pipe youtubeFrame chèn qua innerHtml →
 *   CSS component không áp vào được, nên đặt ở đây) —
 */

.sn-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* — hiện dần khi cuộn tới (directive snReveal gắn .sn-reveal / .is-in) — */

.sn-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--sn-ease-out), transform .8s var(--sn-ease-out);
}

.sn-reveal.is-in {
  opacity: 1;
  transform: none;
}

/*
 * — nền giấy cho cả trang (header nằm ngoài .sn của trang nên phải đặt ở body) —
 * Trang nào cần nền giấy thì thêm/bỏ class này trên <body> ở ngOnInit/ngOnDestroy.
 * Giá trị trùng --sn-paper (token chỉ có trong .sn nên không dùng var được ở body).
 */

body.sn-body--paper {
  background-color: #FBF7F1;
}

/* cart drawer mở → khoá cuộn trang */

body.sn-body--lock {
  overflow: hidden;
}

/* — giảm chuyển động — ngoại lệ DUY NHẤT được dùng !important (accessibility) — */

@media (prefers-reduced-motion: reduce) {
  .sn *,
  .sn *::before,
  .sn *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/ngx-toastr/toastr.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */

/* position */

.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

/* toast styles */

.toast-title {
  font-weight: bold;
}

.toast-message {
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #FFFFFF;
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #ffffff;
  /* opacity: 0.8; */
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/

button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}

.toast-container * {
  box-sizing: border-box;
}

.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

.toast-container .ngx-toastr:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */

.toast-info {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */

.toast-error {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */

.toast-success {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */

.toast-warning {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
}

.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.ngx-toastr {
  background-color: #030303;
  pointer-events: auto;
}

.toast-success {
  background-color: #51A351;
}

.toast-error {
  background-color: #BD362F;
}

.toast-info {
  background-color: #2F96B4;
}

.toast-warning {
  background-color: #F89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
}

/* Responsive Design */

@media all and (max-width: 240px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}

@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}

@media all and (min-width: 481px) and (max-width: 768px) {
  .toast-container .ngx-toastr.div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}


/*# sourceMappingURL=styles.css.map*/