/** Shopify CDN: Minification failed

Line 274:8 Unexpected bad string token
Line 274:57 Unterminated string token
Line 276:0 Unexpected "}"

**/
/* An Ngọc — Home (P3). Restyle 6 section native Horizon 4.1.5 theo design/export/Home.dc.html + Home Mobile.dc.html.
   Selector: id section trong templates/index.json (an_hero / an_category / an_new / an_promo / an_best / an_trust) qua [id$="__an_xxx"]
   (Shopify prefix "shopify-section-template--<id>__"). Class gốc Horizon: .hero, .resource-list, .collection-card, .media-with-content, .group-block.
   Nhịp dọc: design 80px desktop / 48px mobile giữa section, tính từ mép dưới section trước → padding-top mỗi section (trừ hero). */

:root {
  --an-home-gap: 80px; /* không dùng --section-gap: an-base.css đổi nó thành 56 ở ≤900 */
  --an-hero-h: 640px;
}
@media (max-width: 749px) {
  :root { --an-home-gap: 48px; }
}
/* 750–989: Horizon scale spacing 0.7 + an-base.css đổi --text-h1/h2 ở ≤900 → quy ước P2: tablet dùng metric desktop */
@media (min-width: 750px) and (max-width: 989px) {
  .shopify-section[id$="__an_hero"] .hero,
  .shopify-section[id$="__an_category"],
  .shopify-section[id$="__an_new"],
  .shopify-section[id$="__an_promo"],
  .shopify-section[id$="__an_best"],
  .shopify-section[id$="__an_trust"] { --spacing-scale: 1; --gap-scale: 1; --text-h1: 40px; --text-h2: 32px; }
}

/* ---------- 1. Hero: ảnh full-bleed 640px, panel trắng góc trái dưới ---------- */
.shopify-section[id$="__an_hero"] .hero {
  --hero-min-height: var(--an-hero-h);
  --hero-height-offset: 0px; /* Horizon trừ chiều cao header sticky khỏi hero đầu trang → design cố định 640 */
  min-height: var(--an-hero-h);
  background: var(--surface-utility);
}
.shopify-section[id$="__an_hero"] .hero__content-wrapper {
  padding: 0 80px 64px; /* panel cách trái 80, cách đáy 64 (artboard) */
}
.shopify-section[id$="__an_hero"] .hero__content-wrapper > .group-block {
  /* Artboard: max-width 520 + padding 40 với box-sizing CONTENT-BOX (mặc định) → card thật 553 rộng, h1 40px 1 dòng, card cao 251.
     Horizon group-block border-box → nội dung chỉ 440 → h1 gãy 2 dòng, card 301 (anh Cảnh bắt 09-12 20:44). Ép content-box. */
  box-sizing: content-box;
  max-width: 520px;
  width: fit-content;
  border-radius: var(--radius-tile);
  background: var(--surface-page);
  padding: 40px; /* Horizon spacing-style scale 0.7 dưới 990 → ép cứng */
}
.shopify-section[id$="__an_hero"] .hero__content-wrapper .group-block-content { gap: 16px; }
.shopify-section[id$="__an_hero"] .hero h1 {
  font-size: var(--text-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-body);
}
/* Artboard h1 text-wrap: pretty; Horizon text-block-styles ép heading = balance (ngắt "Đồ ngủ mềm / mại cho cả nhà") → trả về pretty */
.shopify-section[id$="__an_hero"] .hero .text-block.h1 { text-wrap: pretty; }
/* Sub: desktop 1 dòng "Cotton thoáng mát · Giao từ kho Mỹ 2–4 ngày"; mobile artboard 2 dòng cố định (br) — data = 2 <p>, ghép bằng CSS */
/* Horizon .text-block = flex column ({% stylesheet %} inject sau) → container phải block thì <p> inline mới ghép 1 dòng */
.shopify-section[id$="__an_hero"] .hero .text-block.paragraph { display: block; }
.shopify-section[id$="__an_hero"] .hero .text-block.paragraph p { display: inline; }
.shopify-section[id$="__an_hero"] .hero .text-block.paragraph p + p::before { content: " · "; }
.shopify-section[id$="__an_hero"] .hero .text-block.paragraph p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin: 0;
}
.shopify-section[id$="__an_hero"] .hero .button {
  --button-padding-block: 0;
  min-height: 56px;
  height: 56px;
  padding-inline: 32px;
  margin-top: 8px;
  line-height: 1;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  white-space: nowrap;
}
.shopify-section[id$="__an_hero"] .hero .button:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg); }
.shopify-section[id$="__an_hero"] .hero__media { object-position: center 40%; }

