/* SINH TỰ ĐỘNG bởi lanora/scope-css.py từ "giao_dien_hoan_chinh/css/components.css" — đừng sửa tay, sửa file gốc rồi chạy lại. */
/* =========================================================
   VIỀN "INSIDE" KIỂU FIGMA: không chiếm chỗ, vẽ đè lên nội dung
   ========================================================= */
:where(.lanora) .product-card, :where(.lanora) .blog-card, :where(.lanora) .filter, :where(.lanora) .needs, :where(.lanora) .summary, :where(.lanora) .qty, :where(.lanora) .upload {
  position: relative;
  border: 0;
}
:where(.lanora) .product-card::after, :where(.lanora) .blog-card::after, :where(.lanora) .filter::after, :where(.lanora) .needs::after,
:where(.lanora) .summary::after, :where(.lanora) .qty::after, :where(.lanora) .upload::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px var(--stroke-style, solid) var(--stroke, var(--border-subtle));
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.3s;
}

/* =========================================================
   HEADER  (Figma 289:1135 – Default / When Scroll)
   ========================================================= */
:where(.lanora) .header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  width: var(--page-width);
  height: 72px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0 var(--lanora-gutter);
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
:where(.lanora) .header.is-scrolled,
:where(.lanora) .header--solid {
  background: var(--white);
  border-bottom-color: rgba(122, 82, 38, 0.1);
  box-shadow: 0 2px 16px rgba(122, 82, 38, 0.1);
}
:where(.lanora) .header__logo {
  position: relative;
  flex: none;
  width: 182px;
  height: 44px;
  overflow: hidden;
}
:where(.lanora) .header__logo img {
  position: absolute;
  left: -4.45%;
  top: -18.46%;
  width: 106.92%;
  height: 136.57%;
}
:where(.lanora) .header__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 0.5px), -50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
:where(.lanora) .header__nav a {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--text-primary);
  transition: color 0.2s;
}
:where(.lanora) .header__nav a:hover {
  color: var(--primary-01);
}
:where(.lanora) .header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
:where(.lanora) .header__actions a {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s;
}
:where(.lanora) .header__actions a:hover {
  opacity: 0.7;
}

/* =========================================================
   BUTTONS
   ========================================================= */
:where(.lanora) .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
/* Nút chính – gradient (Figma 125:426) */
:where(.lanora) .btn--primary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
  background-image: var(--gradient-01);
  background-color: var(--primary-01);
  box-shadow: 0 8px 12px rgba(214, 200, 191, 0.1);
}
:where(.lanora) .btn--primary:hover {
  background-image: none;
  background-color: var(--primary-01);
}
/* Nút viền (Figma 123:402) */
:where(.lanora) .btn--outline {
  color: var(--primary-02);
  background: var(--primary-04);
  border-color: var(--primary-02);
}
:where(.lanora) .btn--outline:hover {
  color: var(--white);
  background: var(--primary-02);
  border-color: var(--secondary-01);
}

/* Mũi tên trượt (Figma "Component 3": 2 frame, hover trượt sang phải) */
:where(.lanora) .arrow-slide {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
:where(.lanora) .arrow-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
:where(.lanora) .arrow-slide img + img {
  left: -20px;
}
:where(.lanora) a:hover > .arrow-slide img,
:where(.lanora) button:hover > .arrow-slide img,
:where(.lanora) .btn:hover .arrow-slide img {
  transform: translateX(20px);
}
:where(.lanora) .arrow-slide--24 {
  width: 24px;
  height: 24px;
}
:where(.lanora) .arrow-slide--24 img {
  width: 24px;
  height: 24px;
}
:where(.lanora) .arrow-slide--24 img + img {
  left: -24px;
}
:where(.lanora) a:hover > .arrow-slide--24 img,
:where(.lanora) button:hover > .arrow-slide--24 img {
  transform: translateX(24px);
}

/* Link "XEM TẤT CẢ" (Figma 80:2252) */
:where(.lanora) .link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--text-primary);
  transition: color 0.2s;
}
:where(.lanora) .link-more:hover {
  color: var(--primary-01);
}

/* Link "ĐỌC CHI TIẾT" (Figma 272:808) */
:where(.lanora) .link-detail {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--text-primary);
}
:where(.lanora) .link-detail img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .link-detail:hover,
:where(.lanora) .blog-card:hover .link-detail {
  gap: 2px;
  color: var(--primary-01);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Nút tròn mũi tên viền tím (slider home) */
:where(.lanora) .btn-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--primary-02);
  border-radius: 99px;
  background: var(--white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s, background 0.2s;
}
:where(.lanora) .btn-circle img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .btn-circle:hover {
  background: var(--primary-04);
}
:where(.lanora) .btn-circle--prev[disabled] {
  opacity: 0;
  pointer-events: none;
}
:where(.lanora) .btn-circle--next[disabled] {
  cursor: default;
}
:where(.lanora) .btn-circle--next[disabled]:hover {
  background: var(--white);
}

