/* ============ THEME2 LEGACY-COMPAT ============
   Maps the theme1 component class vocabulary onto theme2 tokens so any
   template still using the old markup renders coherently without the
   retired HELSAN (--hs-*) stylesheets. */

/* ---- layout primitives ---- */
.container-all { width: min(1240px, 100% - 48px); margin-inline: auto; }
.row-box { display: flex; flex-wrap: wrap; }
.mt-20 { margin-top: 16px; }
.title-section { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 16px; }
.header-section { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header-section .title { font-size: 1.25rem; font-weight: 800; }
.link-more { color: var(--accent); font-weight: 700; }

/* ---- product cards (legacy theme1 markup) ---- */
.item-product { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.item-product .pic-product { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--bg2); }
.item-product .title-product { font-size: .95rem; font-weight: 700; line-height: 1.7; min-height: 3.4em; }
.item-product .rate-product { position: absolute; top: 20px; inset-inline-start: 20px; display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px 9px; font-size: .75rem; font-weight: 700; box-shadow: 0 2px 10px rgba(30,32,37,.08); }
.item-product .rate-product img { width: 13px; height: 13px; }
.item-product .price-product { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.item-product .price-product .discount-box { display: flex; align-items: center; gap: 6px; }
.item-product .price-product .off { background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.item-product .price-product .price-discount { color: var(--ink2); text-decoration: line-through; font-size: .8rem; }
.item-product .price-product .price-org { margin-inline-start: auto; font-weight: 800; }
.item-product .price-product .price-org span { font-size: .72rem; color: var(--ink2); font-weight: 400; }
.item-product .btn-add-basket { display: block; text-align: center; margin-top: 10px; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer; transition: .3s var(--ease); }
.item-product .btn-add-basket:hover { background: var(--accent2); }
.item-product .count-plus-minus { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 12px; width: max-content; margin-inline: auto; }
.item-product .cpm-item { cursor: pointer; font-weight: 800; }
.item-product .cpm-item.number { min-width: 24px; text-align: center; }
.item-product .offer-info .progress, .item-product .progress { display: none; }

/* ---- buy button / stepper (generic) ---- */
.btn-add-basket { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; transition: .3s var(--ease); }
.btn-add-basket:hover { background: var(--accent2); }
.count-plus-minus { display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--line2); border-radius: 999px; padding: 8px 16px; }
.count-plus-minus .cpm-item { cursor: pointer; font-weight: 800; }
.count-plus-minus .cpm-item.number { min-width: 26px; text-align: center; }

/* ---- breadcrumb ---- */
.breadcrumb-container { padding-top: 16px; }
.breadcrumb-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink2); font-size: .85rem; list-style: none; padding: 0; }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item + .breadcrumb-item::before { content: '›'; margin-inline-end: 8px; color: var(--line2); }

