/* =====================================================================
   Trang chủ — Flash Sale dạng vòng xoay 3D (17/09/2026)
   Theo bản mẫu "Chọn theo nhu cầu" (Trang chủ v2). Gồm dải chữ chạy .hl-fxmq và khối .hl-fx.
   HTML gốc là DẢI VUỐT NGANG (điện thoại, không có JS, bật giảm chuyển động).
   js/hl-flash3d.js thêm .is-3d vào .hl-fx ở màn >= 768px: thẻ chồng lên nhau, GSAP xếp vòng 3D.
   Quay lui: trả khối flash sale cũ trong views/hl-home.blade.php (git) là xong.
   ===================================================================== */

/* ---------- Dải chữ chạy ---------- */

.hl-fxmq { overflow: hidden; border-radius: 18px; background: #2B2418; padding: 13px 0; }
.hl-fxmq__track { display: flex; width: max-content; animation: hlFxMarquee 34s linear infinite; }
.hl-fxmq:hover .hl-fxmq__track { animation-play-state: paused; }
.hl-fxmq__run { display: flex; align-items: center; flex: 0 0 auto; }
.hl-fxmq__item { padding: 0 26px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #F6ECD4; white-space: nowrap; }
.hl-fxmq__dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 99px; background: #F0A202; }
@keyframes hlFxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Khối ---------- */

.hl-fx {
    --fx-glow: rgba(42, 111, 214, .55);
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 26px; background: #2B2418; padding: 40px 0 30px;
}
.hl-fx__glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: radial-gradient(90% 70% at 50% 52%, var(--fx-glow) 0%, rgba(43, 36, 24, 0) 66%);
    transition: background .9s ease;
}

.hl-fx__head { display: flex; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap; padding: 0 42px 26px; }
.hl-fx__intro { min-width: 0; margin-right: auto; }
.hl-fx__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: #F0A202; }
.hl-fx__title { margin: 10px 0 0; font-size: 44px; font-weight: 700; letter-spacing: -.045em; line-height: 1.02; color: #F9F2E2; }
/* từng chữ trượt lên (js bọc 2 lớp span) */
.hl-fx__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hl-fx__w > span { display: inline-block; }

/* đồng hồ dùng lại .hl-timer (hl-pages.css) nhưng đổi màu cho nền tối */
.hl-fx__timer { margin-top: 14px; color: #C0B393; }
.hl-fx__timer b { background: rgba(249, 242, 226, .1); color: #FFD874; box-shadow: inset 0 0 0 1px rgba(249, 242, 226, .16); }

.hl-fx__tools { display: flex; align-items: center; gap: 9px; }
.hl-fx__all {
    display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 14px;
    border: 1px solid rgba(249, 242, 226, .22); font-size: 13px; font-weight: 700; white-space: nowrap;
    transition: background .2s ease;
}
/* thẻ <a> bị .hl-body a / a:hover tô cam — phải viết đủ .hl-body a.xxx (xem hl-theme.css) */
.hl-body a.hl-fx__all, .hl-body a.hl-fx__all:hover { color: #F9F2E2; }
.hl-fx__all:hover { background: rgba(249, 242, 226, .08); }

.hl-fx__nav {
    display: none; width: 44px; height: 44px; padding: 0; border-radius: 14px; cursor: pointer;
    border: 1px solid rgba(249, 242, 226, .22); background: transparent; color: #F9F2E2;
    place-items: center; transition: background .2s ease, transform .2s ease;
}
.hl-fx__nav:hover { background: rgba(249, 242, 226, .08); }
.hl-fx__nav--next { border-color: #F0A202; background: #F0A202; color: #2B2418; }
.hl-fx__nav--next:hover { background: #FFB61F; transform: translateX(2px); }
.hl-fx__nav:focus-visible, .hl-fx__dot:focus-visible, .hl-fx__all:focus-visible { outline: 3px solid #FFD874; outline-offset: 3px; }

/* ---------- Sân khấu: mặc định là dải vuốt ngang ---------- */

.hl-fx__stage {
    display: flex; gap: 14px; padding: 4px 42px 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 42px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hl-fx__stage::-webkit-scrollbar { display: none; }

/* ---------- Thẻ ---------- */

.hl-fx__card {
    --fx-bg: linear-gradient(155deg, #3F7FD8, #1E4F94); --fx-ink: #1E4F94;
    flex: 0 0 260px; width: 260px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 20px 18px; border-radius: 22px; overflow: hidden;
    background: var(--fx-bg); box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
    line-height: 1.4; /* body của theme là 26px — lọt vào nhãn -x% làm các thẻ cao lệch nhau */
    -webkit-user-drag: none; user-select: none;
}
.hl-body a.hl-fx__card, .hl-body a.hl-fx__card:hover { color: #fff; }
.hl-fx__card:focus-visible { outline: 3px solid #FFD874; outline-offset: 4px; }

.hl-fx__card--0 { --fx-bg: linear-gradient(155deg, #3F7FD8, #1E4F94); --fx-ink: #1E4F94; }
.hl-fx__card--1 { --fx-bg: linear-gradient(155deg, #2E9B72, #175F44); --fx-ink: #175F44; }
.hl-fx__card--2 { --fx-bg: linear-gradient(155deg, #C8862B, #8A4E06); --fx-ink: #8A4E06; }
.hl-fx__card--3 { --fx-bg: linear-gradient(155deg, #C0553C, #8A2F1C); --fx-ink: #8A2F1C; }
.hl-fx__card--4 { --fx-bg: linear-gradient(155deg, #4A5C86, #232F4E); --fx-ink: #232F4E; }

.hl-fx__top { display: flex; align-items: center; gap: 9px; }
.hl-fx__icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 12px;
    background: rgba(255, 255, 255, .9); color: var(--fx-ink); display: grid; place-items: center;
}
.hl-fx__tag { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .82); }
.hl-fx__off {
    margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #FFD874; color: #3D2C08;
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.hl-fx__img {
    position: relative; display: grid; place-items: center; height: 138px; border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, .94); color: var(--fx-ink);
}
.hl-fx__img img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; pointer-events: none; }
.hl-fx__ph { position: absolute; width: 56px; height: 56px; opacity: .55; }

.hl-fx__name {
    font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #fff; min-height: 2.5em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hl-fx__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hl-fx__price b { font-size: 23px; font-weight: 700; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hl-fx__price s { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }

/* chữ "ĐÃ BÁN" đứng trên, thanh mảnh bên dưới (chữ đè lên thanh màu thì không đọc được trên nền gradient) */
.hl-fx__bar { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 5px; }
.hl-fx__bartxt { order: -1; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: rgba(255, 255, 255, .86); }
.hl-fx__barfill { display: block; height: 5px; border-radius: 99px; background: #FFD874; }
.hl-fx__bar::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); }

.hl-fx__go {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px;
    padding: 11px 15px; border-radius: 13px; background: rgba(255, 255, 255, .94); color: #2B2418;
    font-size: 12.5px; font-weight: 700;
}

.hl-fx__dots { display: none; align-items: center; justify-content: center; gap: 8px; padding-top: 22px; }
.hl-fx__dot {
    width: 10px; height: 5px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
    background: rgba(249, 242, 226, .28);
    transition: width .4s cubic-bezier(.3, 1, .4, 1), background .4s ease;
}
.hl-fx__dot.is-on { width: 34px; background: #F0A202; }

/* ---------- Chế độ 3D (JS bật, chỉ >= 768px) ---------- */

.hl-fx.is-3d .hl-fx__nav { display: grid; }
.hl-fx.is-3d .hl-fx__dots { display: flex; }
.hl-fx.is-3d .hl-fx__stage {
    position: relative; display: block; height: 430px; padding: 0; overflow: visible;
    perspective: 1500px; perspective-origin: 50% 46%; touch-action: pan-y; cursor: grab;
}
.hl-fx.is-3d .hl-fx__stage.is-dragging { cursor: grabbing; }
.hl-fx.is-3d .hl-fx__card {
    position: absolute; left: 50%; top: 0; width: 284px; margin-left: -142px; height: 408px;
    will-change: transform, opacity;
}
.hl-fx.is-3d .hl-fx__img { height: 150px; }

/* ---------- Máy tính bảng / điện thoại ---------- */

@media (max-width: 1100px) {
    .hl-fx__title { font-size: 38px; }
}

@media (max-width: 767px) {
    .hl-fxmq { border-radius: 16px; padding: 11px 0; }
    .hl-fxmq__item { padding: 0 18px; font-size: 11px; letter-spacing: .05em; }
    .hl-fxmq__dot { width: 4px; height: 4px; flex-basis: 4px; }

    .hl-fx { border-radius: 20px; padding: 18px 0 16px; }
    .hl-fx__head { padding: 0 16px 14px; gap: 10px; }
    .hl-fx__eyebrow { font-size: 9.5px; letter-spacing: .18em; }
    .hl-fx__title { font-size: 24px; letter-spacing: -.035em; line-height: 1.06; margin-top: 7px; }
    .hl-fx__timer { margin-top: 9px; font-size: 12px; }
    .hl-fx__all { height: 36px; padding: 0 12px; border-radius: 12px; font-size: 12px; }

    .hl-fx__stage { gap: 11px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
    .hl-fx__card { flex-basis: 222px; width: 222px; padding: 16px; gap: 8px; border-radius: 18px; box-shadow: none; }
    .hl-fx__icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; }
    .hl-fx__tag { font-size: 9.5px; letter-spacing: .12em; }
    .hl-fx__img { height: 118px; border-radius: 13px; }
    .hl-fx__name { font-size: 14px; }
    .hl-fx__price b { font-size: 19px; }
    .hl-fx__go { padding: 9px 12px; border-radius: 11px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-fxmq__track { animation: none; }
    .hl-fx__glow, .hl-fx__dot { transition: none; }
}