/* Nút nửa tròn ở mép slider sản phẩm */
:where(.lanora) .btn-edge {
  position: absolute;
  top: calc(50% + 63.5px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(145, 55, 145, 0.1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(-50%);
  transition: background 0.2s;
}
:where(.lanora) .btn-edge img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .btn-edge:hover {
  background: rgba(145, 55, 145, 0.2);
}
:where(.lanora) .btn-edge--next {
  right: 0;
  border-radius: 99px 0 0 99px;
}
:where(.lanora) .btn-edge--prev {
  left: 0;
  border-radius: 0 99px 99px 0;
}

/* Nút tròn lớn viền tím (CTA "TƯ VẤN THIẾT KẾ" – Figma 80:2516) */
:where(.lanora) .btn-round {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  border: 1px solid var(--primary-02);
  border-radius: 999px;
  overflow: hidden;
  transition: background 0.25s;
}
:where(.lanora) .btn-round .arrow-slide--24 img:first-child {
  /* mũi tên tím mặc định */
}
:where(.lanora) .cta-link:hover .btn-round,
:where(.lanora) .btn-round:hover {
  background: var(--primary-02);
}
:where(.lanora) .btn-round__default,
:where(.lanora) .btn-round__hover {
  transition: transform 0.3s ease, opacity 0.3s;
}
:where(.lanora) .btn-round .arrow-slide--24 .btn-round__hover {
  left: -24px;
}
:where(.lanora) .cta-link:hover .btn-round .arrow-slide--24 img,
:where(.lanora) .btn-round:hover .arrow-slide--24 img {
  transform: translateX(24px);
}

/* =========================================================
   CARD SẢN PHẨM (Figma 79:1519 – Default / Hover)
   ========================================================= */
:where(.lanora) .product-card {
  position: relative;
  flex: none;
  width: 292px;
  height: 418px;
  --stroke: var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.3s;
}
:where(.lanora) .product-card__media {
  position: absolute;
  top: 0;
  left: 50%;
  width: 292px;
  height: 292px;
  transform: translateX(-50%);
  overflow: hidden;
}
:where(.lanora) .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
:where(.lanora) .product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 69.978%, rgba(0, 0, 0, 0.3));
  transition: background 0.3s;
}
:where(.lanora) .product-card__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 292px;
  height: 126px;
  background: var(--white);
}
:where(.lanora) .product-card__text {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 252px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}
:where(.lanora) .product-card__name {
  color: var(--text-primary);
  transition: color 0.3s;
}
:where(.lanora) .product-card__desc {
  color: var(--text-secondary);
}
:where(.lanora) .product-card__price {
  position: absolute;
  top: 82px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
:where(.lanora) .price {
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  color: var(--price);
}
:where(.lanora) .price-old {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
}
:where(.lanora) .price-old s {
  text-decoration-skip-ink: none;
}
:where(.lanora) .currency {
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
:where(.lanora) .product-card__cart {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  padding: 8px;
  border-radius: 999px;
  background: var(--primary-04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
:where(.lanora) .product-card__cart img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .product-card__cart:hover {
  background: #f3e3f4;
}
:where(.lanora) .product-card:hover {
  --stroke: var(--border-strong);
}
:where(.lanora) .product-card:hover .product-card__media img {
  transform: scale(1.0822); /* 292 -> 316 */
}
:where(.lanora) .product-card:hover .product-card__media::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
:where(.lanora) .product-card:hover .product-card__name {
  color: var(--secondary-02);
}

/* Nút yêu thích (Figma 79:1732 – Frame 2 / Frame 3) */
:where(.lanora) .heart-btn {
  position: absolute;
  top: 7px;
  left: 247px;
  z-index: 1;
  display: flex;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
:where(.lanora) .heart-btn img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .heart-btn .heart-btn__on {
  display: none;
}
:where(.lanora) .heart-btn.is-active {
  background: var(--white);
}
:where(.lanora) .heart-btn.is-active .heart-btn__off {
  display: none;
}
:where(.lanora) .heart-btn.is-active .heart-btn__on {
  display: block;
}

/* =========================================================
   CARD DANH MỤC (Figma 79:1683)
   ========================================================= */
:where(.lanora) .category-card {
  position: relative;
  flex: none;
  display: block;
  width: 308px;
  height: 410px;
  border-radius: 12px;
  overflow: hidden;
}
:where(.lanora) .category-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.4s ease;
}
:where(.lanora) .category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.lanora) .category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 69.978%, rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
:where(.lanora) .category-card__box {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  width: 292px;
  height: 84px;
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
:where(.lanora) .category-card__text {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
}
:where(.lanora) .category-card__name {
  color: var(--text-primary);
  transition: color 0.3s;
}
:where(.lanora) .category-card__desc {
  color: var(--text-secondary);
}
:where(.lanora) .category-card__icon {
  position: absolute;
  top: 44px;
  left: 248px;
  width: 24px;
  height: 24px;
}
:where(.lanora) .category-card__icon img {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
  transition: opacity 0.3s;
}
:where(.lanora) .category-card__icon .icon-hover {
  opacity: 0;
}
:where(.lanora) .category-card:hover .category-card__media {
  transform: scale(1.0974); /* 308x410 -> 338x450 */
}
:where(.lanora) .category-card:hover::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
:where(.lanora) .category-card:hover .category-card__name {
  color: var(--secondary-02);
}
:where(.lanora) .category-card:hover .icon-default {
  opacity: 0;
}
:where(.lanora) .category-card:hover .icon-hover {
  opacity: 1;
}

/* =========================================================
   CARD NGHỆ THUẬT LAN (Figma 218:1126)
   ========================================================= */
:where(.lanora) .art-card {
  position: relative;
  flex: none;
  display: block;
  width: 308px;
  height: 410px;
  border-radius: 12px;
  overflow: hidden;
}
:where(.lanora) .art-card__media {
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease;
}
:where(.lanora) .art-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.lanora) .art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 69.978%, rgba(0, 0, 0, 0.3));
}
:where(.lanora) .art-card__label {
  position: absolute;
  left: calc(50% + 0.5px);
  bottom: 24px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: var(--white);
  white-space: nowrap;
}
:where(.lanora) .art-card__label .arrow-slide--24 {
  display: none;
}
:where(.lanora) .art-card:hover .art-card__media {
  transform: scale(1.0585); /* 308x410 -> 326x434 */
}
:where(.lanora) .art-card:hover::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}
:where(.lanora) .art-card:hover .art-card__label .arrow-slide--24 {
  display: block;
}