/* ---- product detail ---- */
.image-summary-price { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: 20px; }
.col-img-product { position: sticky; top: calc(var(--header-h) + 20px); }
.col-summary-price { display: grid; gap: 16px; }
.title-product { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 900; line-height: 1.4; }
.list-statistics { display: flex; align-items: center; gap: 18px; list-style: none; padding: 0; color: var(--ink2); font-size: .9rem; }
.list-statistics li { display: inline-flex; align-items: center; gap: 6px; }
.list-statistics img { width: 16px; height: 16px; }
.condition-return-container { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; color: var(--ink2); font-size: .85rem; }
.condition-return-container h6 { display: flex; gap: 10px; font-weight: 500; line-height: 1.9; }
.price-container { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; display: grid; gap: 14px; }
.desc-price-box { display: grid; gap: 10px; list-style: none; padding: 0; font-size: .85rem; color: var(--ink2); }
.desc-price-box li { display: flex; align-items: center; gap: 10px; }
.desc-price-box img { width: 20px; height: 20px; }
.price-product { display: flex; align-items: baseline; gap: 12px; padding-block: 12px; border-block: 1px solid var(--line); }
.price-product .discount-box { display: flex; align-items: center; gap: 8px; }
.price-product .off { background: var(--accent); color: #fff; font-weight: 800; font-size: .8rem; padding: 4px 10px; border-radius: 999px; }
.price-product .price-discount { color: var(--ink2); text-decoration: line-through; }
.price-product .price-org { margin-inline-start: auto; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--accent); }
.price-product .price-org span { font-size: .9rem; color: var(--ink); font-weight: 700; }
.btn-add-price a { display: block; text-align: center; padding: 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; transition: .3s var(--ease); }
.btn-add-price a:hover { background: var(--accent2); }
.container-image { display: grid; gap: 14px; }
.box-image { display: grid; grid-template-columns: 1fr; gap: 14px; }
.product-showcase { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--bg2); }
.img-big { position: absolute; inset: 0; display: none; }
.img-big.show { display: block; }
.img-big img { width: 100%; height: 100%; object-fit: cover; }
.video-big { position: absolute; inset: 0; display: none; }
.video-big.show { display: block; }
.video-big video { width: 100%; height: 100%; object-fit: cover; }
.list-images { }
.product-slider { display: flex; gap: 10px; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; }
.product-slider::-webkit-scrollbar { display: none; }
.product-slider li { flex: 0 0 74px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; opacity: .65; cursor: pointer; }
.product-slider li.active { border-color: var(--accent); opacity: 1; }
.product-slider .product-images { aspect-ratio: 4/5; background-size: cover; background-position: center; }
.like-share { display: flex; gap: 10px; list-style: none; padding: 0; }
.like-share img { width: 22px; height: 22px; }
.img-zoom-lens { position: absolute; border: 1px solid var(--line2); width: 120px; height: 120px; display: none; pointer-events: none; }
.img-zoom-lens.show { display: block; }
.image-result-zoom-big { position: absolute; width: 320px; height: 320px; background-repeat: no-repeat; border: 1px solid var(--line); border-radius: var(--r-md); z-index: 40; display: none; }
.image-result-zoom-big.show { display: block; }
.row-comment-detail { margin-top: 28px; }
.head-row { display: flex; gap: 28px; list-style: none; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.head-row li a { display: block; padding: 14px 2px; font-weight: 700; color: var(--ink2); white-space: nowrap; cursor: pointer; }
.head-row li.active a { color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--accent); }
.detail-product, .description-product, .comment-product { padding-top: 26px; }
.title-section-product { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; }
.specs { list-style: none; padding: 0; max-width: 680px; }
.specs li { display: flex; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.specs .title { color: var(--ink2); }
.show-more a { color: var(--accent); font-weight: 700; cursor: pointer; }
.box-desc { color: var(--ink2); max-width: 72ch; }

/* ---- product list ---- */
.products-list-container, .products-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.sidebar-filter, .advanced-filter { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.sort-list { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line2); font-weight: 700; }
.pagination .active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- basket sidebar (legacy ids) ---- */
.list-basket { position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 94vw); z-index: 180; background: var(--bg); transform: translateX(-105%); transition: transform .5s var(--ease); display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); }
.list-basket.show { transform: none; }
.header-basket { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.header-basket h3 { font-size: 1.05rem; font-weight: 800; }
.close-basket { cursor: pointer; }
.body-basket { flex: 1; overflow-y: auto; padding: 8px 22px; }
.list-select-basket { list-style: none; padding: 0; }
.list-select-basket .row-box { display: flex; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.list-select-basket .img-item img { width: 64px; height: 76px; object-fit: cover; border-radius: var(--r-sm); }
.total-basket { display: flex; justify-content: space-between; font-weight: 800; padding-block: 16px; }
.footer-basket { border-top: 1px solid var(--line); padding: 16px 22px; display: grid; gap: 8px; }
.btn-basket { display: block; text-align: center; padding: 12px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; }
.btn-basket.hide { display: none; }

/* ---- forms / tables generic ---- */
.form-control, input.form-control, select.form-control, textarea.form-control { border-radius: 14px; }
table { border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; }

/* ---- order / information layout ---- */
.holder-basket-page { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 20px 44px; }
.holder-basket-page .row-box { display: contents; }
.col-list-basket { min-width: 0; }
.col-factor-basket { position: sticky; top: calc(var(--header-h) + 20px); }
.list-basket-fact-container { display: grid; gap: 16px; }
.data-user-shop { list-style: none; padding: 0; display: grid; gap: 14px; }
.data-user-shop > li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.data-user-shop .title { display: flex; gap: 12px; align-items: center; }
.data-user-shop .title img { width: 22px; height: 22px; }
.data-user-shop .value { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.format-payment h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 12px; }
.format-payment .format { list-style: none; padding: 0; display: grid; gap: 10px; }
.format-payment .format > li { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 14px; }
.format-payment .format > li.active { border-color: var(--accent); background: rgba(239,57,78,.05); }
.format-payment label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.btn-outline, .btn-fill, .btn-basket, .btn-cancel, .btn-submit { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.btn-fill, .btn-basket, .btn-submit { background: var(--accent); color: #fff; }
.btn-outline, .btn-cancel { border: 1px solid var(--line2); color: var(--ink); }
.btn-basket.for-factor { display: none; }
.item-checks { display: flex; align-items: center; gap: 10px; }
.item-checks input { accent-color: var(--accent); }
.list-select-basket { list-style: none; padding: 0; }
.list-select-basket .row-box { position: relative; }
.list-select-basket .img-item img { width: 92px; height: 110px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg2); }
.alert-product .item-alert { display: flex; gap: 8px; align-items: flex-start; background: var(--bg2); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; font-size: .82rem; }
.alert-product .item-alert img { width: 18px; height: 18px; }
.count-delete-list { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ---- dialogs / overlays (legacy) ---- */
.holder-dialog-dateselect, .holder-dialog-basket-address, .holder-dialog-address, .holder-dialog-sort, .holder-dialog-filter, .holder-dialog-contact { display: none; }
.holder-dialog-dateselect.show, .holder-dialog-basket-address.show, .holder-dialog-address.show, .holder-dialog-sort.show, .holder-dialog-filter.show, .holder-dialog-contact.show { display: block; }
.dialog-dateselect, .dialog-basket-address, .dialog-address, .dialog-sort, .dialog-filter { position: fixed; z-index: 200; top: 50%; left: 50%; translate: -50% -50%; width: min(560px, 94vw); max-height: 88vh; overflow: auto; background: var(--bg); border-radius: var(--r-lg); padding: 18px; }
.head-dialog { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.close-dialog { cursor: pointer; }
.list-address { list-style: none; padding: 0; display: grid; gap: 10px; }
.item-address { border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 14px; }
.item-address.active { border-color: var(--accent); }
.item-add-address { text-align: center; padding: 12px; border: 1px dashed var(--line2); border-radius: var(--r-sm); color: var(--accent); font-weight: 700; cursor: pointer; }
.form-item { margin-bottom: 14px; }
.form-item label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.form-item input, .form-item select, .form-item textarea { width: 100%; background: var(--bg); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 16px; font: inherit; color: inherit; outline: none; }
.row-box .order-1, .row-box .order-2 { display: block; }
.btn-box-address { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* ---- panel legacy ---- */
.profile-container { display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start; padding-block: 22px 44px; }
.sidebar-profile { position: sticky; top: calc(var(--header-h) + 20px); }
.content-profile { min-width: 0; }
.title-box { font-size: 1.3rem; font-weight: 900; margin-bottom: 16px; }
.container-inner-profile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.list-info { list-style: none; padding: 0; }
.list-info li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.list-info .title { color: var(--ink2); }
.container-sidebar .user-info { background: linear-gradient(120deg,#EF394E,#D71921); color: #fff; border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; }
.container-sidebar .side-info { list-style: none; padding: 0; display: grid; gap: 4px; }
.container-sidebar .side-info a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--ink2); font-weight: 600; }
.container-sidebar .side-info li.active a { background: var(--accent); color: #fff; }
.container-sidebar .side-info a img { width: 20px; height: 20px; }
.subtitle-page { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: .9rem; }
.subtitle-page img { width: 18px; height: 18px; }
.empty-table { text-align: center; padding: 48px 16px; color: var(--ink2); }
.table-responsive { overflow-x: auto; }

/* ============ NAVBAR (legacy structure, theme2 skin) ============ */
.navbar-wrapper { position: sticky; top: 0; z-index: 90; }
.navbar-wrapper.hide-lt-sm { }
.navbar-wrapper .header { background: linear-gradient(120deg,#EF394E,#D71921); color: #fff; }
.navbar-wrapper .header .container-all { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.navbar-wrapper .logo-search { display: flex; align-items: center; gap: 20px; flex: 1; }
.navbar-wrapper .logo-box { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; color: #fff; white-space: nowrap; }
.navbar-wrapper .logo-menu-mobile { display: none; align-items: center; gap: 12px; }
.navbar-wrapper .btn-category { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 700; color: #fff; }
.navbar-wrapper .search-box { position: relative; flex: 1; max-width: 640px; }
.navbar-wrapper .field-default-search { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.16); border-radius: 999px; padding: 11px 18px; cursor: text; }
.navbar-wrapper .field-default-search .input-field { color: rgba(255,255,255,.8); font-size: .92rem; }
.navbar-wrapper .field-default-search .ic, .navbar-wrapper .btn-search .ic { color: #fff; }
.navbar-wrapper .search-list-box { display: none; position: absolute; top: calc(100% + 10px); inset-inline: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(30,32,37,.18); padding: 14px; z-index: 120; }
.navbar-wrapper .search-list-box.show { display: block; }
.navbar-wrapper .field-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); border-radius: 999px; padding: 10px 16px; }
.navbar-wrapper .field-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; color: inherit; }
.navbar-wrapper .option-search { list-style: none; padding: 0; margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.navbar-wrapper .header-box-search { color: var(--ink2); font-size: .8rem; padding: 8px 4px; display: flex; align-items: center; gap: 8px; }
.navbar-wrapper .content-cat-search { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; }
.navbar-wrapper .content-cat-search a { padding: 7px 14px; border-radius: 999px; background: var(--bg2); font-size: .85rem; }
.navbar-wrapper .content-cat-search a:hover { background: var(--accent); color: #fff; }
.navbar-wrapper .user-cart { display: flex; align-items: center; gap: 10px; }
.navbar-wrapper .user-box, .navbar-wrapper .shopping-card-box { display: inline-flex; align-items: center; gap: 8px; color: #fff; cursor: pointer; font-size: .9rem; font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.navbar-wrapper .shopping-card-box { position: relative; }
.navbar-wrapper .shopping-card-box i { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 19px; height: 19px; padding-inline: 4px; background: #fff; color: #D71921; border-radius: 999px; font-size: 11px; font-weight: 800; display: grid; place-items: center; font-style: normal; }
.navbar-wrapper .dropdown-profile { position: absolute; top: calc(100% + 12px); inset-inline-end: 0; width: 280px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(30,32,37,.18); padding: 14px; z-index: 120; }
.navbar-wrapper .dropdown-profile.hide { display: none; }
.navbar-wrapper .dropdown-profile .user-info a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.navbar-wrapper .dropdown-profile .user-info a:hover { background: var(--bg2); }
.navbar-wrapper .dropdown-profile .img img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.navbar-wrapper .list-nav-dropdown { list-style: none; padding: 6px 0 0; margin-top: 6px; border-top: 1px solid var(--line); }
.navbar-wrapper .list-nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; font-size: .9rem; }
.navbar-wrapper .list-nav-dropdown a:hover { background: var(--bg2); }
.navbar-wrapper .navbar { background: var(--bg); border-bottom: 1px solid var(--line); color: var(--ink); }
.navbar-wrapper .navbar .container-all { display: flex; align-items: center; gap: 22px; }
.navbar-wrapper .navbar .btn-category { color: var(--ink); padding-block: 14px; }
.navbar-wrapper .list-category-nav { flex: 1; position: relative; }
.navbar-wrapper .nav-top { display: flex; gap: 22px; list-style: none; padding: 0; }
.navbar-wrapper .nav-top-item a { display: block; padding-block: 14px; font-size: .92rem; color: var(--ink2); white-space: nowrap; }
.navbar-wrapper .nav-top-item.active a, .navbar-wrapper .nav-top-item:hover a { color: var(--accent); }
.navbar-wrapper .subcat-nav { display: none; position: absolute; top: 100%; inset-inline: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 30px 60px rgba(30,32,37,.16); padding: 20px; z-index: 110; }
.navbar-wrapper .list-category-nav.show .subcat-nav { display: block; }
.navbar-wrapper .content-tab { display: none; }
.navbar-wrapper .content-tab.active { display: block; }
.navbar-wrapper .sub-cat-item-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.navbar-wrapper .sub-cat-item a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; font-size: .88rem; }
.navbar-wrapper .sub-cat-item a:hover { background: var(--bg2); }
.navbar-wrapper .sub-cat-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 8px; }
.navbar-wrapper .box-list-sub-subcategory { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.navbar-wrapper .list-sub-subcategory { display: none; list-style: none; padding: 0; grid-template-columns: repeat(4,1fr); gap: 6px; }
.navbar-wrapper .list-sub-subcategory.active { display: grid; }
.navbar-wrapper .list-sub-subcategory a { font-size: .85rem; color: var(--ink2); }
.navbar-wrapper .list-sub-subcategory .heading-cat a { font-weight: 800; color: var(--ink); }
.navbar-wrapper .overlay-cat { position: fixed; inset: 0; z-index: 100; background: rgba(30,32,37,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.navbar-wrapper .overlay-cat.show { opacity: 1; pointer-events: auto; }

/* mobile category drawer */
.list-category-mobile { position: fixed; top: 0; bottom: 0; right: 0; width: min(340px,90vw); z-index: 190; background: var(--bg); transform: translateX(105%); transition: transform .5s var(--ease); overflow-y: auto; padding: 18px; }
.list-category-mobile.show { transform: none; }
.list-category-mobile .logo-close { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.list-category-mobile .cat-list { list-style: none; padding: 0; }
.list-category-mobile .cat-item { position: relative; border-bottom: 1px solid var(--line); }
.list-category-mobile .cat-item > a { display: block; padding: 13px 4px; font-weight: 600; }
.list-category-mobile .cat-item .arrow { position: absolute; top: 12px; inset-inline-start: 0; cursor: pointer; }
.list-category-mobile .sub-cat-list { display: none; list-style: none; padding-inline-start: 14px; }
.list-category-mobile .cat-item.show > .sub-cat-list { display: block; }

/* basket sidebar */
.list-basket { position: fixed; top: 0; bottom: 0; left: 0; width: min(420px,94vw); z-index: 180; background: var(--bg); transform: translateX(-105%); transition: transform .5s var(--ease); display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); }
.list-basket.show { transform: none; }
.header-basket { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.header-basket h3 { font-size: 1.05rem; font-weight: 800; }
.close-basket { cursor: pointer; }
.body-basket { flex: 1; overflow-y: auto; padding: 8px 22px; }
.empty-basket { display: grid; place-content: center; justify-items: center; gap: 12px; padding-block: 64px; color: var(--ink2); }
.empty-basket img { width: 56px; height: 56px; }
.list-select-basket .row-box { position: relative; }
.list-select-basket .content-item { display: flex; gap: 12px; }
.list-select-basket .img-item img { width: 76px; height: 92px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg2); }
.list-select-basket .title-count h3 { font-size: .92rem; font-weight: 700; line-height: 1.7; }
.list-select-basket .price-item-basket { margin-inline-start: auto; text-align: end; }
.list-select-basket .price-item-basket .off { background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.list-select-basket .price-item-basket .price-discount { color: var(--ink2); text-decoration: line-through; font-size: .78rem; }
.list-select-basket .price-item-basket .price-org { font-weight: 800; font-size: .9rem; }
.list-select-basket .delete-item { position: absolute; top: 14px; inset-inline-start: 0; cursor: pointer; opacity: .6; }
.list-select-basket .delete-item:hover { opacity: 1; }
.total-basket { display: flex; justify-content: space-between; align-items: center; font-weight: 800; padding-block: 16px; }
.total-basket .price i { font-style: normal; font-size: .75rem; color: var(--ink2); }
.footer-basket { border-top: 1px solid var(--line); padding: 16px 22px; display: grid; gap: 8px; }
.footer-basket .btn-basket.hide { display: none; }

/* ---- product list filter/sort/pagination (legacy) ---- */
.row-products-page { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; padding-block: 20px 44px; }
.col-advanced-filter { min-width: 0; }
.holder-sticky-filter { position: sticky; top: calc(var(--header-h) + 20px); }
.col-list-products { min-width: 0; }
.advanced-filter-container { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; display: grid; gap: 16px; }
.category-filter .title-filter { font-weight: 800; margin-bottom: 10px; }
.list-cat-filter, .list-subcat-filter, .list-child-subcat-filter { list-style: none; padding: 0; display: grid; gap: 4px; }
.item-cat-filter a, .item-cat-filter { font-size: .9rem; color: var(--ink2); padding: 6px 0; display: block; }
.item-cat-filter.active > a, .item-cat-filter a:hover { color: var(--accent); }
.sublist-filter { padding-inline-start: 14px; }
.box-filter-price .range-box { margin-top: 10px; }
.box-filter-price input[type=range] { width: 100%; accent-color: var(--accent); }
.box-filter-price .progress { display: none; }
.category-top-products-desktop { margin-bottom: 18px; }
.category-top-products-container { position: relative; }
.category-top-products-container .list-cat { display: flex; gap: 10px; list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; }
.item-cat-pr a { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2); font-size: .85rem; white-space: nowrap; }
.item-cat-pr.active a { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-arrow-cat { display: none; }
.list-sort-products { min-width: 0; }
.sort-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sort-box .list-items-sort { display: flex; gap: 8px; flex-wrap: wrap; }
.item-sort { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line2); font-size: .85rem; font-weight: 700; cursor: pointer; }
.item-sort.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.count-products { color: var(--ink2); font-size: .85rem; }
.list-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.container-pagination { display: flex; justify-content: center; margin-top: 40px; }
.list-pagination { display: flex; gap: 8px; list-style: none; padding: 0; flex-wrap: wrap; }
.item-pagination { min-width: 42px; height: 42px; padding-inline: 12px; border-radius: 12px; border: 1px solid var(--line2); display: grid; place-items: center; font-weight: 700; cursor: pointer; }
.item-pagination.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.item-pagination.disable { opacity: .45; pointer-events: none; }
.item-pagination.separator { border: none; }
.filter-mobile, .show-filters-mobile { display: none; }

/* ---- legacy header clearance ---- */
.header-mobile { display: none; }
.main { min-height: 50vh; }

/* ---- credit / club legacy ---- */
.sum-credit { margin-bottom: 20px; }
.card-credit-sum { background: linear-gradient(120deg,#EF394E,#D71921); color: #fff; border-radius: var(--r-lg); padding: 24px 28px; }
.card-credit-sum h5 { font-size: .85rem; opacity: .9; }
.card-credit-sum h6 { font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 900; margin-top: 6px; }
.card-credit-sum h6 span { font-size: .9rem; font-weight: 500; }
.container-credit, .container-invitefriend, .container-contactus { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.list-credit-mobile { list-style: none; padding: 0; }
.list-credit-mobile .item { border-bottom: 1px solid var(--line); padding-block: 14px; }
.list-credit-mobile .detail { list-style: none; padding: 0; display: grid; gap: 6px; }
.list-credit-mobile .detail li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.list-credit-mobile .title { color: var(--ink2); }

/* ---- invite legacy ---- */
.top-invited { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; }
.col-stepper .number { list-style: none; padding: 0; display: flex; gap: 20px; font-weight: 800; color: var(--ink2); }
.col-stepper .text { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 14px; }
.col-stepper .text li { display: flex; gap: 12px; align-items: flex-start; }
.col-stepper .number-item { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .82rem; flex-shrink: 0; }
.col-gift { background: var(--bg2); border-radius: var(--r-md); padding: 18px; text-align: center; }
.col-gift img { max-width: 120px; margin-inline: auto; }
.col-gift h3 { font-size: 1.15rem; font-weight: 800; margin-top: 12px; }
.col-gift h6 { color: var(--ink2); font-weight: 500; margin-top: 8px; }
.link-code-invite { display: grid; gap: 10px; margin-top: 16px; }
.code-box { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--line2); border-radius: 12px; padding: 10px 14px; }
.code-box .code { font-weight: 800; letter-spacing: 2px; direction: ltr; }
.btn-copy, .btn-invite { cursor: pointer; color: var(--accent); font-weight: 700; }
.btn-invite { text-align: center; border: 1px solid var(--accent); border-radius: 999px; padding: 10px; }
.history-box { margin-top: 28px; }
.credits-earned { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.item-cr { background: var(--bg2); border-radius: var(--r-md); padding: 14px; }
.item-cr .title { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: .9rem; }
.item-cr .value { font-size: 1.3rem; font-weight: 900; margin-top: 8px; }
.description-invite { color: var(--ink2); font-size: .88rem; margin-bottom: 18px; }
.title-list-box { margin-top: 20px; }
.btn-help-invite { text-align: center; color: var(--accent); font-weight: 700; margin-top: 16px; cursor: pointer; }

/* ---- notifications legacy ---- */
.list-notification { list-style: none; padding: 0; display: grid; gap: 12px; }
.item-notification { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.item-notification.unread { border-color: var(--accent); }

/* ---- poll legacy ---- */
.poll-box, .box-poll { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.poll-option { display: flex; align-items: center; gap: 10px; padding: 10px 0; }

/* ---- payment response legacy ---- */
.confirm-tbl { text-align: center; padding: 40px 16px; }
.box .inner-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }

/* ---- mobile bottom nav clearance ---- */
@media (max-width: 1024px) {
  .holder-basket-page, .profile-container { grid-template-columns: 1fr; }
  .col-factor-basket, .sidebar-profile { position: static; }
}
@media (max-width: 991px) { body { padding-bottom: 64px; } }

/* ---- responsive visibility utilities (legacy vocabulary) ---- */
.show-lt-sm { display: none !important; }
@media only screen and (max-width: 1024px) {
  .hide-lt-sm { display: none !important; }
  .show-lt-sm { display: block !important; }
}

/* ---- mobile carousel fallbacks (grid scroller) ---- */
.carousel-best-sellers-mobile,
.amazing-offer-carousel-mobile { display: none; }

@media only screen and (max-width: 1024px) {
  .carousel-best-sellers-mobile,
  .amazing-offer-carousel-mobile {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 2px;
    scrollbar-width: none;
  }
  .carousel-best-sellers-mobile::-webkit-scrollbar,
  .amazing-offer-carousel-mobile::-webkit-scrollbar { width: 0; display: none; }
  .carousel-best-sellers-mobile li,
  .amazing-offer-carousel-mobile li { width: 100%; }
}