@media (max-width: 749px) {
  .shopify-section[id$="__an_hero"] .hero {
    --an-hero-h: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .shopify-section[id$="__an_hero"] .hero__container { min-height: 0; height: 100%; }
  .shopify-section[id$="__an_hero"] .hero__content-wrapper { padding: 0 16px 16px; }
  .shopify-section[id$="__an_hero"] .hero__content-wrapper > .group-block { max-width: none; width: 100%; box-sizing: border-box; }
  .shopify-section[id$="__an_hero"] .hero__content-wrapper > .group-block .group-block-content { gap: 12px; }
  .shopify-section[id$="__an_hero"] .hero__content-wrapper > .group-block { padding: 24px; }
  .shopify-section[id$="__an_hero"] .hero h1 { font-size: 30px; }
  .shopify-section[id$="__an_hero"] .hero .text-block.paragraph { display: flex; }
  .shopify-section[id$="__an_hero"] .hero .text-block.paragraph p { font-size: var(--text-sm); display: block; }
  .shopify-section[id$="__an_hero"] .hero .text-block.paragraph p + p::before { content: none; }
  .shopify-section[id$="__an_hero"] .hero .button { width: 100%; margin-top: 4px; }
  .shopify-section[id$="__an_hero"] .hero__media { object-position: center 30%; }
}

/* ---------- Nhịp section: padding-top = gap design. Horizon set --padding-block-start INLINE (spacing-style)
   nên không đè bằng biến được → padding trực tiếp trên wrapper .shopify-section (đo r0: gap = 0). ---------- */
.shopify-section[id$="__an_category"],
.shopify-section[id$="__an_new"],
.shopify-section[id$="__an_promo"],
.shopify-section[id$="__an_best"],
.shopify-section[id$="__an_trust"] {
  padding-top: var(--an-home-gap);
}
/* Footer cách trust row 80/48 */
.shopify-section[id$="__an_trust"] { padding-bottom: var(--an-home-gap); }
@media (max-width: 749px) {
  .shopify-section[id$="__an_category"] { padding-top: 40px; } /* mobile artboard: strip 40 dưới hero */
}

/* ---------- 2. Category strip: 5 ô vuông + nhãn 18/600 + → ---------- */
.shopify-section[id$="__an_category"] .resource-list--grid {
  --resource-list-column-gap-desktop: 24px;
  --resource-list-row-gap-desktop: 24px;
}
.shopify-section[id$="__an_category"] .collection-card__image {
  aspect-ratio: 1;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--surface-utility);
}
.shopify-section[id$="__an_category"] .collection-card__image img { width: 100%; height: 100%; object-fit: cover; }
.shopify-section[id$="__an_category"] .collection-card__inner { --gap: 12px; gap: 12px; } /* Horizon gap = collection_card_gap scale; ép 12 */
.shopify-section[id$="__an_category"] .collection-card__content { padding-top: 0; }
.shopify-section[id$="__an_category"] .collection-card__content .text-block p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.shopify-section[id$="__an_category"] .collection-card__content .text-block p::after { content: "→"; }
.shopify-section[id$="__an_category"] .collection-card:hover .text-block p { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 749px) {
  /* Cuộn ngang, card 140px, gap 12, padding 20 (mobile artboard) */
  .shopify-section[id$="__an_category"] .resource-list__carousel { --resource-list-column-gap: 12px; }
  .shopify-section[id$="__an_category"] .resource-list__carousel .resource-list__slide { --slide-width: 140px; }
  .shopify-section[id$="__an_category"] .resource-list__carousel .resource-list__item,
  .shopify-section[id$="__an_category"] .resource-list__carousel .collection-card { width: 140px; min-width: 140px; }
  .shopify-section[id$="__an_category"] .resource-list__carousel slideshow-slides { gap: 12px; }
  /* mũi tên Horizon (44px) đè lên card thứ 3 → ẩn, cuộn tay như artboard */
  .shopify-section[id$="__an_category"] .resource-list__carousel slideshow-arrows { display: none; }
  .shopify-section[id$="__an_category"] .collection-card__inner { --gap: 8px; gap: 8px; }
  .shopify-section[id$="__an_category"] .collection-card__content .text-block p { font-size: var(--text-sm); }
}