/* =========================================================
   CARD BLOG (Figma 278:896)
   ========================================================= */
:where(.lanora) .blog-card {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 302px;
  --stroke: var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.3s;
}
:where(.lanora) .blog-card__media {
  position: relative;
  height: 226px;
  overflow: hidden;
  background: url("../assets/images/blog-placeholder.png") center / cover no-repeat;
}
:where(.lanora) .blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
:where(.lanora) .blog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 69.978%, rgba(0, 0, 0, 0.3));
}
:where(.lanora) .blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
}
:where(.lanora) .blog-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
:where(.lanora) .blog-card__date {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}
:where(.lanora) .blog-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
  transition: color 0.3s;
}
:where(.lanora) .blog-card:hover {
  --stroke: var(--border-strong);
}
:where(.lanora) .blog-card:hover .blog-card__media img {
  transform: scale(1.0927); /* 302x226 -> 330x246 */
}
:where(.lanora) .blog-card:hover .blog-card__title {
  color: var(--secondary-02);
}

/* =========================================================
   CTA (Figma 289:1652 / 320:4573)
   ========================================================= */
:where(.lanora) .cta {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: linear-gradient(to bottom, #fcf7f5, #fff);
}
:where(.lanora) .cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.lanora) .cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 240, 229, 0) 0%, rgba(255, 240, 229, 0.9) 25.042%, rgba(255, 255, 255, 0.85) 100%);
}
:where(.lanora) .cta__ellipse {
  position: absolute;
  left: -175px;
  top: 0;
  width: 1081.402px;
  height: 641.348px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
:where(.lanora) .cta__ellipse > div {
  position: relative;
  flex: none;
  width: 1014.475px;
  height: 392.145px;
  transform: rotate(-15deg);
}
:where(.lanora) .cta__ellipse img {
  position: absolute;
  top: -89.25%;
  left: -34.5%;
  width: 169%;
  height: 278.5%;
}
:where(.lanora) .cta__title {
  position: absolute;
  left: 406px;
  top: calc(50% - 42px);
  width: 628px;
  color: var(--secondary-02);
}
:where(.lanora) .cta-link {
  position: absolute;
  left: 1164px;
  top: 99px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Figma: chữ căn phải tại x=130, nút ở mép phải khung 202px */
  gap: 20px;
  width: 202px;
  height: 52px;
}
:where(.lanora) .cta-link__text {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--text-primary);
}

/* =========================================================
   FOOTER (Figma 292:5777)
   ========================================================= */
