/* =====================================================================
   RYDERST - Trang chủ (thiết kế)
   Mọi màu / font / bo góc / bóng đổ nằm ở khối :root bên dưới: đổi một chỗ là đổi cả trang.
   Tiền tố "rd-" cho toàn bộ class để không đụng Bootstrap 5 khi chuyển sang Razor.
   Mỗi khối trang (header, hero, new, hot/best, categories, flash sale, footer) có một mục riêng,
   tương ứng một partial view.
   ===================================================================== */

:root {
    /* ---- Màu ---- */
    --rd-bg: #ffffff;
    --rd-ink: #1b1c1d;                 /* chữ chính (gần đen) */
    --rd-ink-soft: #5d6064;            /* chữ phụ */
    --rd-line: #e9e9e6;
    --rd-card-bg: #f1f1ef;             /* nền xám nhạt của ảnh sản phẩm */
    --rd-accent: #c9de4c;              /* màu nhấn: xanh vàng chanh (nét cọ, nhãn) */
    --rd-accent-deep: #6d7b10;         /* olive đậm: chữ viết tay nhấn */
    --rd-sale: #e53935;                /* nhãn giảm giá */
    --rd-flame: #f26b21;
    --rd-star: #f6b21b;
    --rd-footer: #232527;              /* nền footer than đậm */
    --rd-footer-text: #c9cbce;
    --rd-tape: rgba(226, 230, 150, .88);

    /* ---- Font ---- */
    --rd-font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rd-font-script: "Dancing Script", "Segoe Script", cursive;   /* chữ viết tay, có đủ dấu tiếng Việt */

    /* ---- Bo góc, bóng, khoảng cách ---- */
    --rd-radius-sm: 8px;
    --rd-radius: 14px;
    --rd-radius-lg: 22px;
    --rd-radius-pill: 999px;
    --rd-shadow: 0 6px 24px rgba(20, 22, 24, .07);
    --rd-shadow-soft: 0 2px 10px rgba(20, 22, 24, .06);
    --rd-container: 1320px;
    --rd-gutter: 40px;
    --rd-header-h: 68px;
    --rd-section-gap: 56px;
}

/* ---------- Nền tảng (chỉ áp dụng cho phần tử rd-*, không đụng các trang khác) ---------- */
:where(button[class^="rd-"]) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:where(a[class^="rd-"], .rd-header a, .rd-footer a, .rd-section a, .rd-flash a, .rd-hero a) { color: inherit; text-decoration: none; }
:where(.rd-header, .rd-hero, .rd-section, .rd-flash, .rd-footer) :where(h1, h2, h3, h4, p, ul, figure) { margin: 0; padding: 0; }
:where(.rd-header, .rd-section, .rd-flash, .rd-footer) :where(ul) { list-style: none; }
:where(.rd-header, .rd-hero, .rd-section, .rd-flash, .rd-footer) :where(img, svg) { display: block; max-width: 100%; }
.rd-header, .rd-hero, .rd-section, .rd-flash, .rd-footer { font-family: var(--rd-font-body); color: var(--rd-ink); line-height: 1.5; font-size: 15px; }
.rd-header :focus-visible, .rd-hero :focus-visible, .rd-section :focus-visible, .rd-flash :focus-visible, .rd-footer :focus-visible { outline: 2px solid var(--rd-ink); outline-offset: 3px; border-radius: 4px; }
.rd-footer :focus-visible { outline-color: var(--rd-accent); }
.rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rd-container { width: 100%; max-width: var(--rd-container); margin-inline: auto; padding-inline: var(--rd-gutter); }
.rd-main-spacer { height: 0; }
.rd-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rd-icon--fill { fill: currentColor; stroke: none; }
.rd-script { font-family: var(--rd-font-script); font-weight: 700; }

/* ---------- Khung ảnh giữ chỗ (thay bằng <img> thật khi có ảnh) ---------- */
.rd-ph {
    position: relative; display: flex; align-items: flex-end; justify-content: center;
    width: 100%; height: 100%; min-height: 80px; padding: 10px; overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 10px, rgba(255,255,255,0) 10px 20px),
        var(--ph, #e4e3df);
    color: #6a6c70; font-size: 11px; line-height: 1.35; text-align: center;
}
.rd-ph > span { background: rgba(255,255,255,.72); padding: 3px 8px; border-radius: 6px; max-width: 92%; }
.rd-ph--center { align-items: center; }

