*{box-sizing:border-box;}

body{
 margin:0;
 font-family:arial,sans-serif;
}

body,html{
 overflow-x:hidden;
 scrollbar-gutter:stable;
 touch-action:pan-x pan-y;
}

/* ===== menu ===== */
.quick-menu{
 display:flex;
 justify-content:center;
 gap:12px;
 padding:12px;
 background:#fff;
}

.qm-item{
 padding:6px 10px;
 border-radius:12px;
 background:#f5f5f5;
 color:#333;
 text-decoration:none;
 font-weight:500;
 font-size:13px;
}

.qm-item:hover{
 background:#eaeaea;
}

.qm-item.hot{
 background:#ee4d2d;
 color:#fff;
}

.qm-item.hot:hover{
 background:#d83c1f;
}

/* ===== search ===== */
.search-container{
 padding:0 10px;
 margin-bottom:10px;
}

.search-wrap{
 display:flex;
 align-items:center;
 border:2px solid #ee4d2d;
 border-radius:10px;
 overflow:hidden;
 background:#fff;
}

#searchBox{
 flex:1;
 padding:10px 12px;
 font-size:16px;
 border:none;
 outline:none;
 background:transparent;
 font-weight:500;
 color:#222;
 min-width:0;
}

#searchBox::placeholder{
 color:#aaa;
 font-weight:400;
}

.search-clear-btn{
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0 8px;
 background:transparent;
 border:none;
 cursor:pointer;
 flex-shrink:0;
 opacity:0.85;
}

.search-clear-btn:active{
 opacity:0.6;
}

.search-submit-btn{
 display:flex;
 align-items:center;
 justify-content:center;
 width:48px;
 height:44px;
 background:#ee4d2d;
 border:none;
 cursor:pointer;
 flex-shrink:0;
 transition:background .15s;
}

.search-submit-btn:hover{
 background:#d83c1f;
}

.search-submit-btn:active{
 background:#c03318;
}

/* ===== action buttons ===== */
.action-row{
 display:flex;
 gap:10px;
 margin:15px 10px 10px;
}

.action-row button{
 flex:1;
 padding:14px 0;
 border-radius:10px;
 border:none;
 background:#f0f0f0;
 font-weight:bold;
 color:#007aff;
 font-size:15px;
}

/* ===== grid ===== */
.products{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:6px;
}

@media (min-width:600px){
 .products{
  grid-template-columns:repeat(4,1fr);
  gap:8px;
 }
}

@media (min-width:1200px){
 .products{
  grid-template-columns:repeat(6,1fr);
 }
}

/* ===== item ===== */
.item{
 padding:0;
 border:none;
 text-align:center;
 position:relative;
}

.thumb{
 position:relative;
 width:100%;
 aspect-ratio:1/1;
 overflow:hidden;
 background:#fff;
 border-radius:10px;
}

.thumb img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

.price{
 margin:4px 0 0;
 font-size:14px;
 font-weight:bold;
 color:#ee4d2d;
 text-align:center;
}

/* ===== add button ===== */
.add-btn{
 position:absolute;
 bottom:6px;
 right:6px;
 width:34px;
 height:34px;
 background:#ffe5cc;
 border:1px solid #ff9933;
 color:#ff6600;
 text-align:center;
 line-height:34px;
 font-size:30px;
 border-radius:8px;
 z-index:5;
 cursor:pointer;
 transition:transform .1s ease;
 -webkit-tap-highlight-color:transparent;
}
.add-btn:active{
 transform:scale(0.9);
}

/* ===== cart icon ===== */
.cart-icon{
 position:fixed;
 top:10px;
 right:10px;
 background:#fff;
 padding:6px 10px;
 border-radius:10px;
 z-index:2000;
 cursor:pointer;
}

#cart-count{
 background:red;
 color:#fff;
 padding:2px 6px;
 border-radius:50%;
 margin-left:5px;
}