:where(.lanora) .footer {
  position: relative;
  height: 612px;
  overflow: hidden;
  background: var(--primary-01);
  color: var(--white);
}
:where(.lanora) .footer__bg {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 1460px;
  height: 590px;
  transform: translateX(-50%);
  object-fit: cover;
  opacity: 0.7;
  filter: blur(4px);
}
:where(.lanora) .footer__pattern {
  position: absolute;
  left: calc(50% + 13.5px);
  top: calc(50% + 57.5px);
  width: 1979px;
  height: 1231px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
:where(.lanora) .footer__pattern img {
  position: absolute;
  top: -11.78%;
  left: -7.33%;
  width: 114.66%;
  height: 123.56%;
}
:where(.lanora) .footer__brand {
  position: absolute;
  top: 60px;
  left: 80px;
  width: 302px;
  height: 440px;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:where(.lanora) .footer__brand-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
:where(.lanora) .footer__logo {
  width: 232px;
  height: 56px;
  object-fit: fill; /* Figma kéo giãn ảnh vừa khung 232x56 */
}
:where(.lanora) .footer__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:where(.lanora) .footer__intro .h6 {
  color: var(--primary-03);
}
:where(.lanora) .footer__intro p:last-child {
  opacity: 0.8;
}
:where(.lanora) .footer__social {
  display: flex;
  gap: 8px;
}
:where(.lanora) .footer__social a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  transition: background 0.2s;
}
:where(.lanora) .footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
}
:where(.lanora) .footer__badges {
  display: flex;
  align-items: center;
  gap: 16px;
}
:where(.lanora) .footer__badges img {
  height: 48px;
  object-fit: cover;
}
:where(.lanora) .footer__main {
  position: absolute;
  top: 60px;
  left: 406px;
  width: 954px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
:where(.lanora) .footer__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
:where(.lanora) .footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 302px;
}
:where(.lanora) .footer__col--wide {
  width: 628px;
}
:where(.lanora) .footer__col--grow {
  flex: 1 0 0;
  min-width: 1px;
  width: auto;
}
:where(.lanora) .footer__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
:where(.lanora) .footer__divider {
  display: flex;
  width: 100%;
  background: rgba(228, 181, 232, 0.1);
}
:where(.lanora) .footer__divider span {
  height: 2px;
  background: var(--primary-03);
}
:where(.lanora) .footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
:where(.lanora) .footer__links a {
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
:where(.lanora) .footer__links a:hover {
  opacity: 1;
  color: var(--primary-03);
}
:where(.lanora) .footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
:where(.lanora) .footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
:where(.lanora) .footer__contact-item > img {
  flex: none;
  width: 24px;
  height: 24px;
}
:where(.lanora) .footer__contact-item--grow {
  flex: 1 0 0;
  min-width: 1px;
}
:where(.lanora) .footer__address {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(.lanora) .footer__map {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}
:where(.lanora) .footer__map img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .footer__map:hover {
  opacity: 1;
}
:where(.lanora) .footer__phone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:where(.lanora) .footer__phone strong {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
:where(.lanora) .footer__phone span {
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}
:where(.lanora) .newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:where(.lanora) .newsletter__field {
  position: relative;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
}
:where(.lanora) .newsletter__field input {
  width: 100%;
  height: 100%;
  padding: 0 70px 0 15px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}
:where(.lanora) .newsletter__field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
:where(.lanora) .newsletter__field button {
  position: absolute;
  top: 50%;
  right: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 48px;
  padding: 8px;
  background: var(--white);
  transform: translateY(-50%);
}
:where(.lanora) .newsletter__icon {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
}
:where(.lanora) .newsletter__icon img {
  position: absolute;
  top: 11.63%;
  right: 4.55%;
  bottom: 9.41%;
  left: 5.23%;
  width: auto;
  height: auto;
}
:where(.lanora) .newsletter__note {
  font-size: 14px;
  line-height: 20px;
  font-style: oblique 10deg;
  opacity: 0.8;
}
:where(.lanora) .newsletter__msg {
  font-size: 14px;
  line-height: 20px;
  color: var(--primary-03);
}
:where(.lanora) .footer__bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  background: var(--primary-01);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
:where(.lanora) .footer__copyright {
  opacity: 0.8;
}
:where(.lanora) .footer__copyright strong {
  font-weight: 600;
}
:where(.lanora) .footer__slogan {
  font-style: oblique 10deg;
  color: var(--primary-03);
}

/* =========================================================
   BREADCRUMB + HERO TRANG CON
   ========================================================= */
:where(.lanora) .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}
:where(.lanora) .breadcrumb a:hover {
  color: var(--primary-01);
}
:where(.lanora) .breadcrumb .is-current {
  color: var(--primary-01);
  font-weight: 500;
}

/* =========================================================
   TOAST
   ========================================================= */
:where(.lanora) .toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--primary-01);
  color: var(--white);
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 8px 24px rgba(111, 46, 125, 0.25);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
:where(.lanora) .toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

:where(.lanora) .btn-edge[disabled] {
  cursor: default;
}
:where(.lanora) .product-card__name a:hover {
  color: inherit;
}

/* =========================================================
   SLIDER / BREADCRUMB / ĐÁNH GIÁ (dùng chung)
   ========================================================= */
:where(.lanora) .slider__track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
:where(.lanora) .slider__track::-webkit-scrollbar {
  display: none;
}
:where(.lanora) .slider__track > * {
  scroll-snap-align: start;
}
/* Không có gì để cuộn (main.js initSliders) -> ẩn mũi tên */
:where(.lanora) .is-static .slider__nav,
:where(.lanora) .is-static .btn-edge {
  display: none;
}
/* Breadcrumb (Figma item//breadcrumb 370:4075) */
:where(.lanora) .crumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--text-tertiary);
}
:where(.lanora) .crumbs img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .crumbs a {
  transition: color 0.2s;
}
:where(.lanora) .crumbs a:hover {
  color: var(--primary-01);
}
:where(.lanora) .crumbs [aria-current] {
  color: var(--text-primary);
}

