/*
Theme Name: UNA SOGLIA
Description: Theme riêng cho unasoglia.com. Phối M1 "Mực đêm". Thứ tự khối theo 02c — giá gần cuối, sau khối "ai không nên mua".
Version: 1.0
*/

/* ══ M1 "MỰC ĐÊM" — chốt 01/09/2026 ══ */
:root{
  --nen:#1B1E22; --muc:#E8E4DC; --nhan:#B98E5E; --phu:#7A7770;
  --than:#353B42; --vien:#2B3036; --nen2:#161A1D;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:"Marcellus",Georgia,serif;
  --do:min(1180px,92vw);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--nen);color:var(--muc);font-family:var(--serif);
  font-size:17px;line-height:1.62;margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:var(--do);margin:0 auto;padding:0 max(24px,4vw)}

/* ── logo ── */
.logo{display:inline-block;text-align:center;line-height:1;text-decoration:none;font-size:23px}
.logo .una{font-family:var(--caps);font-size:.72em;letter-spacing:.62em;text-indent:.62em;display:block}
.logo .rule{height:1.5px;background:var(--nhan);margin:.30em 0 .26em}
.logo .sog{font-family:var(--caps);font-size:1em;letter-spacing:.34em;text-indent:.34em;display:block}

/* ── header ── */
.site-head{padding:44px 0 0}
.head-in{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;border-bottom:1px solid var(--vien);padding-bottom:22px}
.nav{display:flex;gap:28px;font-family:var(--caps);font-size:10.5px;
  letter-spacing:.18em;color:var(--phu);flex-wrap:wrap}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--muc)}

/* ── nhịp: KHÔNG giãn đều ── */
.sec{padding:0 0 clamp(64px,9vw,132px)}
.lead{padding-top:clamp(56px,8vw,104px)}
.eyebrow{font-family:var(--caps);font-size:10px;letter-spacing:.30em;color:var(--phu);margin-bottom:22px}
.big{font-size:clamp(30px,4.6vw,54px);line-height:1.18;letter-spacing:-.005em}
.big em{font-style:italic;color:var(--nhan)}
.sub{font-size:clamp(18px,2vw,21px);color:var(--phu);margin-top:26px;max-width:30em}

/* ── ⭐ thước ngưỡng — dấu hiệu riêng ── */
.rail{position:relative;height:14px}
.rail::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--phu);opacity:.4}
.fill{position:absolute;left:0;top:4px;height:3px;background:var(--nhan);
  transform-origin:left;transform:scaleX(var(--v));transition:transform 1.1s cubic-bezier(.22,.8,.3,1)}
.moc{position:absolute;left:88%;top:0;width:1px;height:14px;background:var(--phu)}
.moc-lbl{position:absolute;left:88%;top:19px;transform:translateX(-50%);
  font-size:12px;font-style:italic;color:var(--phu);white-space:nowrap}
.thuoc-hang{display:grid;grid-template-columns:6.5em 1fr;gap:0 22px;align-items:center;padding:15px 0}
.thuoc-ten{font-family:var(--caps);font-size:11.5px;letter-spacing:.2em;color:var(--nhan)}
.thuoc-ten.mo{color:var(--phu)}
.thuoc-cap{margin-top:40px;font-size:14.5px;color:var(--phu);font-style:italic}

.hai{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,78px)}
@media(max-width:760px){.hai{grid-template-columns:1fr;gap:44px}}
.trich{border-left:1px solid var(--nhan);padding:6px 0 6px 28px;
  font-size:clamp(21px,2.7vw,29px);line-height:1.36;font-style:italic}

/* ── thẻ mùi ── */
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.ba{grid-template-columns:1fr}}
.the{display:block;text-decoration:none;border:1px solid var(--vien);
  padding:30px 26px 26px;background:var(--nen2);transition:border-color .25s}
.the:hover{border-color:var(--nhan)}
.the h3{font-family:var(--caps);font-size:15px;letter-spacing:.24em;margin-bottom:16px}
.the .bc{font-size:15.5px;font-style:italic;min-height:3em}
.the .rail{margin-top:20px}
.the .gia{margin-top:20px;font-size:14px;color:var(--phu);font-variant-numeric:tabular-nums}

/* ── ⭐ bằng chứng: phép thử hai vế ── */
.bang{border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);
  padding:22px 0;margin-top:30px;display:flex;gap:18px;align-items:flex-start}