/* ===== cart box ===== */
.cart-box{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 width:100%;
 height:100dvh;
 background:#fff;
 transform:translateY(100%);
 transition:transform .32s cubic-bezier(0.32,0.72,0,1);
 will-change:transform;
 overflow-y:auto;
 overflow-x:hidden;
 -webkit-overflow-scrolling:touch;
 overscroll-behavior:contain;
 touch-action:pan-y;
 z-index:9999;
 padding-top:10px;
}

.cart-box.show{
 transform:translateY(0);
}

/* ===== desktop: layout 2 cot ===== */
@media (min-width:900px){

 /* page-wrap: flex ngang, san pham ben trai, gio hang ben phai */
 #page-wrap{
  display:flex;
  align-items:flex-start;
 }

 /* page-main: phan san pham, scroll doc lap */
 #page-main{
  flex:1;
  min-width:0;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
 }

 /* khi gio hang mo: grid san pham ve 4 cot */
 body.cart-open #page-main .products{
  grid-template-columns:repeat(4,1fr);
 }

 /* cart-box: panel ben phai, khong fixed, scroll doc lap */
 .cart-box{
  position:sticky;
  top:0;
  left:auto;
  right:auto;
  width:0;
  min-width:0;
  height:100dvh;
  transform:none !important;
  overflow:hidden;
  transition:width .32s cubic-bezier(0.32,0.72,0,1), min-width .32s cubic-bezier(0.32,0.72,0,1), border .32s ease;
  border-left:none;
  box-shadow:none;
  flex-shrink:0;
  visibility:visible;
 }

 .cart-box.show{
  width:min(420px,34vw);
  min-width:min(420px,34vw);
  border-left:1px solid #e0e0e0;
  box-shadow:-4px 0 20px rgba(0,0,0,0.10);
  transform:none !important;
  overflow-y:auto;
  overflow-x:hidden;
 }

 /* tat overlay toi khi gio hang mo tren desktop */
 body.cart-open::before{
  display:none;
 }

 /* gio hang tren desktop khong can khoa trang */
 body.cart-open{
  overflow:auto;
  position:static;
  width:auto;
 }
}

/* ===== cart content ===== */
.cart-header{
 text-align:center;
 font-size:22px;
 cursor:pointer;
}

.cart-item{
 display:flex;
 align-items:center;
 gap:8px;
 margin:10px;
}

.cart-item img{
 width:40px;
 height:40px;
 object-fit:cover;
 flex-shrink:0;
}

.cart-item .info{
 flex:1;
 font-size:13px;
 line-height:1.2;
}

.cart-item .info .name{
 font-size:13px;
}

.cart-item .info .price{
 font-size:12px;
 color:#888;
}

.qty{
 display:flex;
 align-items:center;
 gap:6px;
 margin-left:auto;
 flex-shrink:0;
}

.qty button{
 padding:4px 8px;
 font-size:14px;
 border-radius:6px;
}

.del{
 color:red;
 border:1px solid red;
 border-radius:6px;
 padding:4px 8px;
 font-size:12px;
}

.clear-btn{
 width:100%;
 margin-top:10px;
 padding:10px;
 border:1px solid red;
 color:red;
 border-radius:8px;
}

/* ===== order button ===== */
.order-btn{
 margin:15px;
 padding:14px;
 text-align:center;
 background:#0068ff;
 color:#fff;
 font-weight:bold;
 border-radius:12px;
 cursor:pointer;
 box-shadow:0 4px 10px rgba(0,0,0,0.2);
 font-size:16px;
}

.order-btn:hover{
 background:#0052cc;
}

.order-btn:active{
 transform:scale(0.97);
}

/* ===== toast ===== */
.toast{
 position:fixed;
 top:20px;
 left:50%;
 transform:translateX(-50%);
 background:#4da6ff;
 color:#fff;
 padding:8px 14px;
 border-radius:20px;
 opacity:0;
 transition:.3s;
 z-index:99999;
}

.toast.show{
 opacity:1;
}

/* ===== note ===== */
.note{
 text-align:center;
 padding:10px;
 font-weight:bold;
}