:where(.lanora) .review-card {
  position: relative;
  flex: none;
  width: 414px;
  height: 320px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--white);
}
:where(.lanora) .review-card__avatar {
  position: absolute;
  top: 23px;
  left: 23px;
  width: 80px;
  height: 80px;
}
:where(.lanora) .review-card__stars {
  position: absolute;
  top: 23px;
  left: 127px;
  display: flex;
  gap: 4px;
}
:where(.lanora) .review-card__stars img {
  width: 20px;
  height: 20px;
}
:where(.lanora) .review-card__text {
  position: absolute;
  top: 59px;
  left: 127px;
  width: 262px;
  color: var(--text-primary);
}
:where(.lanora) .review-card__line {
  position: absolute;
  top: 211px;
  left: 127px;
  width: 262px;
  height: 1px;
  background: var(--border-default);
}
:where(.lanora) .review-card__quote {
  position: absolute;
  top: 244px;
  left: 23px;
  width: 56px;
  height: 40px;
}
:where(.lanora) .review-card__author {
  position: absolute;
  left: 127px;
  bottom: 22px;
  width: 262px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:where(.lanora) .review-card__role {
  font-size: 14px;
  line-height: 20px;
  font-style: oblique 10deg;
  color: var(--primary-02);
}

/* =========================================================
   HERO TRANG CON (Figma 362:3309 / 362:3162)
   ========================================================= */
:where(.lanora) .page-hero {
  position: relative;
  height: 457px;
  overflow: hidden;
  background: #e6e6e6;
}
:where(.lanora) .page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.lanora) .page-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 1143px;
  height: 457px;
}
:where(.lanora) .page-hero__content {
  position: absolute;
  top: 136px;
  left: 80px;
  width: 519px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
:where(.lanora) .page-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
:where(.lanora) .page-hero__titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:where(.lanora) .page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 62px;
  white-space: nowrap;
  background: linear-gradient(to right, #6f2e7d, #8820a6 50%, #a938cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 16px #fff);
}
:where(.lanora) .page-hero__subtitle {
  color: var(--primary-01);
  text-shadow: 0 0 12px #fff;
}
:where(.lanora) .page-hero__desc {
  color: var(--text-secondary);
}

/* =========================================================
   PROGRESSIVE BLUR (Figma "Progressive blur" – code xuất ra bị mất)
   Dựng bằng 6 lớp backdrop-filter, mỗi lớp mờ hơn và phủ vùng hẹp hơn.
   Thông số đặt qua data-pblur="sigmaMax|hướng|start%|end%" (main.js tạo lớp).
   ========================================================= */
:where(.lanora) .pblur {
  position: absolute;
  pointer-events: none;
}
:where(.lanora) .pblur > i {
  position: absolute;
  inset: 0;
}

/* =========================================================
   MENU MOBILE (Figma 567:5333 "Homepage - Menu")
   Chỉ hiện ở mobile; trên desktop ẩn hoàn toàn.
   ========================================================= */
:where(.lanora) .header__burger,
:where(.lanora) .mnav {
  display: none;
}

/* =========================================================
   MOBILE (Figma "UI Mobile" – frame 393px)
   ========================================================= */
@media (max-width: 767px) {
  /* ---------- Header (Figma 567:4013) ---------- */
  :where(.lanora) .header,
  :where(.lanora) .header.is-scrolled,
  :where(.lanora) .header--solid {
    left: 0;
    width: 100%;
    height: 64px;
    padding: 0 16px;
    transform: none;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :where(.lanora) .header__burger {
    position: absolute;
    top: 20px;
    left: 16px;
    display: block;
    width: 24px;
    height: 24px;
  }
  :where(.lanora) .header__burger img {
    width: 24px;
    height: 24px;
  }
  :where(.lanora) .header__logo {
    position: absolute;
    left: 50%;
    top: calc(50% + 0.5px);
    width: 141px;
    height: 34px;
    transform: translate(-50%, -50%);
  }
  :where(.lanora) .header__nav {
    display: none;
  }
  :where(.lanora) .header__actions {
    position: absolute;
    top: 20px;
    right: 20px;
    gap: 16px;
  }
  :where(.lanora) .header__actions a:nth-child(-n + 2) {
    display: none;
  }

  /* ---------- Menu mobile ---------- */
  :where(.lanora) .mnav {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.3s;
  }
  :where(.lanora) .mnav.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  :where(.lanora) .mnav__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s;
  }
  :where(.lanora) .mnav.is-open .mnav__backdrop {
    opacity: 0.4;
  }
  :where(.lanora) .mnav__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% - 48px);
    max-width: 345px;
    overflow: hidden auto;
    background: var(--white);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  :where(.lanora) .mnav.is-open .mnav__panel {
    transform: none;
  }
  :where(.lanora) .mnav__inner {
    position: relative;
    min-height: 100%;
    padding: 80px 16px 166px;
  }
  :where(.lanora) .mnav__head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    border-bottom: 1px solid var(--border-subtle);
  }
  :where(.lanora) .mnav__close {
    position: absolute;
    top: 20px;
    left: 16px;
    width: 24px;
    height: 24px;
  }
  :where(.lanora) .mnav__close img {
    width: 24px;
    height: 24px;
  }
  :where(.lanora) .mnav__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--white);
  }
  :where(.lanora) .mnav__search input {
    flex: 1 0 0;
    min-width: 1px;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
  }
  :where(.lanora) .mnav__search input::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
  }
  :where(.lanora) .mnav__search input::-webkit-search-cancel-button {
    display: none;
  }
  :where(.lanora) .mnav__search button {
    display: flex;
    width: 20px;
    height: 20px;
  }
  :where(.lanora) .mnav__search button img {
    width: 20px;
    height: 20px;
  }
  :where(.lanora) .mnav__links {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }
  :where(.lanora) .mnav__links a {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: var(--text-primary);
  }
  :where(.lanora) .mnav__links a.is-active {
    color: var(--primary-01);
  }
  :where(.lanora) .mnav__contact {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  :where(.lanora) .mnav__contact::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    border-top: 1px solid var(--border-subtle);
  }
  :where(.lanora) .mnav__phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 50px;
  }
  :where(.lanora) .mnav__phone a {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: var(--text-primary);
  }
  :where(.lanora) .mnav__phone span {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
  }
  :where(.lanora) .mnav__social {
    display: flex;
    gap: 8px;
  }
  :where(.lanora) .mnav__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--primary-02);
    border-radius: 999px;
  }
  html.mnav-open {
    overflow: hidden;
  }

  /* ---------- Nút ---------- */
  :where(.lanora) .btn {
    padding: 11px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  /* ---------- Slider: kéo ngang, lề 16px ---------- */
  :where(.lanora) .slider__track {
    scroll-padding: 0 16px;
  }
  :where(.lanora) .slider__nav,
  :where(.lanora) .btn-edge {
    display: none;
  }

  /* ---------- Card sản phẩm (Figma 398:9114 – Card 251x369) ---------- */
  :where(.lanora) .product-card {
    width: 251px;
    height: 369px;
  }
  :where(.lanora) .product-card__media {
    width: 251px;
    height: 251px;
  }
  :where(.lanora) .product-card__body {
    width: 251px;
    height: 118px;
  }
  :where(.lanora) .product-card__text {
    top: 16px;
    left: 16px;
    width: 219px;
  }
  :where(.lanora) .product-card__price {
    top: 82px;
    left: 16px;
    align-items: flex-end;
  }
  :where(.lanora) .product-card .price {
    display: inline-flex; /* Figma mobile: "8,500,000đ" không có dấu cách */
    font-size: 14px;
    line-height: 20px;
  }
  :where(.lanora) .product-card__cart {
    right: 16px;
    bottom: 16px;
  }
  /* Nút tim: Figma mobile giữ left 247px (toạ độ card desktop) nên nút nằm ngoài card 174/251px.
     Neo theo mép phải với cùng khoảng cách như desktop (292 - 247 - 36 = 9px). */
  :where(.lanora) .product-card .heart-btn {
    left: auto;
    right: 9px;
  }
  :where(.lanora) .product-card:hover .product-card__media img {
    transform: none;
  }

  /* Card nhỏ 2 cột (Figma 532:9775 – 174x292): lưới Danh mục + Sản phẩm liên quan */
  :where(.lanora) .catalog__grid .product-card,
  :where(.lanora) .related__slider .product-card {
    width: 174px;
    height: 292px;
  }
  :where(.lanora) .catalog__grid .product-card {
    width: auto;
  }
  :where(.lanora) .catalog__grid .product-card__media,
  :where(.lanora) .related__slider .product-card__media {
    left: calc(50% + 0.25px);
    width: calc(100% + 0.5px);
    height: 174.5px;
  }
  :where(.lanora) .catalog__grid .product-card__body,
  :where(.lanora) .related__slider .product-card__body {
    width: 100%;
    height: 118px;
  }
  :where(.lanora) .catalog__grid .product-card__text,
  :where(.lanora) .related__slider .product-card__text {
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    gap: 4px;
  }
  :where(.lanora) .catalog__grid .product-card__name,
  :where(.lanora) .related__slider .product-card__name {
    font-size: 16px;
    line-height: 24px;
  }
  :where(.lanora) .catalog__grid .product-card__price,
  :where(.lanora) .related__slider .product-card__price {
    top: auto;
    bottom: 12px;
    left: 12px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2px;
  }
  :where(.lanora) .catalog__grid .product-card__cart,
  :where(.lanora) .related__slider .product-card__cart {
    right: 12px;
    bottom: 12px;
    padding: 6px;
  }

  /* ---------- Card danh mục (Figma 398:9104 – 267x355) ---------- */
  :where(.lanora) .category-card {
    width: 267px;
    height: 355px;
  }
  :where(.lanora) .category-card__box {
    width: 251px;
    height: 82px;
  }
  :where(.lanora) .category-card__text {
    top: 16px;
    left: 16px;
    width: 219px;
    gap: 6px;
  }
  :where(.lanora) .category-card__icon {
    top: auto;
    left: auto;
    right: 16px;
    bottom: 16px;
  }
  :where(.lanora) .category-card:hover .category-card__media {
    transform: none;
  }

  /* ---------- Card blog (Figma 419:10997 – 267px) ---------- */
  :where(.lanora) .blog-card {
    width: 267px;
  }
  :where(.lanora) .blog-card__media {
    height: 200px;
  }
  :where(.lanora) .blog-card__body {
    gap: 16px;
    padding: 20px;
  }
  :where(.lanora) .blog-card__date {
    font-size: 13px;
    line-height: 18px;
  }
  :where(.lanora) .blog-card__title {
    font-size: 16px;
    line-height: 24px;
  }
  :where(.lanora) .blog-card:hover .blog-card__media img {
    transform: none;
  }

  /* ---------- Card đánh giá (Figma 413:10611 – 345x261) ---------- */
  :where(.lanora) .review-card {
    width: 345px;
    height: 261px;
  }
  :where(.lanora) .review-card__stars {
    top: 19px;
    left: 19px;
  }
  :where(.lanora) .review-card__text {
    top: 55px;
    left: 19px;
    width: 305px;
    font-size: 14px;
    line-height: 20px;
  }
  :where(.lanora) .review-card__line {
    top: 159px;
    left: 19px;
    width: 305px;
  }
  :where(.lanora) .review-card__avatar {
    top: 184px;
    left: 19px;
    width: 56px;
    height: 56px;
  }
  :where(.lanora) .review-card__quote {
    top: 184px;
    left: 281px;
    width: 43px;
    height: 31px;
    content: url("../assets/icons/quote-m.svg");
  }
  :where(.lanora) .review-card__author {
    top: 187px;
    bottom: auto;
    left: 93px;
    width: 225px;
  }
  :where(.lanora) .review-card__role {
    font-size: 13px;
    line-height: 18px;
  }

  /* ---------- CTA (Figma 413:10785 – cao 293px) ---------- */
  :where(.lanora) .cta {
    height: 293px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 16px;
  }
  :where(.lanora) .cta .pblur {
    display: none;
  }
  :where(.lanora) .cta__overlay {
    background: linear-gradient(117.98deg, rgba(255, 240, 229, 0) 0%, rgba(255, 240, 229, 0.9) 25.278%, rgba(255, 255, 255, 0.85) 101.55%);
  }
  :where(.lanora) .cta__ellipse {
    left: calc(50% + 41.08px);
    top: calc(50% + 22.58px);
    width: 821.169px;
    height: 472.157px;
    transform: translate(-50%, -50%);
  }
  :where(.lanora) .cta__ellipse > div {
    width: 774.786px;
    height: 281.21px;
  }
  :where(.lanora) .cta__ellipse img {
    top: -124.46%;
    left: -45.17%;
    width: 190.34%;
    height: 348.92%;
    content: url("../assets/images/cta-ellipse-m.svg");
  }
  :where(.lanora) .cta__title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    font-size: 24px;
    line-height: 31px;
    text-align: center;
  }
  :where(.lanora) .cta-link {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    justify-content: center;
    gap: 12px;
  }
  :where(.lanora) .cta-link .btn-round {
    padding: 11px;
  }

  /* ---------- Footer (Figma 419:11063 – cao 1092px) ---------- */
  :where(.lanora) .footer {
    height: 1092px;
  }
  :where(.lanora) .footer__bg {
    top: -4px;
    left: calc(50% + 0.5px);
    width: 402px;
    height: 1038px;
  }
  :where(.lanora) .footer__pattern {
    left: 50%;
    top: 70px;
    width: 1669px;
    height: 1039px;
    transform: translateX(-50%);
  }
  :where(.lanora) .footer__pattern img {
    top: -13.96%;
    left: -8.69%;
    width: 117.38%;
    height: 127.91%;
    content: url("../assets/images/footer-pattern-m.svg");
  }
  :where(.lanora) .footer__brand {
    display: contents;
  }
  :where(.lanora) .footer__brand-top {
    position: absolute;
    top: 32px;
    left: 16px;
    right: 16px;
    gap: 24px;
  }
  :where(.lanora) .footer__intro {
    gap: 8px;
  }
  :where(.lanora) .footer__badges {
    position: absolute;
    top: 932px;
    left: 12px;
  }
  :where(.lanora) .footer__main {
    top: 306px;
    left: 16px;
    right: 16px;
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  :where(.lanora) .footer__row {
    display: contents;
  }
  :where(.lanora) .footer__col,
  :where(.lanora) .footer__col--wide,
  :where(.lanora) .footer__col--grow {
    width: auto;
    min-width: 0;
    gap: 12px;
  }
  /* Thứ tự mobile: Liên hệ | Về Lanora / Bộ sưu tập | Chính sách / Nhận tin */
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(1) { grid-area: 1 / 2; }
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(2) { grid-area: 2 / 1; }
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(3) { grid-area: 2 / 2; }
  :where(.lanora) .footer__col--wide { grid-area: 1 / 1; }
  :where(.lanora) .footer__col--grow { grid-area: 3 / 1 / 4 / 3; gap: 12px; }
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(1) .footer__divider span { width: 76px !important; }
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(2) .footer__divider span { width: 78px !important; }
  :where(.lanora) .footer__row:first-child .footer__col:nth-child(3) .footer__divider span { width: 83px !important; }
  :where(.lanora) .footer__col--wide .footer__divider span,
  :where(.lanora) .footer__col--grow .footer__divider span { width: 127px !important; }
  :where(.lanora) .footer__col--grow .newsletter {
    margin-top: 4px; /* Figma: cụm tiêu đề cách ô nhập 16px */
  }
  :where(.lanora) .footer__title {
    font-size: 13px;
    line-height: 18px;
  }
  :where(.lanora) .footer__links {
    font-size: 14px;
    line-height: 20px;
  }
  :where(.lanora) .footer__contact {
    flex-direction: column;
    gap: 12px;
  }
  :where(.lanora) .footer__contact-item {
    width: 100% !important;
  }
  :where(.lanora) .footer__address {
    gap: 4px;
  }
  :where(.lanora) .footer__address .body-16 {
    font-size: 14px;
    line-height: 20px;
  }
  :where(.lanora) .footer__phone strong {
    font-size: 15px;
    line-height: 24px;
  }
  :where(.lanora) .footer__phone span {
    font-size: 13px;
    line-height: 18px;
  }
  :where(.lanora) .newsletter__note {
    font-size: 13px;
    line-height: 18px;
  }
  :where(.lanora) .copy-sym {
    font-size: 8.5px; /* Figma mobile vẽ "©" nhỏ, nâng cao (span do main.js tạo) */
    line-height: 0;
    vertical-align: 4px;
  }
  :where(.lanora) .footer__bottom {
    height: auto;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    white-space: normal;
  }

  /* ---------- Hero trang con (Figma 526:8072 / 555:14823 – cao 550px) ---------- */
  :where(.lanora) .page-hero {
    height: 550px;
  }
  :where(.lanora) .page-hero__image {
    inset: auto;
    top: 205px; /* ảnh 393x393, bottom -48px */
    left: -134.54%;
    width: 300%;
    height: 393px;
    object-fit: fill;
  }
  :where(.lanora) .page-hero--service .page-hero__image {
    left: -132.91%;
  }
  :where(.lanora) .page-hero .pblur {
    width: 100% !important;
    height: 550px !important;
  }
  :where(.lanora) .page-hero__overlay {
    width: 100%;
    height: 550px;
    content: url("../assets/images/hero-category-overlay-m.svg");
  }
  :where(.lanora) .page-hero__content {
    top: 112px;
    left: 16px;
    right: 16px;
    width: auto;
    gap: 16px;
  }
  :where(.lanora) .page-hero__text {
    gap: 16px;
  }
  :where(.lanora) .page-hero__titles {
    gap: 8px;
  }
  :where(.lanora) .page-hero__title {
    font-size: 32px;
    line-height: 42px;
    white-space: normal;
  }
  :where(.lanora) .page-hero__subtitle {
    font-size: 18px;
    line-height: 26px;
  }
  :where(.lanora) .page-hero__desc {
    font-size: 14px;
    line-height: 20px;
  }
  :where(.lanora) .crumbs {
    font-size: 13px;
    line-height: 18px;
  }
  :where(.lanora) .crumbs img {
    width: 18px;
    height: 18px;
  }
}