/* ---------- Nút ---------- */
.rd-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: var(--rd-radius-pill);
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.rd-btn:hover { transform: translateY(-2px); }
.rd-btn .rd-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.rd-btn--accent { background: #fff; color: var(--rd-ink); border: 2px solid var(--rd-accent); box-shadow: 0 0 0 3px rgba(201,222,76,.25); }
.rd-btn--dark { background: var(--rd-ink); color: #fff; }
.rd-link-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rd-link-all .rd-icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .2s; }
.rd-link-all:hover .rd-icon { transform: translateX(3px); }
.rd-round-btn {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: var(--rd-shadow); transition: transform .2s, background .2s;
}
.rd-round-btn:hover { transform: scale(1.08); background: var(--rd-accent); }

/* Nét cọ dưới chữ (chữ nằm trên, nét cọ nằm sau) */
.rd-brush { position: relative; z-index: 0; display: inline-block; }
.rd-brush::after {
    content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: .04em; height: .34em;
    background: var(--rd-accent); border-radius: 62% 38% 55% 45% / 100% 100% 40% 40%;
    transform: rotate(-1.2deg) skewX(-14deg);
}

/* Nhãn băng keo */
.rd-tape {
    position: absolute; z-index: 3; padding: 4px 16px; font-family: var(--rd-font-script); font-weight: 700; font-size: 20px;
    color: #4d5a07; background: var(--rd-tape); box-shadow: 0 1px 4px rgba(0,0,0,.12);
    clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 3% 96%, 0 50%);
}

/* =====================================================================
   1. HEADER  (partial: _Header)
   ===================================================================== */
.rd-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--rd-line); }
.rd-header__inner { display: flex; align-items: center; gap: 28px; height: var(--rd-header-h); }
.rd-logo { display: inline-flex; flex-direction: column; line-height: 1; transform: rotate(-2deg); flex: 0 0 auto; }
.rd-logo__word { font-family: var(--rd-font-script); font-weight: 700; font-size: 34px; letter-spacing: .02em; }
.rd-logo__line { display: block; height: 6px; margin-top: -4px; background: var(--rd-accent); border-radius: 60% 40% 50% 50% / 100% 100% 40% 40%; transform: skewX(-18deg); }
.rd-nav { display: flex; align-items: center; gap: 30px; margin-inline: auto; }
.rd-nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #3a3c3f; }
.rd-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rd-ink); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.rd-nav__link:hover::after, .rd-nav__link.is-active::after, .rd-nav__item:focus-within > .rd-nav__link::after { transform: scaleX(1); }
.rd-nav__link.is-active { color: var(--rd-ink); }
.rd-nav__link .rd-icon { width: 12px; height: 12px; stroke-width: 2.4; }
.rd-nav__item { position: relative; }
.rd-dropdown {
    position: absolute; left: -24px; top: 100%; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px 28px;
    padding: 22px 28px; background: #fff; border-radius: var(--rd-radius); box-shadow: 0 16px 40px rgba(20,22,24,.14);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; min-width: 560px;
}
.rd-nav__item:hover > .rd-dropdown, .rd-nav__item:focus-within > .rd-dropdown { opacity: 1; visibility: visible; transform: none; }
.rd-dropdown h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.rd-dropdown a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--rd-ink-soft); }
.rd-dropdown a:hover { color: var(--rd-ink); text-decoration: underline; text-decoration-color: var(--rd-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rd-header__tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.rd-search { display: flex; align-items: center; width: 240px; height: 40px; padding: 0 6px 0 16px; background: #f4f4f2; border: 1px solid #ecece8; border-radius: var(--rd-radius-pill); }
.rd-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--rd-ink); }
.rd-search input:focus { outline: none; }
.rd-search:focus-within { background: #fff; border-color: var(--rd-ink); }
.rd-search button { display: grid; place-items: center; width: 32px; height: 32px; }
.rd-icon-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: background .2s; }
.rd-icon-btn:hover { background: #f1f1ee; }
.rd-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--rd-sale); border-radius: var(--rd-radius-pill); }
.rd-burger { display: none; }


/* =====================================================================
   2. HERO SLIDER  (partial: _HeroSlider)
   ===================================================================== */
