/* ==== block #0 (from gio-hang.html) ==== */
  :root{
    --paper:#FFFFFF; --white:#FFFFFF; --greige:#ECEDED; --greige2:#DFE0E1; --greige3:#F4F5F5;
    --ink:#2C2E2F; --ink2:#5A5C5E; --muted:#7F8285; --line:#DCDDDE; --line2:#C9CACB;
    --accent:#7F8285; --accent-dk:#5E6163; --accent-soft:#ECEDED;
    --f:'Roboto Slab', serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{font-family:var(--f);background:var(--paper);color:var(--ink2);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{font-family:var(--f);color:var(--ink);font-weight:400;line-height:1.15;letter-spacing:-.015em}
  .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .wrap{max-width:1200px;margin:0 auto;padding:0 26px}

  .anno{background:var(--ink);color:#EBECEC;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px}
  .hdr{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
  .hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px}
  .back{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink)}
  .back:hover{color:var(--ink2)}
  .brand{justify-self:center}
  .brand img{display:block;height:39.95px;width:auto}
  .tools{justify-self:end;display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.04em;color:var(--ink2)}
  .tools .badge{background:var(--ink);color:var(--paper);font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}

  .page-head{text-align:center;padding:46px 0 8px}
  .page-head h1{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:300}
  .page-head p{margin-top:10px;color:var(--ink2);font-size:14px}

  .layout{display:grid;grid-template-columns:1.55fr .95fr;gap:42px;align-items:start;padding:34px 0 80px}
  @media(max-width:900px){.layout{grid-template-columns:1fr;gap:30px}}

  .panel{border:1px solid var(--line);background:var(--paper)}
  .panel__h{padding:18px 22px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:500}
  .panel__b{padding:8px 22px}

  /* items */
  .citem{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
  .citem:last-child{border-bottom:none}
  .citem__img{width:84px;height:84px;aspect-ratio:1/1;flex:0 0 auto;object-fit:cover;border-radius:3px;background:var(--greige)}
  .citem__main{flex:1;min-width:0;display:flex;flex-direction:column}
  .citem__name{font-size:15px;color:var(--ink);font-weight:400}
  .citem__var{font-size:12px;color:var(--ink2);letter-spacing:.02em;margin-top:3px}
  .citem__unit{font-size:12.5px;color:var(--muted);margin-top:3px}
  .citem__row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;gap:12px}
  .qtybox{display:inline-flex;align-items:center;border:1px solid var(--line2)}
  .qtybox button{width:32px;height:32px;background:none;border:none;cursor:pointer;font-family:var(--f);font-size:16px;color:var(--ink);line-height:1}
  .qtybox span{min-width:34px;text-align:center;font-size:14px;color:var(--ink)}
  .citem__line{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
  .citem__rm{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;letter-spacing:.04em;text-decoration:underline;padding:0;margin-left:14px}
  .citem__rm:hover{color:var(--ink)}
  .cart-empty{text-align:center;padding:60px 20px;color:var(--ink2)}
  .cart-empty a{display:inline-block;margin-top:18px;background:var(--ink);color:var(--paper);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:14px 30px}

  /* form */
  .field{margin-bottom:18px}
  .field label{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink);margin-bottom:7px}
  .field label .req{color:#b4453c}
  .field input,.field textarea{width:100%;border:1px solid var(--line2);background:var(--paper);font-family:var(--f);font-size:15px;color:var(--ink);padding:13px 14px;transition:border-color .25s}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
  .field textarea{resize:vertical;min-height:80px}
  .field .err{display:none;color:#b4453c;font-size:12px;margin-top:6px}
  .field.invalid input{border-color:#b4453c}
  .field.invalid .err{display:block}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:560px){.field-row{grid-template-columns:1fr}}

  /* summary */
  .summary{position:sticky;top:96px}
  .sumrow{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink2);padding:9px 0}
  .sumrow.total{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;color:var(--ink)}
  .sumrow.total b{font-size:20px;font-weight:600;color:var(--ink)}
  .place{display:block;width:100%;background:var(--ink);color:var(--paper);border:none;font-family:var(--f);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:17px;cursor:pointer;transition:.3s;margin-top:18px}
  .place:hover{background:var(--ink2)}
  .place:disabled{background:var(--line2);cursor:not-allowed}
  .note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.55}

  /* success */
  .ok{display:none;text-align:center;padding:70px 24px;max-width:640px;margin:0 auto}
  .ok.show{display:block}
  .ok__ic{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
  .ok__ic svg{width:30px;height:30px}
  .ok h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:300;margin-bottom:14px}
  .ok p{color:var(--ink2);font-size:15px;margin-bottom:8px}
  .ok .ref{font-weight:600;color:var(--ink)}
  .ok a{display:inline-block;margin-top:26px;background:var(--ink);color:var(--paper);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:15px 34px}

  .footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:.02em}
  .footer a{color:var(--ink2)}

/* ==== block #1 id=callie-fb-1506 (from gio-hang.html) ==== */
/* ===== Callie feedback 15/06 — fix giao diện trong scope ===== */
/* Mục 3: chữ menu VIẾT HOA + in đậm */
.hdr .nav-link{text-transform:uppercase;font-weight:300;letter-spacing:.02em}
.drawer-nav .dr-link,.drawer-nav .dr-acc{text-transform:uppercase;font-weight:300}
/* Mục 5 + Mục 8: giãn cách thanh MENU trên PC — trải đều full chiều ngang */
@media(min-width:1001px){.hdr .nav{justify-content:center;gap:clamp(16px,1.8vw,30px)}}
/* Mục 4: bỏ gạch chân/đổ bóng dưới chân ảnh sản phẩm */
.card__img{box-shadow:none!important}
/* Mục 1: mobile — dời thanh công cụ sang lề phải (đồng bộ trang chủ) */
@media(max-width:1000px){.hdr .tools{margin-left:auto}.hdr__row{padding-right:clamp(14px,1.4vw,22px)}}
/* Mục 7: nút biến thể trang sức đôi ở trang chi tiết */
.pdp-variant{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 20px}
.pdp-variant .vbtn{font-size:11.5px;letter-spacing:.03em;padding:8px 16px;border:1px solid var(--line2);background:transparent;color:var(--ink2);cursor:pointer;font-family:var(--f);border-radius:30px;transition:.25s}
.pdp-variant .vbtn:hover{border-color:var(--ink);color:var(--ink)}
.pdp-variant .vbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cart-item .ci-x{color:var(--ink2);font-weight:600}
  @media(max-width:1320px){.brand img{height:31.96px}}

/* ==== block #2 id=callie-fb-153 (from gio-hang.html) ==== */
/* Callie feedback 16/06 — Muc 3: dong nhat 1 size chu cho cac muc nho (nhan/eyebrow/label) = 11px, lay trang chu lam chuan */
.crumb,.bcard__cat,.typecard__l,.astat__l,.pdp-eyebrow,.pdp-opt-label,.sw-label{font-size:11px!important}

/* ==== block #3 id=m2-no-underline (from gio-hang.html) ==== */
/* task156-m2: bo gach chan duoi anh san pham (toan site) */
.card__img,.card__img a,.pimg,.card__name,.coll-card,.coll-card img,.pdp-main,.pdp-main a,.pdp-main img,.pdp-thumb,.pdp-thumb img,.cat__c,.cat__c img,.post-thumb,.post-thumb img{text-decoration:none!important}
.card__img,.pimg,.coll-card,.coll-card img,.pdp-main,.pdp-main img,.pdp-thumb,.pdp-thumb img,.cat__c,.cat__c img,.post-thumb,.post-thumb img{border-bottom:0!important}

/* ==== block #4 id=callie-logo-2906 (from gio-hang.html) ==== */
/* Logo 29/06: khach soi ky -> phong to logo cho ro net, dong bo header/drawer/footer + mobile */
.brand img{height:50px !important}
.drawer-head .brand img{height:46px !important}
.footer .brand img{height:44px !important}
@media(max-width:1320px){ .brand img{height:44px !important} }
@media(max-width:1000px){ .hdr .brand img{height:44px !important} .footer .brand img{height:40px !important} }