/* ============ OVERLAY: DRAWER GIỎ HÀNG, SEARCH, MODAL, FORM, TOAST ============ */
  .overlay-bg{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; opacity:0; pointer-events:none; transition:opacity .3s;}
  .overlay-bg.show{opacity:1; pointer-events:auto;}
  .drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--card); z-index:95; transform:translateX(100%); transition:transform .35s ease; display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,.15);}
  .drawer.show{transform:translateX(0);}
  .drawer-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line);}
  .drawer-head h3{margin:0; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.1em;}
  .drawer-body{flex:1; overflow-y:auto; padding:18px 24px;}
  .close-x{background:none; border:none; font-size:20px; color:var(--ink); line-height:1;}

  .search-panel{position:fixed; top:0; left:0; width:100%; background:var(--bg); z-index:95; transform:translateY(-100%); transition:transform .3s ease; border-bottom:1px solid var(--line);}
  .search-panel.show{transform:translateY(0);}
  .search-inner{max-width:800px; margin:0 auto; padding:50px 24px;}
  .search-inner input{width:100%; border:none; border-bottom:2px solid var(--ink); background:transparent; font-family:'Inter',sans-serif; font-weight:300; font-size:30px; padding:10px 0; color:var(--ink);}
  .search-sugg{margin-top:24px; display:flex; flex-wrap:wrap; gap:10px;}
  .chip{border:1px solid var(--line); padding:8px 16px; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
  .search-results{margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  @media(max-width:720px){.search-results{grid-template-columns:repeat(2,1fr);} .search-inner input{font-size:22px;}}

  .cart-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
  .cart-line img{width:76px; height:96px; object-fit:cover; background:var(--bg-alt);}
  .cart-line-info{flex:1;}
  .cart-line-info h4{margin:0 0 6px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.03em;}
  .cart-line-info .meta{font-size:11.5px; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:8px;}
  .qty-stepper{display:flex; align-items:center; border:1px solid var(--line); width:fit-content;}
  .qty-stepper button{background:none; border:none; width:26px; height:26px;}
  .qty-stepper span{width:28px; text-align:center; font-family:'Inter',sans-serif; font-size:12.5px;}
  .remove-link{font-size:11.5px; color:var(--ink-soft); text-decoration:underline; margin-top:8px; background:none; border:none; padding:0;}
  .drawer-foot{border-top:1px solid var(--line); padding:20px 24px;}
  .subtotal-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:14px;}

  .modal-center{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); background:var(--card); z-index:99; width:460px; max-width:92vw; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:all .3s;}
  .modal-center.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
  .modal-pad{padding:32px;}
  .form-row{margin-bottom:16px;}
  .form-row label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:500; color:var(--ink-soft); margin-bottom:8px;}
  .form-row input, .form-row select, .form-row textarea{width:100%; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:12px; font-size:14px; font-family:inherit; transition:border-color .15s;}
  .form-row.has-error input, .form-row.has-error textarea{border-color:#B23A3A;}
  .field-error{color:#B23A3A; font-size:11.5px; margin-top:6px; display:none;}
  .form-row.has-error .field-error{display:block;}
  .form-2col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .order-review{background:var(--bg-alt); padding:14px; font-size:13px; margin-bottom:18px;}
  .order-review .ln{display:flex; justify-content:space-between; padding:5px 0;}

  .toast-wrap{position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px;}
  .toast{background:var(--ink); color:var(--bg); padding:14px 20px; font-size:13px; box-shadow:var(--shadow); display:flex; gap:10px; align-items:center; animation:slidein .3s ease; max-width:320px;}
  @keyframes slidein{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}}

  .fab-top{position:fixed; bottom:24px; left:24px; background:var(--ink); color:var(--bg); width:42px; height:42px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; z-index:50;}
  .fab-top.show{opacity:1; pointer-events:auto;}

  .fab-chat{position:fixed; bottom:24px; right:24px; z-index:56; display:flex; flex-direction:column; gap:12px; align-items:flex-end;}
  .fab-chat a{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); color:#fff; font-size:24px; animation:bob 2.6s ease-in-out infinite;}
  .fab-chat a.zalo{background:var(--zalo);}
  .fab-chat a.messenger{background:var(--messenger);}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
  @media(max-width:720px){.fab-chat{bottom:74px;} .fab-top{bottom:74px;}}

  .bottom-nav{display:none;}
  @media(max-width:720px){
    .bottom-nav{display:flex; position:fixed; bottom:0; left:0; width:100%; background:var(--card); border-top:1px solid var(--line); z-index:55; padding:8px 0;}
    .bottom-nav button{flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9.5px; letter-spacing:.02em; white-space:nowrap; color:var(--ink-soft);}
    .bottom-nav svg{width:19px; height:19px;}
    body{padding-bottom:56px;}
  }