.rd-hero { position: relative; height: clamp(360px, 31vw, 460px); overflow: hidden; background: #8e8a82; color: #fff; }
.rd-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.rd-hero__slide.is-active { opacity: 1; visibility: visible; }
.rd-hero__bg { position: absolute; inset: 0; }
.rd-hero__bg .rd-ph { justify-content: flex-end; align-items: flex-end; padding: 16px 90px; }
.rd-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.18) 48%, rgba(20,20,20,0) 70%); }
.rd-hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 112px; max-width: 700px; }
.rd-hero__eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.rd-hero__title { margin: 12px 0 14px; font-family: var(--rd-font-script); font-weight: 700; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.rd-hero__desc { max-width: 380px; margin-bottom: 22px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.9); }
.rd-hero__quote { position: absolute; z-index: 2; right: 8%; top: 18%; max-width: 240px; font-family: var(--rd-font-script); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; transform: rotate(-9deg); text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.rd-hero__quote svg { width: 46px; height: 46px; margin: 10px 0 0 64px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; transform: rotate(9deg); }
.rd-hero__arrow { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; color: var(--rd-ink); }
.rd-hero__arrow--prev { left: 24px; }
.rd-hero__arrow--next { right: 24px; }
.rd-hero__dots { position: absolute; z-index: 5; left: 112px; bottom: 22px; display: flex; gap: 8px; }
.rd-hero__dot { width: 9px; height: 9px; border-radius: var(--rd-radius-pill); border: 1.5px solid #fff; transition: width .25s, background .25s; }
.rd-hero__dot.is-active { width: 26px; background: var(--rd-accent); border-color: var(--rd-accent); }

/* =====================================================================
   Tiêu đề khối dùng chung
   ===================================================================== */
.rd-section { padding-top: var(--rd-section-gap); }
.rd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rd-head__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rd-head__script { font-family: var(--rd-font-script); font-weight: 700; font-size: 54px; line-height: .9; color: var(--rd-accent-deep); transform: rotate(-8deg); }
.rd-head__title { font-size: 20px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.rd-head__sub { margin-top: 2px; font-size: 12.5px; color: var(--rd-ink-soft); }

/* =====================================================================
   3. SẢN PHẨM MỚI  (partial: _NewArrivals)
   ===================================================================== */
.rd-new__body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: center; }
.rd-polaroid { position: relative; margin: 6px 0 0 6px; padding: 12px 12px 40px; background: #fff; box-shadow: 0 10px 30px rgba(20,22,24,.16); transform: rotate(-5deg); }
.rd-polaroid__img { aspect-ratio: 4 / 4.6; }
.rd-polaroid__text { position: absolute; z-index: 2; left: 26px; top: 34px; font-family: var(--rd-font-script); font-weight: 700; font-size: 38px; line-height: 1; color: #fff; transform: rotate(-9deg); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.rd-polaroid .rd-tape { top: -13px; left: 50%; translate: -50% 0; transform: rotate(3deg); font-size: 16px; }
.rd-sticker {
    position: absolute; z-index: 3; left: 10px; bottom: -4px; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%;
    background: #fff; border: 2px dashed #c9cbc4; box-shadow: var(--rd-shadow-soft);
    font-family: var(--rd-font-script); font-weight: 700; font-size: 20px; line-height: 1; text-align: center; transform: rotate(-12deg); color: var(--rd-ink);
}
.rd-carousel { position: relative; min-width: 0; }
.rd-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.rd-carousel__track::-webkit-scrollbar { display: none; }
.rd-carousel__next { position: absolute; z-index: 4; right: -14px; top: 38%; }
.rd-carousel__prev { position: absolute; z-index: 4; left: -14px; top: 38%; display: none; }
.rd-carousel.has-scrolled .rd-carousel__prev { display: grid; }

.rd-card { position: relative; scroll-snap-align: start; min-width: 0; }
.rd-card__media { position: relative; aspect-ratio: 3 / 3.7; border-radius: var(--rd-radius-sm); overflow: hidden; background: var(--rd-card-bg); }
.rd-card__media .rd-ph { transition: transform .5s; }
.rd-card:hover .rd-card__media .rd-ph { transform: scale(1.04); }
.rd-label { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 2px 10px; font-size: 10.5px; font-weight: 700; border-radius: var(--rd-radius-pill); background: var(--rd-accent); color: #3b4505; }
.rd-label--hot { background: var(--rd-sale); color: #fff; letter-spacing: .05em; }
.rd-label--best { background: #fff; color: var(--rd-ink); letter-spacing: .05em; box-shadow: var(--rd-shadow-soft); }
.rd-card__name { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.rd-card__name:hover { text-decoration: underline; text-decoration-color: var(--rd-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rd-card__price { margin-top: 6px; font-size: 14px; font-weight: 700; }
.rd-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.rd-dots { display: flex; gap: 6px; }
.rd-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0,0,0,.14); }
.rd-heart { color: #6a6c70; transition: color .2s, transform .2s; }
.rd-heart:hover { transform: scale(1.15); color: var(--rd-sale); }
.rd-heart[aria-pressed="true"] { color: var(--rd-sale); }
.rd-heart[aria-pressed="true"] .rd-icon { fill: currentColor; }
.rd-heart .rd-icon { width: 18px; height: 18px; }

/* =====================================================================
   4. HOT + BÁN CHẠY  (partial: _HotAndBestSeller)
   ===================================================================== */
.rd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rd-panel { padding: 22px 22px 24px; background: #fff; border-radius: var(--rd-radius-lg); box-shadow: var(--rd-shadow); }
.rd-panel .rd-head { margin-bottom: 14px; }
.rd-panel__icon { display: grid; place-items: center; width: 40px; height: 40px; }
.rd-panel__icon .rd-icon { width: 34px; height: 34px; }
.rd-panel__grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 14px; }
.rd-panel__small { display: grid; gap: 12px; align-content: start; }
.rd-big__media { position: relative; aspect-ratio: 1 / 1.12; border-radius: var(--rd-radius-sm); overflow: hidden; }
.rd-big .rd-card__name { font-size: 12.5px; }
.rd-big__price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rd-big__price strong { font-size: 18px; }
.rd-old { font-size: 12px; color: #9a9ca0; text-decoration: line-through; }
.rd-off { padding: 1px 8px; font-size: 11px; font-weight: 700; color: #fff; background: var(--rd-sale); border-radius: var(--rd-radius-pill); }
.rd-big .rd-tape { top: 62px; right: -6px; font-size: 22px; transform: rotate(8deg); }
.rd-mini__media { aspect-ratio: 16 / 9.2; border-radius: var(--rd-radius-sm); overflow: hidden; background: var(--rd-card-bg); }
.rd-mini__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rd-mini__row .rd-card__name { margin: 0; display: flex; align-items: center; gap: 5px; }
.rd-mini__row .rd-icon { width: 13px; height: 13px; color: var(--rd-flame); }
.rd-mini .rd-card__price { margin-top: 2px; }

/* =====================================================================
   5. DANH MỤC  (partial: _Categories)
   ===================================================================== */
.rd-cats { position: relative; }
.rd-cats__arrow { position: absolute; left: -44px; top: 36px; width: 70px; height: 54px; stroke: var(--rd-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-cats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.rd-cat { display: block; }
.rd-cat__img { aspect-ratio: 1 / .82; filter: drop-shadow(0 6px 10px rgba(20,22,24,.18)); transition: transform .3s; }
.rd-cat:hover .rd-cat__img { transform: rotate(-1.5deg) scale(1.03); }
.rd-cat__img > div { width: 100%; height: 100%; clip-path: polygon(2% 7%, 9% 2%, 17% 6%, 26% 1%, 37% 5%, 48% 0, 59% 4%, 70% 1%, 82% 5%, 93% 1%, 99% 8%, 97% 21%, 100% 34%, 96% 47%, 100% 61%, 97% 75%, 99% 89%, 93% 97%, 82% 100%, 70% 96%, 58% 100%, 47% 96%, 36% 100%, 25% 96%, 14% 99%, 5% 96%, 1% 88%, 3% 74%, 0 60%, 3% 47%, 1% 33%, 4% 20%); }
.rd-cat:nth-child(even) .rd-cat__img > div { clip-path: polygon(1% 5%, 11% 1%, 21% 5%, 33% 0, 44% 4%, 55% 1%, 66% 5%, 78% 0, 90% 4%, 99% 2%, 97% 15%, 100% 28%, 96% 42%, 99% 56%, 97% 70%, 100% 84%, 94% 96%, 83% 99%, 72% 95%, 61% 100%, 50% 96%, 39% 99%, 28% 95%, 17% 100%, 7% 97%, 2% 90%, 4% 76%, 0 62%, 3% 48%, 1% 34%, 4% 20%); }
.rd-cat__name { display: flex; align-items: center; justify-content: space-between; margin: 10px 8px 0; font-size: 12.5px; font-weight: 500; }
.rd-cat__name .rd-icon { width: 18px; height: 18px; color: var(--rd-sale); stroke-width: 2.2; }

/* =====================================================================
   6. FLASH SALE  (partial: _FlashSale)
   ===================================================================== */
.rd-flash { position: relative; margin-top: var(--rd-section-gap); height: clamp(210px, 17vw, 250px); overflow: hidden; background: #7d9aa8; color: var(--rd-ink); }
.rd-flash__bg { position: absolute; inset: 0; }
.rd-flash__bg .rd-ph { --ph: #bfd0d8; align-items: flex-start; justify-content: flex-start; padding: 12px 20px; }
.rd-flash__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; align-items: center; height: 100%; }
.rd-flash__title { position: relative; font-family: var(--rd-font-script); font-weight: 700; font-size: clamp(40px, 4.2vw, 58px); line-height: .88; transform: rotate(-9deg); padding-left: 20px; }
.rd-flash__title span { display: block; }
.rd-flash__title span + span { margin-left: 34px; }
.rd-flash__crown { position: absolute; top: -26px; right: -4px; width: 48px; height: 38px; stroke: var(--rd-ink); fill: #fff; stroke-width: 2; stroke-linejoin: round; transform: rotate(14deg); }
.rd-flash__offer { text-align: center; }
.rd-flash__big { font-family: var(--rd-font-script); font-weight: 700; font-style: italic; font-size: clamp(32px, 3.6vw, 52px); line-height: 1; transform: rotate(-4deg); }
.rd-flash__big b { font-size: 1.35em; }
.rd-flash__tape { position: relative; display: inline-block; margin: 8px 0 14px; padding: 6px 26px; background: #fff; box-shadow: var(--rd-shadow-soft); font-family: var(--rd-font-script); font-weight: 700; font-size: 22px; transform: rotate(-3deg); clip-path: polygon(2% 0, 98% 3%, 100% 52%, 97% 100%, 2% 96%, 0 48%); }
.rd-flash__cta { display: block; }
.rd-flash__model { position: relative; height: 100%; }
.rd-flash__model .rd-ph { --ph: #d9dfe2; align-items: flex-start; }
.rd-flash__summer { position: absolute; z-index: 3; right: 6%; top: 18%; font-family: var(--rd-font-script); font-weight: 700; font-size: 28px; line-height: .95; color: #fff; transform: rotate(-12deg); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.rd-flash__sun { position: absolute; z-index: 3; right: 3%; top: 4%; width: 42px; height: 42px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* =====================================================================
   7. FOOTER  (partial: _Footer)
   ===================================================================== */
.rd-footer { background: var(--rd-footer); color: var(--rd-footer-text); font-size: 12.5px; }
.rd-footer__grid { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr 1.3fr; gap: 36px; padding: 40px 0 34px; }
.rd-footer .rd-logo__word { color: #fff; font-size: 38px; }
.rd-footer__tag { margin-top: 12px; font-family: var(--rd-font-script); font-size: 20px; font-weight: 600; color: var(--rd-footer-text); }
.rd-footer h3 { margin-bottom: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.rd-footer li + li { margin-top: 9px; }
.rd-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--rd-accent); text-underline-offset: 3px; }
.rd-contact li { display: flex; gap: 10px; align-items: flex-start; }
.rd-contact .rd-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--rd-accent); }
.rd-social { display: flex; gap: 10px; margin-bottom: 18px; }
.rd-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--rd-footer); transition: transform .2s, background .2s; }
.rd-social a:hover { transform: translateY(-3px); background: var(--rd-accent); text-decoration: none; }
.rd-social .rd-icon { width: 17px; height: 17px; }
.rd-subscribe { display: flex; align-items: center; height: 44px; padding: 0 5px 0 18px; border: 1px solid #4a4d51; border-radius: var(--rd-radius-pill); }
.rd-subscribe input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: #fff; }
.rd-subscribe input::placeholder { color: #8d9094; }
.rd-subscribe input:focus { outline: none; }
.rd-subscribe:focus-within { border-color: var(--rd-accent); }
.rd-subscribe button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--rd-footer); }
.rd-subscribe button:hover { background: var(--rd-accent); }
.rd-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 22px; border-top: 1px solid #383b3f; font-size: 11.5px; }
.rd-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.rd-pay span { padding: 5px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--rd-ink); background: #fff; border-radius: 6px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
    :root { --rd-gutter: 28px; }
    .rd-nav { gap: 20px; }
    .rd-search { width: 180px; }
    .rd-new__body { grid-template-columns: 240px minmax(0, 1fr); }
    .rd-carousel__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
    .rd-panel__grid { grid-template-columns: 1fr; }
    .rd-panel__small { grid-template-columns: 1fr 1fr; }
    .rd-big__media { aspect-ratio: 1.3 / 1; }
    .rd-cats__arrow { display: none; }
}

@media (max-width: 992px) {
    .rd-nav, .rd-search { display: none; }
    .rd-burger { display: grid; }
    .rd-header__inner { gap: 10px; }
    .rd-logo { margin-right: auto; }
    .rd-hero__content { padding-left: 72px; }
    .rd-hero__dots { left: 72px; }
    .rd-duo { grid-template-columns: 1fr; }
    .rd-footer__grid { grid-template-columns: 1fr 1fr; }
    .rd-cats__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    :root { --rd-gutter: 16px; --rd-section-gap: 38px; --rd-header-h: 58px; }
    .rd-logo__word { font-size: 28px; }
    .rd-header__tools { gap: 4px; }

    .rd-hero { height: 470px; }
    .rd-hero__shade { background: linear-gradient(180deg, rgba(20,20,20,.1) 0%, rgba(20,20,20,.6) 100%); }
    .rd-hero__bg .rd-ph { padding: 12px 16px; justify-content: center; align-items: flex-start; }
    .rd-hero__content { justify-content: flex-end; padding: 0 22px 64px; max-width: none; }
    .rd-hero__title { font-size: 40px; }
    .rd-hero__quote { top: 62px; right: 18px; font-size: 26px; max-width: 150px; }
    .rd-hero__quote svg { width: 30px; height: 30px; margin-left: 40px; }
    .rd-hero__arrow { display: none; }
    .rd-hero__dots { left: 22px; bottom: 26px; }

    .rd-head { align-items: flex-end; }
    .rd-head__left { flex: 1 1 auto; }
    .rd-link-all { flex: 0 0 auto; }
    .rd-head__script { font-size: 40px; }
    .rd-head__title { font-size: 16px; }
    .rd-head__sub { font-size: 12px; }

    .rd-new__body { grid-template-columns: 1fr; gap: 26px; }
    .rd-polaroid { width: 240px; margin: 4px auto 0; }
    .rd-carousel { margin-right: calc(var(--rd-gutter) * -1); }
    .rd-carousel__track { grid-auto-columns: 46%; padding-right: var(--rd-gutter); }
    .rd-carousel__next, .rd-carousel__prev { display: none !important; }

    .rd-panel { padding: 16px 14px 18px; border-radius: var(--rd-radius); }
    .rd-panel .rd-link-all { font-size: 11.5px; }
    .rd-panel__grid { grid-template-columns: 1.1fr 1fr; gap: 10px; }
    .rd-panel__small { grid-template-columns: 1fr; }
    .rd-big__media { aspect-ratio: 1 / 1.2; }
    .rd-big__price strong { font-size: 16px; }

    .rd-cats__grid { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--rd-gutter) 14px; margin-inline: calc(var(--rd-gutter) * -1); }
    .rd-cats__grid::-webkit-scrollbar { display: none; }
    .rd-cat { scroll-snap-align: center; }

    .rd-flash { height: auto; }
    .rd-flash__inner { grid-template-columns: 1fr; padding-block: 30px 0; gap: 16px; }
    .rd-flash__title { font-size: 46px; padding-left: 8px; }
    .rd-flash__offer { text-align: left; padding-left: 8px; }
    .rd-flash__model { height: 200px; }

    .rd-footer__grid { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 26px; }
    .rd-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Bổ sung khi chạy trên website thật (ảnh thật, dữ liệu động, offcanvas Bootstrap)
   ===================================================================== */
.rd-badge[hidden] { display: none; }
.rd-hero__bg img, .rd-card__media img, .rd-big__media img, .rd-mini__media img, .rd-cat__img img, .rd-polaroid__img img, .rd-flash__bg img, .rd-post__img img {
    width: 100%; height: 100%; object-fit: cover;
}
.rd-card__media > a, .rd-big__media > a, .rd-mini__media > a { display: block; width: 100%; height: 100%; }
.rd-hero__bg picture { display: block; width: 100%; height: 100%; }
.rd-card__media img, .rd-big__media img { transition: transform .5s; }
.rd-card:hover .rd-card__media img, .rd-card:hover .rd-big__media img { transform: scale(1.04); }
.rd-card__priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rd-card__priceline .rd-card__price { margin-top: 0; }
.rd-label--sold { background: #8a857b; color: #fff; }

/* Chưa có banner: nền màu nhấn, chữ đậm */
.rd-hero__bg--plain { background: linear-gradient(115deg, #eef5c4 0%, var(--rd-accent) 55%, #b3cc2e 100%); }
.rd-hero__content--dark, .rd-hero__quote--dark { color: var(--rd-ink); text-shadow: none; }
.rd-hero__content--dark .rd-hero__desc { color: #3b3e32; }
.rd-hero__quote--dark svg { stroke: var(--rd-ink); }
.rd-hero__content--dark .rd-brush::after { background: #fff; opacity: .85; }
.rd-hero:has(.rd-hero__bg--plain) .rd-hero__shade { display: none; }

.rd-duo--single { grid-template-columns: minmax(0, 720px); }
.rd-flash__bg--plain { background: linear-gradient(110deg, #f3f9d0, var(--rd-accent) 60%, #a9c22e); }
.rd-flash__bg img { position: absolute; inset: 0; }
.rd-flash__bg:not(.rd-flash__bg--plain)::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.35); }

/* Tin tức */
.rd-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rd-post__img { aspect-ratio: 16 / 10; border-radius: var(--rd-radius-sm); overflow: hidden; background: var(--rd-card-bg); }
.rd-post h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.rd-post:hover h3 { text-decoration: underline; text-decoration-color: var(--rd-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rd-post p { font-size: 12px; color: var(--rd-ink-soft); }
@media (max-width: 768px) { .rd-news { grid-template-columns: 1fr; gap: 18px; } }

/* Menu di động (Bootstrap offcanvas): ô tìm kiếm hiện lại trong ngăn kéo */
.offcanvas .rd-search { display: flex; width: 100%; margin-bottom: 10px; }
.rd-nav__item > button.rd-nav__link { text-transform: uppercase; }
.rd-dropdown h4 a:hover { text-decoration: underline; text-decoration-color: var(--rd-accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rd-logo img { display: block; }
/* Nền xám khi ảnh chưa tải/bị trong suốt; ẩn nút cuộn khi không còn gì để cuộn */
.rd-cat__img > div, .rd-polaroid__img { background: var(--rd-card-bg); }
.rd-carousel.at-end .rd-carousel__next { display: none; }

/* Khối Hot/Bán chạy chỉ có 1 sản phẩm: ô lớn không bị ép nửa chiều ngang */
.rd-panel__grid--solo { grid-template-columns: minmax(0, 340px); }
.rd-panel__grid--solo .rd-panel__small { display: none; }

/* ---- Sửa lỗi giao diện header ----
   1) Không dùng backdrop-filter/transform/filter trên .rd-header: các thuộc tính này biến header thành "khung" của phần tử
      position: fixed bên trong (ngăn kéo giỏ hàng .offcanvas nằm trong header) khiến ngăn kéo bị co bằng chiều cao header.
   2) Nút trong ô tìm kiếm không có class nên phải tự reset (nếu không hiện khung nút mặc định của trình duyệt). */
.rd-search button, .rd-subscribe button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rd-search button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.rd-search button:hover { background: rgba(0,0,0,.06); }
.rd-subscribe button { background: #fff; color: var(--rd-footer); }