/* ===== top button ===== */
#topBtn{
 position:fixed;
 bottom:20px;
 right:12px;
 width:44px;
 height:44px;
 background:rgba(0,0,0,0.6);
 color:#fff;
 border:none;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:18px;
 backdrop-filter:blur(4px);
 box-shadow:0 4px 12px rgba(0,0,0,0.25);
 z-index:9998;
 cursor:pointer;
 opacity:0;
 pointer-events:none;
 transition: transform .35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#topBtn:active{
 transform:scale(0.9);
}

/* ===== lock scroll ===== */
body.cart-open{
 overflow:hidden;
 position:fixed;
 width:100%;
}
#pagination {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
 margin: 20px 0 80px;
}

#pagination button {
 min-width: 44px;
 height: 44px;
 font-size: 16px;
 border-radius: 10px;
 border: none;
 background: #eee;
 font-weight: bold;
}

#pagination button.active {
 background: #ff6600;
 color: #fff;
}

#confirmBox{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:99999;
}

.confirm-overlay{
 position:absolute;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.4);
}

.confirm-content{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 background:#fff;
 padding:20px;
 border-radius:12px;
 width:80%;
 max-width:300px;
 text-align:center;
}

.confirm-text{
 margin-bottom:15px;
 font-weight:bold;
}

.confirm-actions{
 display:flex;
 gap:10px;
}

.confirm-actions button{
 flex:1;
 padding:10px;
 border:none;
 border-radius:8px;
 font-weight:bold;
}

.confirm-actions button:first-child{
 background:#ff3b30;
 color:#fff;
}

.confirm-actions button:last-child{
 background:#eee;
}

.dong{
    font-size:10px;
    margin-left:2px;
    vertical-align:super;
    opacity:0.7;
}

/* ===== cart back button ===== */
.cart-back-btn{
 position:fixed;
 top:10px;
 left:10px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:64px;
 height:54px;
 background:#ff6600;
 color:#fff;
 font-size:28px;
 font-weight:bold;
 border:none;
 border-radius:14px;
 box-shadow:0 4px 12px rgba(255,102,0,0.45);
 cursor:pointer;
 z-index:10001;
 transition:transform .1s cubic-bezier(0.34,1.56,0.64,1), box-shadow .1s ease;
 -webkit-tap-highlight-color:transparent;
}
.cart-back-btn:active{
 transform:scale(0.93);
 box-shadow:0 1px 5px rgba(255,102,0,0.3);
}

/* ===== lightbox ===== */
#lightbox{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0);
 z-index:50000;
 align-items:center;
 justify-content:center;
 display:flex;
 pointer-events:none;
 transition:background .28s ease;
 touch-action:none;
 overscroll-behavior:contain;
}
#lightbox.show{
 background:rgba(0,0,0,0.82);
 pointer-events:all;
}
#lightbox-inner{
 position:relative;
 max-width:90vw;
 display:flex;
 flex-direction:column;
 align-items:center;
 opacity:0;
 transform:scale(0.88) translateY(12px);
 transition:opacity .22s ease, transform .32s cubic-bezier(0.34,1.56,0.64,1);
 will-change:transform,opacity;
}
#lightbox.show #lightbox-inner{
 opacity:1;
 transform:scale(1) translateY(0);
}
#lightbox-inner img{
 max-width:90vw;
 max-height:65vh;
 border-radius:12px 12px 0 0;
 object-fit:contain;
 display:block;
 box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