/* ---------- 3 & 5. Hàng mới về / Bán chạy nhất: heading h2 trái + "Xem tất cả" phải, 4 tile ---------- */
.shopify-section[id$="__an_new"] .section-resource-list__header .group-block-content,
.shopify-section[id$="__an_best"] .section-resource-list__header .group-block-content {
  align-items: baseline;
  justify-content: space-between;
}
.shopify-section[id$="__an_new"] h2,
.shopify-section[id$="__an_best"] h2 {
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
/* "Xem tất cả" = button-unstyled → link gạch chân 16/600, vùng bấm 48px */
.shopify-section[id$="__an_new"] .section-resource-list__header .button-unstyled,
.shopify-section[id$="__an_best"] .section-resource-list__header .button-unstyled {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.shopify-section[id$="__an_new"] .section-resource-list__header .button-unstyled:hover,
.shopify-section[id$="__an_best"] .section-resource-list__header .button-unstyled:hover { color: var(--text-secondary); }
/* header → grid 32px desktop / 20 mobile (section gap-style scale 0.7 <990 → ép --gap-scale) */
.shopify-section[id$="__an_new"] .section.gap-style,
.shopify-section[id$="__an_best"] .section.gap-style { --gap-scale: 1; row-gap: 32px; } /* --gap inline của Horizon thắng biến CSS ngoài → set row-gap thẳng */
.shopify-section[id$="__an_new"] .resource-list--grid,
.shopify-section[id$="__an_best"] .resource-list--grid {
  --resource-list-column-gap-desktop: 24px;
  --resource-list-row-gap-desktop: 24px;
}
@media (max-width: 749px) {
  .shopify-section[id$="__an_new"] .section.gap-style,
  .shopify-section[id$="__an_best"] .section.gap-style { row-gap: 20px; }
  .shopify-section[id$="__an_new"] h2,
  .shopify-section[id$="__an_best"] h2 { font-size: var(--text-h3); }
  .shopify-section[id$="__an_new"] .resource-list--grid,
  .shopify-section[id$="__an_best"] .resource-list--grid {
    --resource-list-mobile-gap-max: 24px;
    --resource-list-column-gap: 16px;
    --resource-list-row-gap: 24px;
  }
}

/* ---------- 4. Promo peach: ảnh vuông trái + text phải, khối bo 8 ---------- */
.shopify-section[id$="__an_promo"] .media-with-content {
  /* 2 cột đều (media_width medium); bọc nền peach + radius bằng pseudo trên grid → dùng background trên 2 con */
  --an-promo-bg: var(--surface-promo, #fef1eb);
}
.shopify-section[id$="__an_promo"] .media-block,
.shopify-section[id$="__an_promo"] .media-with-content__content,
.shopify-section[id$="__an_promo"] .media-with-content > .group-block {
  background: var(--an-promo-bg);
}
.shopify-section[id$="__an_promo"] .media-block { border-radius: var(--radius-tile) 0 0 var(--radius-tile); overflow: hidden; }
.shopify-section[id$="__an_promo"] .media-with-content > .group-block { border-radius: 0 var(--radius-tile) var(--radius-tile) 0; }
.shopify-section[id$="__an_promo"] .media-block { aspect-ratio: 1; position: relative; } /* Horizon media = absolute 100% → ratio đặt trên wrapper */
.shopify-section[id$="__an_promo"] .media-block__media img { width: 100%; height: 100%; object-fit: cover; }
.shopify-section[id$="__an_promo"] .media-with-content > .group-block .group-block-content {
  padding: 64px;
  gap: 24px;
  justify-content: center;
}
.shopify-section[id$="__an_promo"] h2 { font-size: var(--text-h2); line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.shopify-section[id$="__an_promo"] .text-block.paragraph p { font-size: var(--text-md); max-width: 40ch; margin: 0; }
.shopify-section[id$="__an_promo"] .button-secondary {
  --button-padding-block: 0;
  --button-border-width: 1.5px;
  --button-border-color: var(--border-strong);
  min-height: 52px;
  height: 52px;
  padding-inline: 24px;
  line-height: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--text-body);
  white-space: nowrap;
}
.shopify-section[id$="__an_promo"] .button-secondary:hover { background: var(--surface-utility); color: var(--text-body); }
@media (max-width: 749px) {
  .shopify-section[id$="__an_promo"] .media-block { border-radius: var(--radius-tile) var(--radius-tile) 0 0; }
  .shopify-section[id$="__an_promo"] .media-with-content > .group-block { border-radius: 0 0 var(--radius-tile) var(--radius-tile); }
  .shopify-section[id$="__an_promo"] .media-block { aspect-ratio: 4 / 3; }
  .shopify-section[id$="__an_promo"] .media-with-content > .group-block .group-block-content { padding: 28px 24px 32px; gap: 16px; }
  .shopify-section[id$="__an_promo"] h2 { font-size: var(--text-h3); }
  .shopify-section[id$="__an_promo"] .text-block.paragraph p { font-size: 17px; }
  .shopify-section[id$="__an_promo"] .button-secondary { width: 100%; }
}

/* ---------- 6. Trust row: 3 cột icon 32 + text 18/600, viền trên/dưới, padding 40 ---------- */
.shopify-section[id$="__an_trust"] .custom-section-content {
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding-block: 40px;
}
.shopify-section[id$="__an_trust"] .section-content-wrapper { gap: 24px; }
.shopify-section[id$="__an_trust"] .group-block-content { gap: 16px; justify-content: center; }
.shopify-section[id$="__an_trust"] .icon-block svg { width: 32px; height: 32px; }
.shopify-section[id$="__an_trust"] .text-block p { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
@media (max-width: 749px) {
  .shopify-section[id$="__an_trust"] .custom-section-content { padding-block: 24px; }
  .shopify-section[id$="__an_trust"] .section-content-wrapper { gap: 16px; }
  .shopify-section[id$="__an_trust"] .group-block-content { gap: 14px; justify-content: flex-start; flex-direction: row; }
  .shopify-section[id$="__an_trust"] .icon-block svg { width: 28px; height: 28px; }
  .shopify-section[id$="__an_trust"] .text-block p { font-size: 17px; }
}
an_trust"] .icon-block svg { width: 28px; height: 28px; }
  .shopify-section[id$="__an_trust"] .text-block p { font-size: 17px; }
}