.bang svg{flex:none;margin-top:2px}
.bang p{font-size:14.5px;line-height:1.55}
.bang b{font-weight:500;font-style:italic}

/* ── khối "ai không nên mua" ── */
.thatha{border:1px solid var(--vien);background:var(--nen2);padding:clamp(28px,4vw,44px)}
.thatha .eyebrow{color:var(--nhan)}

/* ── giá: cố ý gần cuối ── */
.gia-hang{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--vien);flex-wrap:wrap}
.gia-hang:first-of-type{border-top:1px solid var(--vien)}
.gia-ten{font-family:var(--caps);font-size:11.5px;letter-spacing:.2em}
.gia-so{font-size:20px;font-variant-numeric:tabular-nums}
.goi{font-size:14px;color:var(--phu);font-style:italic;margin-top:18px}

/* ── nút ── */
.nut,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit,.wc-block-components-button{
  display:inline-block;margin-top:32px;font-family:var(--caps);font-size:11px;
  letter-spacing:.22em;color:var(--nen)!important;background:var(--muc)!important;
  padding:16px 40px!important;text-decoration:none;border:0!important;border-radius:0!important;
  cursor:pointer;transition:background .2s;line-height:1.2}
.nut:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce input.button:hover{background:var(--nhan)!important}
.nut.phu{background:none!important;color:var(--muc)!important;border:1px solid var(--vien)!important}
.nut:focus-visible{outline:2px solid var(--nhan);outline-offset:3px}

/* ── đường quay lại ── */
.quaylai{margin-top:26px;padding:22px 24px;border:1px solid var(--vien);background:var(--nen2)}
.quaylai p{font-size:14.5px;color:var(--phu)}
.quaylai .em{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.quaylai input{flex:1;min-width:160px;background:transparent;border:0;
  border-bottom:1px solid var(--vien);color:var(--muc);font-family:var(--serif);font-size:15px;padding:7px 2px}
.quaylai input:focus{outline:0;border-bottom-color:var(--nhan)}
.quaylai button{background:none!important;border:1px solid var(--vien)!important;
  color:var(--muc)!important;font-family:var(--caps);font-size:9.5px;letter-spacing:.18em;
  padding:9px 20px!important;margin:0;cursor:pointer}
.quaylai button:hover{border-color:var(--nhan)!important;color:var(--nhan)!important}

/* ── danh sách nhãn ── */
.dl{display:grid;grid-template-columns:auto 1fr;gap:12px 26px;font-size:15px}
.dl dt{font-family:var(--caps);font-size:9.5px;letter-spacing:.22em;color:var(--phu);padding-top:5px}
.dl dd{margin:0}
.noi{margin-top:30px;font-size:15px}
.noi a{color:var(--nhan);text-decoration:none;border-bottom:1px solid transparent}
.noi a:hover{border-bottom-color:var(--nhan)}
.hop{border:1px solid var(--vien);background:var(--nen2);padding:clamp(26px,4vw,40px)}
.chai-o{background:linear-gradient(170deg,#1F2429,#141719);border:1px solid var(--vien);
  display:flex;align-items:center;justify-content:center;padding:56px 0;min-height:400px}

/* ── WooCommerce: gỡ khuôn mặc định ── */
.woocommerce .quantity input{background:transparent;border:1px solid var(--vien);
  color:var(--muc);font-family:var(--serif);padding:10px;width:70px}
.woocommerce div.product form.cart{margin:0}
.woocommerce div.product p.price,.woocommerce ul.products li.product .price{color:var(--muc)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--nen2)!important;border-top-color:var(--nhan)!important;color:var(--muc)!important}
.woocommerce table.shop_table,.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:var(--vien)!important;color:var(--muc)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection{
  background:transparent!important;border:0!important;border-bottom:1px solid var(--vien)!important;
  color:var(--muc)!important;font-family:var(--serif)!important;font-size:15.5px!important;
  padding:12px 2px!important;border-radius:0!important}
.woocommerce form .form-row label{font-family:var(--caps);font-size:9.5px;
  letter-spacing:.2em;color:var(--phu)}
.woocommerce ul.order_details{padding:0;list-style:none}

footer.site-foot{border-top:1px solid var(--vien);padding:34px 0 76px;
  font-family:var(--caps);font-size:9.5px;letter-spacing:.18em;color:var(--phu);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer.site-foot a{text-decoration:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}