#lightbox-info{
 width:100%;
 background:rgba(0,0,0,0.62);
 backdrop-filter:blur(6px);
 border-radius:0;
 padding:8px 12px 10px;
 color:#fff;
}
#lightbox-name{
 font-size:13px;
 line-height:1.4;
 color:#ddd;
 margin-bottom:4px;
}
#lightbox-price{
 font-size:22px;
 font-weight:bold;
 color:#ffcc00;
}
#lightbox-add{
 flex:0 0 auto;
 padding:0 18px;
 background:#ff6600;
 border:none;
 color:#fff;
 text-align:center;
 font-size:13px;
 font-weight:bold;
 line-height:1.3;
 border-radius:0 0 12px 0;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 white-space:nowrap;
 min-height:52px;
}
#lightbox-bottom{
 width:100%;
 display:flex;
 align-items:stretch;
 background:rgba(0,0,0,0.75);
 border-radius:0 0 12px 12px;
 overflow:hidden;
 min-height:52px;
}
#lightbox-qty{
 display:flex;
 align-items:center;
 justify-content:flex-end;
 flex:1;
 gap:8px;
 padding:6px 10px 6px 12px;
}
#lightbox-qty-label{
 color:rgba(255,255,255,0.7);
 font-size:12px;
 margin-right:auto;
 align-self:center;
 white-space:nowrap;
}
#lightbox-qty button{
 width:38px;
 height:38px;
 min-width:38px;
 min-height:38px;
 border:2px solid rgba(255,255,255,0.55);
 border-radius:50%;
 background:rgba(255,255,255,0.13);
 color:#fff;
 font-size:22px;
 font-weight:bold;
 cursor:pointer;
 line-height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
 box-sizing:border-box;
 -webkit-appearance:none;
 appearance:none;
 padding:0;
}
#lightbox-qty button:active{
 background:rgba(255,255,255,0.3);
 transform:scale(0.92);
}
#lb-qty-num{
 color:#fff;
 font-size:20px;
 font-weight:bold;
 min-width:26px;
 text-align:center;
}
/* ===== desktop: cart-back-btn nam trong panel ===== */
@media (min-width:900px){
 .cart-back-btn{
  position:static;
  width:42px;
  height:36px;
  font-size:20px;
  border-radius:10px;
  flex-shrink:0;
  margin:8px 0 8px 8px;
 }
}

/* ===== item fade-in khi load them ===== */


/* ===== nút hàng mới nổi bật ===== */
.action-row .hang-moi{
 background:#fff3eb;
 color:#ff6600;
 border:1.5px solid #ff6600;
 font-weight:700;
 animation:newPulse 2.2s ease-in-out infinite;
}
.action-row .hang-moi:hover{
 background:#ff6600;
 color:#fff;
 animation:none;
}
@keyframes newPulse{
 0%,100%{ box-shadow:0 0 0 0 rgba(255,102,0,0.35); }
 50%    { box-shadow:0 0 0 6px rgba(255,102,0,0); }
}

/* ===== nút play YouTube ===== */
.yt-btn{
 position:absolute;
 bottom:0;
 right:42%;
 padding:3px 7px;
 background:#ff0000;
 color:#fff;
 font-size:12px;
 font-weight:700;
 border-radius:6px;
 z-index:5;
 cursor:pointer;
 touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;
 transition:transform .1s ease;
 display:inline-flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 line-height:1.2;
 text-align:center;
}
.yt-btn:active{
 transform:scale(0.92);
}

/* ===== popup video ===== */
#ytPopup{
 position:fixed;
 inset:0;
 z-index:99999;
 display:flex;
 align-items:center;
 justify-content:center;
}
#ytPopupOverlay{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,0.78);
}
#ytPopupBox{
 position:relative;
 width:100%;
 background:#000;
 border-radius:12px;
 overflow:hidden;
 z-index:1;
}
#ytPopupBox iframe{
 display:block;
 width:100%;
 aspect-ratio:9/16;
 max-height:78vh;
 border:none;
}
#ytPopupWrap{
 position:relative;
 z-index:1;
 display:flex;
 flex-direction:column;
 align-items:center;
 width:92vw;
 max-width:460px;
}
#ytPopupCloseBar{
 position:fixed;
 bottom:max(14px, env(safe-area-inset-bottom));
 left:50%;
 transform:translateX(-50%);
 z-index:2;
 display:block;
 padding:13px 22px;
 background:#fff;
 color:#111;
 font-size:14px;
 font-weight:800;
 border:none;
 border-radius:16px;
 cursor:pointer;
 white-space:nowrap;
 box-shadow:0 4px 14px rgba(0,0,0,0.45);
 touch-action:manipulation;
}
#ytPopupCloseBar:active{
 background:#eee;
}