/* =========================================================
   MÀN RỘNG HƠN 1440px – nền tràn, nội dung giữ khung 1440
   (biến --bleed khai báo ở base.css)
   ========================================================= */
@media (min-width: 1441px) {
  /* Header cố định: nền full, logo / menu / icon giữ lề 80px của khung 1440 */
  :where(.lanora) .header {
    left: 0;
    width: 100%;
    transform: none;
    padding: 0 calc((100% - 1440px) / 2 + 80px);
  }

  /* CTA */
  :where(.lanora) .cta {
    overflow: visible;
    clip-path: inset(0 calc(-1 * var(--bleed)));
  }
  :where(.lanora) .cta__bg,
  :where(.lanora) .cta__overlay,
  :where(.lanora) .cta .pblur {
    left: calc(-1 * var(--bleed)) !important;
    right: calc(-1 * var(--bleed)) !important;
    width: auto;
  }
  :where(.lanora) .cta__ellipse {
    left: calc(-175px - var(--bleed));
  }

  /* Footer: nền tím + ảnh nền + hoa văn full, nội dung giữ chỗ */
  :where(.lanora) .footer {
    overflow: visible;
    clip-path: inset(0 calc(-1 * var(--bleed)));
    box-shadow: 0 0 0 100vmax var(--primary-01);
  }
  :where(.lanora) .footer__bg {
    width: calc(100cqw + 20px);
  }
  :where(.lanora) .footer__bottom {
    left: calc(-1 * var(--bleed));
    width: 100cqw;
    padding: 0 calc(var(--bleed) + 80px);
  }

  /* Hero trang con */
  :where(.lanora) .page-hero {
    overflow: visible;
    clip-path: inset(0 calc(-1 * var(--bleed)));
    box-shadow: 0 0 0 100vmax #e6e6e6;
  }
  :where(.lanora) .page-hero__image {
    left: calc(-1 * var(--bleed));
    width: 100cqw;
  }
  :where(.lanora) .page-hero__overlay,
  :where(.lanora) .page-hero .pblur {
    left: calc(-1 * var(--bleed)) !important;
    width: calc(1143px + var(--bleed)) !important;
  }
}