/* ============================================================
   CUSTOM THEME STYLES (Độc lập, không sửa trực tiếp torano.css)
   Bao gồm:
   1. TOP BAR — Marquee chạy chữ ưu đãi liên tục
   2. SMART SEARCH — Popup gợi ý tìm kiếm trên desktop & drawer
   3. SEARCH DRAWER — Sidebar tìm kiếm trượt từ phải sang trái trên mobile
   4. CART PROMO BANNER — Thanh thông báo ưu đãi trang giỏ hàng
   5. COMBO MIX & MATCH — Nền thanh thông tin outfit màu kem #F5EBD8
   ============================================================ */

/* ============================================================
   1. TOP BAR — Marquee chạy chữ thông điệp ưu đãi liên tục
   ============================================================ */
.topbar{background:var(--ink);color:var(--brass);height:36px;display:flex;align-items:center;
  overflow:hidden;font-size:12px;font-weight:600;letter-spacing:.02em;position:relative;z-index:65}
@media(min-width:900px){.topbar{height:36px;font-size:12.5px}}
.tb-marquee{width:100%;overflow:hidden;white-space:nowrap;display:flex;align-items:center}
.tb-marquee:hover .tb-marquee-track{animation-play-state:paused}
.tb-marquee-track{display:flex;align-items:center;width:max-content;will-change:transform;
  animation:tbMarquee 32s linear infinite}
.tb-group{display:flex;align-items:center;flex-shrink:0}
.tb-item{display:inline-flex;align-items:center;white-space:nowrap;color:var(--brass)}
.tb-item a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;transition:opacity .15s}
.tb-item a:hover{opacity:.85;text-decoration:underline}
.tb-item span,.tb-msg{display:inline-block;color:inherit;white-space:nowrap}
.tb-sep{display:inline-block;color:var(--brass);opacity:.6;margin:0 18px;font-size:12px;user-select:none}
@keyframes tbMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-25%)}
}

/* ============================================================
   2. SMART SEARCH — Popup gợi ý tìm kiếm
   ============================================================ */
.sugg{position:absolute;left:0;right:0;top:46px;background:#fff;color:var(--ink);
  border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:10px 8px;display:none;z-index:70;
  max-height:480px;overflow-y:auto;overscroll-behavior:contain}
.hdr-search.open .sugg{display:block}
.sugg::-webkit-scrollbar{width:5px}
.sugg::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}
.sugg h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin:8px 8px 6px}
.sugg a{display:flex;gap:12px;align-items:center;padding:7px 8px;border-radius:6px;font-size:13px;text-decoration:none;color:inherit;transition:background .15s}
.sugg a:hover{background:var(--mist)}
.sugg-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:4px;overflow:hidden;background:var(--mist)}
.sugg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sugg-no-img{display:block;width:100%;height:100%;background:#f1f3f5}
.sugg-name{font-weight:500;color:var(--ink);line-height:1.35;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sugg-price{font-weight:700;color:var(--ink);white-space:nowrap;font-size:13px}
.sugg-art-item{display:block;padding:7px 8px;font-size:13px;color:var(--ink);line-height:1.4}
.sugg-art-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sugg-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;font-size:12.5px;color:var(--slate)}
.sugg-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:var(--ink);border-radius:50%;animation:sugg-spin .6s linear infinite;display:inline-block}
@keyframes sugg-spin{to{transform:rotate(360deg)}}
.sugg-empty{padding:18px 12px;text-align:center;font-size:13px;color:var(--slate)}
.sugg-view-all{border-top:1px solid var(--line);margin-top:8px;padding-top:6px;text-align:center}
.sugg-view-all a{display:block;padding:8px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:6px}
.sugg-view-all a:hover{background:var(--mist)}
.dr-search{padding:10px 14px;border-bottom:1px solid var(--line)}
.srch-dr{border:1px solid var(--line);background:#fafafa}

/* ============================================================
   3. SEARCH DRAWER (Sidebar tìm kiếm trượt từ phải qua trái trên mobile)
   ============================================================ */
.search-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s ease;z-index:97}
.search-drawer-bg.on{opacity:1;visibility:visible}
.search-drawer{position:fixed;top:0;right:0;bottom:0;width:88%;max-width:380px;background:#fff;z-index:98;
  transform:translateX(102%);transition:transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display:flex;flex-direction:column;box-shadow:-4px 0 30px rgba(0,0,0,.15)}
