/* =========================================================
   LUXURYWATCH - UI bổ sung (trang mới / viết lại)
   Dùng chung biến màu của style.css
   ========================================================= */
.lw-skip { position: absolute; left: 8px; top: 8px; z-index: 2000; background: #fff; padding: 6px 12px; }
.lw-cart-badge { position: absolute; top: -6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #c0392b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.lw-header-action img { object-fit: cover; }
.dropdown-menu .dropdown-item i { color: var(--lw-accent); }

/* ---------- Banner trượt tự động ---------- */
.lw-slider { position: relative; background: #0f1b33; }
.lw-slider .carousel-item { height: clamp(220px, 36vw, 480px); }
.lw-slider .carousel-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lw-slide-caption { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none;
    background: linear-gradient(90deg, rgba(10,22,40,.78) 0%, rgba(10,22,40,.35) 55%, rgba(10,22,40,0) 100%); }
.lw-slide-caption .container { pointer-events: auto; }
.lw-slide-caption h2 { font-family: var(--lw-heading-font); color: #fff; font-size: clamp(1.4rem, 3.6vw, 3rem); max-width: 560px; line-height: 1.2; }
.lw-slide-caption p { color: #e8e3d6; max-width: 480px; font-size: clamp(.85rem, 1.4vw, 1.05rem); }
.lw-slide-caption .eyebrow { color: var(--lw-accent-light); letter-spacing: .25em; font-size: 12px; text-transform: uppercase; }
.lw-slider .carousel-indicators [data-bs-target] { width: 28px; height: 3px; background: var(--lw-accent-light); }
.lw-btn-gold { display: inline-block; background: var(--lw-accent); color: #fff; padding: 10px 26px; border-radius: 2px; font-weight: 600; letter-spacing: .04em; border: 0; }
.lw-btn-gold:hover { background: #a08650; color: #fff; }

/* ---------- Thẻ sản phẩm ---------- */
.lw-card { background: #fff; border: 1px solid var(--lw-border); border-radius: 6px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.lw-card:hover { box-shadow: 0 10px 28px rgba(23,50,77,.12); transform: translateY(-3px); }
.lw-card-img { position: relative; display: block; aspect-ratio: 4/5; background: #f3f4f6; overflow: hidden; }
.lw-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.lw-card:hover .lw-card-img img { transform: scale(1.04); }
.lw-ribbon { position: absolute; top: 10px; left: 10px; background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; z-index: 2; }
.lw-ribbon-out { background: #444; left: auto; right: 10px; }
.lw-ribbon-low { background: #d9822b; left: auto; right: 10px; }
.lw-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.lw-card-cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lw-accent); }
.lw-card-name { font-family: var(--lw-heading-font); font-size: 1.05rem; line-height: 1.35; margin: 4px 0 8px; color: var(--lw-primary); }
.lw-card-name a:hover { color: var(--lw-accent); }
.lw-price { font-weight: 700; color: var(--lw-primary); font-size: 1.05rem; }
.lw-price-old { color: var(--lw-muted); text-decoration: line-through; margin-left: 6px; font-size: .85rem; font-weight: 400; }
.lw-meta { font-size: 12px; color: var(--lw-muted); margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.lw-stock-out { color: #c0392b; font-weight: 600; } .lw-stock-low { color: #d9822b; font-weight: 600; } .lw-stock-ok { color: #2e8b57; }

.lw-section { padding: 48px 0; }
.lw-section-title { font-family: var(--lw-heading-font); color: var(--lw-primary); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.lw-section-title small { display: block; font-family: var(--lw-font); font-size: 11px; letter-spacing: .25em; color: var(--lw-accent); text-transform: uppercase; margin-bottom: 4px; }

/* ---------- Danh sách / lọc ---------- */
.lw-filter { background: #fff; border: 1px solid var(--lw-border); border-radius: 6px; padding: 16px; position: sticky; top: 90px; }
.lw-filter h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--lw-primary); margin: 0 0 10px; }
.lw-filter a.cat { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 4px; color: var(--lw-text); }
.lw-filter a.cat:hover, .lw-filter a.cat.active { background: #f1ece0; color: var(--lw-primary); font-weight: 600; }
.pagination .page-link { color: var(--lw-primary); } .pagination .active .page-link { background: var(--lw-primary); border-color: var(--lw-primary); color: #fff; }

/* ---------- Chi tiết sản phẩm ---------- */
.lw-gallery-main { aspect-ratio: 4/5; background: #f3f4f6; border-radius: 6px; overflow: hidden; border: 1px solid var(--lw-border); }
.lw-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.lw-detail-price { font-size: 1.8rem; font-weight: 700; color: var(--lw-primary); }
.lw-spec-table th { width: 38%; color: var(--lw-muted); font-weight: 500; background: #fafafa; }
.lw-stars { color: #e0a800; letter-spacing: 1px; }
.lw-review { border-bottom: 1px solid var(--lw-border); padding: 14px 0; }
.lw-review:last-child { border-bottom: 0; }
.lw-star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.lw-star-input input { display: none; }
.lw-star-input label { font-size: 1.7rem; color: #ccc; cursor: pointer; line-height: 1; }
.lw-star-input input:checked ~ label, .lw-star-input label:hover, .lw-star-input label:hover ~ label { color: #e0a800; }

/* ---------- Form / tài khoản ---------- */
.lw-auth-card { max-width: 440px; margin: 48px auto; background: #fff; border: 1px solid var(--lw-border); border-radius: 8px; padding: 32px; box-shadow: 0 12px 40px rgba(23,50,77,.08); }
.lw-auth-card h1 { font-family: var(--lw-heading-font); color: var(--lw-primary); font-size: 1.7rem; }
.btn-lw { background: var(--lw-primary); color: #fff; border: 0; } .btn-lw:hover { background: var(--lw-primary-dark); color: #fff; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid #d5d8dc; background: #fff; border-radius: 6px; font-weight: 600; color: #333; }
.btn-social:hover { background: #f6f7f8; color: #000; }
.btn-social.fb { background: #1877f2; border-color: #1877f2; color: #fff; } .btn-social.fb:hover { background: #166fe0; color: #fff; }
.lw-or { display: flex; align-items: center; gap: 12px; color: var(--lw-muted); font-size: 12px; margin: 16px 0; }
.lw-or::before, .lw-or::after { content: ""; flex: 1; border-top: 1px solid var(--lw-border); }
.lw-panel { background: #fff; border: 1px solid var(--lw-border); border-radius: 8px; padding: 20px; }
.lw-tier { display: inline-block; padding: 2px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lw-tier-silver { background: #e6e8eb; color: #555; } .lw-tier-gold { background: #f6e7b4; color: #8a6a00; } .lw-tier-diamond { background: #d9ecff; color: #0a5ba8; }
.lw-thumb { width: 56px; height: 70px; object-fit: cover; border-radius: 4px; background: #f1f2f4; }

/* ---------- Timeline đơn hàng ---------- */
.lw-steps { display: flex; justify-content: space-between; position: relative; margin: 8px 0 20px; }
.lw-steps::before { content: ""; position: absolute; top: 15px; left: 8%; right: 8%; height: 2px; background: var(--lw-border); }
.lw-step { text-align: center; flex: 1; position: relative; font-size: 12px; color: var(--lw-muted); }
.lw-step i { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; align-items: center; justify-content: center; margin-bottom: 4px; position: relative; z-index: 1; font-size: 15px; font-style: normal; }
.lw-step.done i { background: var(--lw-accent); color: #fff; } .lw-step.done { color: var(--lw-primary); font-weight: 600; }
.lw-step.current i { background: var(--lw-primary); color: #fff; box-shadow: 0 0 0 4px rgba(23,50,77,.15); }

/* ---------- Footer / nổi ---------- */
.lw-footer-address { margin: 0; font-style: normal; }
.lw-footer-contact a:hover { color: var(--lw-accent-light); }
.lw-pay-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lw-pay-badges span { border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 3px 10px; font-size: 12px; color: #e8e3d6; }
.lw-float-contact { position: fixed; right: 16px; bottom: 20px; z-index: 1030; display: flex; flex-direction: column; gap: 10px; }
.lw-float-contact a { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .2s; }
.lw-float-contact a:hover { transform: scale(1.1); color: #fff; }
.lw-float-zalo { background: #0068ff; font-weight: 800; font-size: 13px !important; } .lw-float-fb { background: #0084ff; } .lw-float-call { background: #2e8b57; animation: lwpulse 2s infinite; }
@keyframes lwpulse { 0% { box-shadow: 0 0 0 0 rgba(46,139,87,.55); } 70% { box-shadow: 0 0 0 14px rgba(46,139,87,0); } 100% { box-shadow: 0 0 0 0 rgba(46,139,87,0); } }
.lw-map { border: 0; width: 100%; height: 420px; border-radius: 8px; }
.lw-benefit-bar { background: #f7f4ec; border-block: 1px solid #ece4d0; }

/* ---------- Voucher ---------- */
.lw-voucher { border: 1px dashed var(--lw-accent); background: #fbf8f0; border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.lw-voucher code { background: var(--lw-primary); color: #fff; padding: 1px 8px; border-radius: 3px; font-size: 12px; cursor: pointer; }

/* ---------- ADMIN ---------- */
body.lw-admin { background: #f3f5f8; }
.adm-wrap { display: flex; min-height: 100vh; }
.adm-side { width: 240px; background: #10263b; color: #cfd8e3; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.adm-side .brand { padding: 18px 20px; color: #fff; font-family: var(--lw-heading-font); font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); display: block; }
.adm-side .brand i { color: var(--lw-accent-light); margin-right: 6px; }
.adm-side a.item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #cfd8e3; font-size: 14px; border-left: 3px solid transparent; }
.adm-side a.item:hover { background: rgba(255,255,255,.05); color: #fff; }
.adm-side a.item.active { background: rgba(182,154,103,.15); color: #fff; border-left-color: var(--lw-accent); }
.adm-side .group { padding: 14px 20px 4px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #7f93a8; }
.adm-main { flex: 1; min-width: 0; }
.adm-top { background: #fff; border-bottom: 1px solid var(--lw-border); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; }
.adm-content { padding: 24px; }
.adm-card { background: #fff; border-radius: 8px; border: 1px solid var(--lw-border); padding: 18px; }
.adm-stat { display: flex; gap: 14px; align-items: center; }
.adm-stat .ico { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.adm-stat .num { font-size: 1.4rem; font-weight: 700; color: var(--lw-primary); line-height: 1.1; }
.adm-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--lw-muted); white-space: nowrap; }
.adm-table td { vertical-align: middle; }
.adm-bar { background: linear-gradient(180deg, var(--lw-accent), #8e7747); border-radius: 4px 4px 0 0; min-height: 2px; }
@media (max-width: 991px) {
    .adm-wrap { display: block; } .adm-side { width: 100%; height: auto; position: static; }
    .lw-filter { position: static; }
}
@media print { .lw-float-contact, .lw-header, .lw-announcement, .lw-footer, .adm-side, .no-print { display: none !important; } }