:root{--pink:#F4C7CE;
    --ink:#161513;
    --ink-soft:#5B5952;
    --line:#E7E4DE;
    --cream:#FAF9F6;
    --panel:#F2EFEA;
    --rose:#B4707B;}
/* Không khai báo font-family riêng ở đâu trong file này — toàn bộ chữ
     kế thừa font mặc định của theme Haravan (site đang dùng font gì thì
     trang này hiển thị đúng font đó). */
  :root{--ink:#161513;
    --ink-soft:#5B5952;
    --line:#E7E4DE;
    --panel:#F7F5F2;
    --rose:#B4707B;}
*{box-sizing:border-box;}
body{margin:0;color:var(--ink);background:#fff;line-height:1.7;}
h1,h2,h3{font-weight:700;margin:0;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
.placeholder{width:100%;background:linear-gradient(135deg,#EFEDE8,#DCD9D2);
    aspect-ratio:var(--ar,4/3);display:flex;align-items:center;justify-content:center;
    color:#9B978E;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:10px;}
.breadcrumb{font-size:.75rem;color:var(--ink-soft);padding:16px 24px 0;max-width:1100px;margin:0 auto;}
.breadcrumb a:hover{text-decoration:underline;}
section{padding:52px 0;}
.thin{border-top:1px solid var(--line);}
.hero-img{margin-top:20px;--ar:16/6;}
/* H1 + intro + "what is X jewelry" */
  .intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:40px 0 0;align-items:start;}
.intro h1{font-size:1.9rem;letter-spacing:.02em;text-transform:uppercase;}
.intro-text{font-size:.92rem;color:var(--ink-soft);margin-top:14px;max-width:44ch;}
.intro-text.clamped{max-height:3.2em;overflow:hidden;}
.toggle-link{font-size:.85rem;text-decoration:underline;color:var(--ink);cursor:pointer;white-space:nowrap;}
.intro h2{font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;}
.intro .body p{color:var(--ink-soft);margin:14px 0 0;font-size:.92rem;}
.btn{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--ink);color:#fff;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border-radius:1px;transition:background .2s;
    font-weight:600;}
.btn:hover{background:var(--rose);}
/* Shoppable section — ảnh trái (kèm caption dưới ảnh), lưới 6 SP phải */
  .shop-heading{font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:24px;}
.shop-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:32px;align-items:start;}
.shop-left .placeholder{margin-bottom:14px;}
.shop-caption{color:var(--ink-soft);font-size:.88rem;max-width:38ch;}
.shop-caption a{text-decoration:underline;font-weight:600;color:var(--ink);display:block;margin-top:4px;}
.product-row-6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.product-card{font-size:.82rem;position:relative;display:block;}
.product-card .placeholder,.product-card img{--ar:1/1;margin-bottom:10px;border-radius:2px;}
.product-card .wishlist{position:absolute;top:8px;right:8px;font-size:1rem;color:var(--ink-soft);}
.product-card .name{font-weight:500;line-height:1.4;}
.product-card .price{color:var(--ink-soft);margin-top:2px;}
.product-card .price .was{text-decoration:line-through;color:#B9B5AC;margin-left:4px;}
.product-card .price .sale{color:var(--rose);margin-left:4px;}
/* Text-only section: "WHAT IS STERLING SILVER?" */
  .text-only{max-width:640px;}
.text-only h2{font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px;}
.text-only p{color:var(--ink-soft);font-size:.92rem;margin:0 0 12px;}
/* Two-column explainer w/ image (recycled silver / how to clean) */
  .explain{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.explain.reverse{direction:rtl;}
.explain.reverse > *{direction:ltr;}
.explain h2{font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;max-width:20ch;}
.explain ul{margin:14px 0 0;padding-left:18px;color:var(--ink-soft);font-size:.92rem;}
.explain li{margin-bottom:8px;}
.explain .placeholder{--ar:4/5;}
/* FAQ */
  .faq-heading{font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;
    padding:20px 0;font-weight:600;font-size:.94rem;cursor:pointer;text-align:left;color:var(--ink);}
.faq-q .icon{font-size:1.15rem;font-weight:300;color:var(--rose);flex-shrink:0;margin-left:16px;transition:transform .3s;}
.faq-item.open .icon{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{margin:0 0 20px;color:var(--ink-soft);font-size:.88rem;max-width:64ch;}
.promo-bar{background:var(--pink);text-align:center;font-size:.72rem;letter-spacing:.05em;padding:9px;color:#3a2a2d;}
.intro{padding:44px 0 0;max-width:640px;}
.guide{text-align:left;max-width:620px;margin-top:8px;}
.eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);font-weight:600;margin-bottom:10px;}
.guide h2{font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;}
.guide p{color:var(--ink-soft);margin-top:14px;font-size:.95rem;}
.explain{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.explain .body p{color:var(--ink-soft);margin:14px 0 0;font-size:.95rem;}
.full-text{max-width:680px;}
.full-text h2{font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;}
.full-text h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.02rem;margin:26px 0 10px;}
.full-text p{color:var(--ink-soft);font-size:.95rem;margin:0 0 14px;}
.full-text ol{color:var(--ink-soft);font-size:.95rem;padding-left:20px;margin:0 0 14px;}
.full-text ol li{margin-bottom:10px;}
.note{font-size:.85rem;color:var(--ink-soft);padding:16px 18px;border-left:2px solid var(--rose);
    background:var(--panel);margin-top:18px;}
.faq-heading{font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;}
.related-heading{font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:24px;}
.related-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.related-row .placeholder{--ar:1/1;margin-bottom:10px;}
.related-row .name{font-size:.8rem;font-weight:500;}
.related-row .price{font-size:.8rem;color:var(--ink-soft);margin-top:2px;}
.seo-links{background:var(--panel);}
.seo-links h2{font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;}
.seo-links ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px;}
.seo-links a{font-size:.85rem;padding:9px 16px;border:1px solid var(--line);border-radius:20px;background:#fff;}
.seo-links a:hover{border-color:var(--rose);color:var(--rose);}
footer.site-footer{padding:30px 24px;text-align:center;font-size:.72rem;color:#9B978E;border-top:1px solid var(--line);}
.intro p{color:var(--ink-soft);font-size:.95rem;margin-top:14px;}
.tabs{display:flex;gap:10px;margin-top:22px;}
.tab{padding:9px 20px;border:1px solid var(--line);border-radius:20px;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.caution{font-size:.85rem;color:var(--ink-soft);padding:16px 18px;border-left:2px solid var(--rose);
    background:var(--panel);margin:24px 0;max-width:680px;}
.caution strong{color:var(--ink);}
.howto{max-width:680px;}
.howto h2{font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.howto .need{font-size:.9rem;color:var(--ink-soft);margin-top:14px;}
.howto .need ul{margin:8px 0 0;padding-left:20px;}
.method{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:24px;align-items:start;}
.method .placeholder{--ar:1/1;width:96px;}
.method h3{font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:6px;}
.method p{color:var(--ink-soft);font-size:.9rem;margin:0;}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.88rem;}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);}
th{font-weight:600;color:var(--ink-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;}
tr:nth-child(even) td{background:var(--panel);}
.general-table{max-width:400px;margin-top:10px;}
.style-group{margin-top:12px;}
.style-group h2{font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;margin:44px 0 4px;}
.style-card{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start;}
a.style-card{cursor:pointer;}
a.style-card h3{color:var(--rose);}
a.style-card h3::after{content:'›';display:inline-block;margin-left:6px;font-weight:700;}
a.style-card:hover h3{color:var(--ink);}
.style-card .placeholder{--ar:1/1;}
.style-card h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;margin-bottom:6px;}
.style-card p.note{color:var(--ink);font-size:.86rem;margin:0 0 10px;line-height:1.6;}
@media(max-width:760px){
.intro,.shop-grid,.explain{grid-template-columns:1fr!important;gap:24px;}
.product-row-6{grid-template-columns:repeat(2,1fr);}
.explain.reverse{direction:ltr;}
.explain{gap:16px;}
section{padding:36px 0;}
.intro h1{font-size:1.5rem;}
.explain,.related-row{grid-template-columns:1fr!important;}
.related-row{grid-template-columns:repeat(2,1fr);}
.style-card{grid-template-columns:130px 1fr;gap:18px;}
.method{grid-template-columns:64px 1fr;}
.method .placeholder{width:64px;}
}

/* ================================================================
   SIZE GUIDE — sidebar "cách đo size" + nội dung có tab CM/IN
   (bổ sung cho bài "Cách đo size vòng tay", dùng PageType: size-guide)
   ================================================================ */
.size-guide-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;margin-top:8px;}
.size-sidebar{position:sticky;top:24px;}
.size-sidebar h2{font-size:1rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px;}
.size-sidebar p{color:var(--ink-soft);font-size:.88rem;margin:0 0 10px;}
.find-size-link{display:inline-block;font-size:.85rem;text-decoration:underline;color:var(--ink);margin-top:6px;}
.find-size-link:hover{color:var(--rose);}
.size-content .tabs{margin-top:0;margin-bottom:8px;}
.style-group-heading{font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;margin:44px 0 4px;}
.size-content .style-card:first-of-type{margin-top:0;}
table.size-table{max-width:400px;}
@media(max-width:760px){
.size-guide-layout{grid-template-columns:1fr!important;gap:24px;}
.size-sidebar{position:static;}
}

/* ================================================================
   POPUP "CÁCH ĐO CỔ TAY CỦA BẠN" — mở khi bấm link trong sidebar
   ================================================================ */
.wrist-modal-overlay{display:none;position:fixed;inset:0;background:rgba(22,21,19,.55);
    z-index:999;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;}
.wrist-modal-overlay.active{display:flex;}
.wrist-modal{background:#fff;max-width:700px;width:100%;padding:32px;border-radius:2px;position:relative;}
.wrist-modal-head{display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px;}
.wrist-modal-head h2{font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;}
.wrist-modal-close{background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px;}
.wrist-modal-close:hover{color:var(--rose);}
.wrist-modal-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-bottom:24px;}
.wrist-modal-intro-text p{color:var(--ink-soft);font-size:.9rem;margin:0 0 10px;}
.wrist-modal-needs strong{font-size:.85rem;color:var(--ink);}
.wrist-modal-needs ul{margin:8px 0 0;padding-left:18px;color:var(--ink-soft);font-size:.85rem;}
.wrist-modal-needs li{margin-bottom:6px;}
.wrist-modal-option{display:grid;grid-template-columns:220px 1fr;gap:24px;
    border:1px solid var(--line);padding:16px;margin-bottom:16px;align-items:center;}
.wrist-modal-option img,.wrist-modal-option .placeholder{width:100%;aspect-ratio:16/11;object-fit:cover;}
.wrist-modal-option h3{font-size:1rem;margin-bottom:8px;}
.wrist-modal-option .option-subtitle{font-weight:600;font-size:.88rem;color:var(--ink);margin:0 0 8px;}
.wrist-modal-option p{color:var(--ink-soft);font-size:.88rem;margin:0 0 6px;}
.wrist-modal-footer{color:var(--ink-soft);font-size:.88rem;margin-top:8px;}
@media(max-width:760px){
.wrist-modal{padding:20px;}
.wrist-modal-intro{grid-template-columns:1fr;gap:16px;}
.wrist-modal-option{grid-template-columns:1fr;}
}

/* ================================================================
   BANNER ĐẦU TRANG (size-guide) — ảnh nền + tiêu đề overlay
   + SLIDE DANH MỤC dẫn tới các loại trang sức khác
   ================================================================ */
.size-hero{position:relative;min-height:320px;display:flex;align-items:center;
    overflow:hidden;background:linear-gradient(135deg,#3A382F,#1E1C18);color:#fff;}
.size-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.size-hero-overlay{position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(20,18,15,.55) 0%,rgba(20,18,15,.15) 60%,rgba(20,18,15,0) 100%);}
.size-hero-inner{position:relative;z-index:2;max-width:1100px;width:100%;margin:0 auto;padding:0 24px;}
.size-hero h1{font-size:2.1rem;text-transform:uppercase;letter-spacing:.02em;max-width:14ch;color:#fff;}
.size-hero p{color:#fff;opacity:.92;font-size:.92rem;margin-top:14px;max-width:42ch;}
.category-tabs{display:flex;justify-content:center;gap:36px;border-bottom:1px solid var(--line);
    padding:18px 0 0;overflow-x:auto;}
.category-tabs a{font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
    padding-bottom:16px;border-bottom:2px solid transparent;white-space:nowrap;}
.category-tabs a.active{color:var(--ink);font-weight:600;border-color:var(--ink);}
.category-tabs a:hover{color:var(--rose);}
@media(max-width:760px){
.size-hero{min-height:220px;}
.size-hero h1{font-size:1.4rem;}
.size-hero p{font-size:.85rem;}
.category-tabs{gap:20px;justify-content:flex-start;padding:14px 0 0;}
}

/* ================================================================
   BÀI DÂY CHUYỀN (PageType: necklace-size-guide)
   ================================================================ */
.necklace-sidebar h2{font-size:1rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px;}
.necklace-guide-links{list-style:none;margin:16px 0 0;padding:0;}
.necklace-guide-links li{margin-bottom:10px;}
.necklace-guide-links a{font-size:.85rem;text-decoration:underline;color:var(--ink);}
.necklace-guide-links a:hover{color:var(--rose);}
.necklace-table-row{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;}
a.necklace-table-row{cursor:pointer;}
a.necklace-table-row:hover{opacity:.85;}
.style-group-heading.content-linked{color:var(--rose);}
.style-group-heading.content-linked::after{content:'›';display:inline-block;margin-left:8px;font-weight:700;}
.necklace-table-row table{margin-top:0;}
.necklace-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
.necklace-note h3{font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;margin-bottom:6px;}
.necklace-note p{color:var(--ink-soft);font-size:.88rem;margin:0;}
@media(max-width:760px){
.necklace-table-row{grid-template-columns:1fr;}
}