.search-drawer.on{transform:none}
.search-dr-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:#fff;flex-shrink:0}
.search-dr-title{letter-spacing:.08em;font-size:13px;font-weight:700;color:var(--ink);text-transform:uppercase}
.search-dr-form-wrap{padding:12px 16px;border-bottom:1px solid var(--line);background:#fafafa;flex-shrink:0}
.search-dr-form{border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;height:42px;display:flex;align-items:center;padding:0 4px 0 12px;transition:border-color .2s,box-shadow .2s}
.search-dr-form:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.search-dr-form input{flex:1;border:0;outline:0;background:none;font-size:13.5px;color:var(--ink)}
.search-dr-form input::placeholder{color:#9AA0A6}
.search-dr-form button{width:36px;height:34px;display:grid;place-items:center;border-radius:4px;background:var(--ink);border:0;cursor:pointer;flex-shrink:0}
.search-dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 40px;-webkit-overflow-scrolling:touch}
.search-dr-body .sugg-group{margin-bottom:18px}
.search-dr-body h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin:6px 0 10px}
.search-dr-body .sugg-list{display:flex;flex-direction:column;gap:4px}
.search-dr-body a{display:flex;gap:12px;align-items:center;padding:8px;border-radius:6px;font-size:13px;text-decoration:none;color:inherit;transition:background .15s}
.search-dr-body a:hover,.search-dr-body a:active{background:var(--mist)}
.search-dr-body .sugg-thumb{flex:0 0 46px;width:46px;height:46px;border-radius:4px;overflow:hidden;background:var(--mist)}
.search-dr-body .sugg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-dr-body .sugg-name{font-weight:500;color:var(--ink);line-height:1.35;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-dr-body .sugg-price{font-weight:700;color:var(--ink);white-space:nowrap;font-size:13px}
.search-dr-body .sugg-art-item{display:block;padding:8px 10px;font-size:13px;color:var(--ink);line-height:1.4;border-bottom:1px solid #f1f3f5}
.search-dr-body .sugg-art-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-dr-body .sugg-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 8px;font-size:13px;color:var(--slate)}
.search-dr-body .sugg-empty{padding:24px 12px;text-align:center;font-size:13px;color:var(--slate)}
.search-dr-body .sugg-view-all{border-top:1px solid var(--line);margin-top:12px;padding-top:8px;text-align:center}
.search-dr-body .sugg-view-all a{display:block;padding:10px;font-size:13px;font-weight:600;color:var(--ink);background:var(--mist);border-radius:6px}

/* ============================================================
   4. CART — Thanh thông báo ưu đãi giảm giá (dạng text màu đỏ)
   ============================================================ */
.cart-promo-banner{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:11px 16px;border:1px solid #fecaca;border-radius:8px;background:#fff1f2;font-size:13.5px;color:#374151;line-height:1.4}
.cart-promo-banner__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-promo-banner__text{flex:1;font-weight:500;font-size:13px}
.cart-promo-val{color:#dc2626;font-weight:700}

/* ============================================================
   5. COMBO MIX & MATCH — Nền thanh thông tin outfit màu kem #F5EBD8
   ============================================================ */
.look-ov {
  background: #F5EBD8 !important;
  color: var(--ink, #16181C) !important;
  padding: 10px 52px 10px 14px !important;
  border-top: 1px solid rgba(196, 145, 50, 0.22);
}
.look-ov b {
  color: var(--ink, #16181C) !important;
  font-size: 13px;
  line-height: 1.35;
  display: block;
}
.look-ov span {
  color: #7A5A1E !important;
  font-size: 11px;
  line-height: 1.3;
  display: block;
  margin-top: 2px;
}
.look-eye {
  background: #fff !important;
  color: var(--ink, #16181C) !important;
  border: 1px solid rgba(196, 145, 50, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.look-ov b{display: none !important;}
.look-ov {
    bottom: -1px;
}
.look-eye {
    bottom: 1px;
}