/* ============ 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;}
  @media(max-width:720px){
    .modal-pad{padding:22px 18px;}
    .size-guide-table{font-size:11.5px;}
    .size-guide-table th{font-size:9px; padding:7px 2px;}
    .size-guide-table td{padding:8px 2px;}
    .brand-story-body p{font-size:13px; line-height:1.75;}
    .promo-popup{padding:32px 22px 26px;}
    .promo-popup-pct{font-size:30px;}
    .promo-popup-logo{font-size:20px;}
  }
  .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;}

  /* ============ BẢNG SIZE CHUẨN (kiểu Zara) ============ */
  .size-guide-table{width:100%; border-collapse:collapse; font-size:13px;}
  .size-guide-table th{text-align:center; padding:9px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600; border-bottom:1.5px solid var(--ink);}
  .size-guide-table th:first-child{text-align:left;}
  .size-guide-table td{text-align:center; padding:10px 4px; border-bottom:1px solid var(--line); font-family:'Inter',sans-serif;}
  .size-guide-table td:first-child{text-align:left; font-weight:700;}

  /* ============ CÂU CHUYỆN THƯƠNG HIỆU ============ */
  .brand-story-body p{font-size:13.5px; line-height:1.85; color:var(--ink-soft); margin:0 0 16px;}
  .brand-story-body em{color:var(--ink); font-style:italic; font-family:'Playfair Display',serif;}

  .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);}}