/*
Theme Name: UNA SOGLIA Oil
Description: Dầu lăn gốc dầu — theme riêng, tách khỏi theme unasoglia của site chính.
Version: 1.0
*/
:root{
  /* ===== 3 MAU CHU DAO — deu la mau thuong hieu (ho so 06-thuong-hieu/23) =====
     NEN  #F2EEE6 giay nga · MUC #211C17 nau-den · NHAN #6B4F3A nau muc go
     🔒 NHAN chi dung: duong nguong · thuoc nguong · nut chinh. Cam trang tri. */
  --nen:#F2EEE6;
  --muc:#211C17;
  --dong:#6B4F3A;

  /* phu tro — khong tinh la chu dao */
  --muc-nhat:#7B7063;   /* chu phu, gia tien — do 4,2 tren nen */
  --vien:#DCD3C4;

  /* bi danh cu, tro ve 3 mau tren de khong phai sua 200 cho */
  --nen-2:#E9E3D8; --nhan:#7B7063; --dong-dam:#553D2C;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--muc);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.b{width:min(1120px,92vw);margin:0 auto}

/* ---- dieu huong ---- */
.dh{border-bottom:1px solid var(--vien);background:var(--nen);position:sticky;top:0;z-index:50}
.dh .b{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-family:var(--serif);font-size:23px;letter-spacing:.16em;text-decoration:none;font-weight:500}
.logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.22em;
  color:var(--nhan);margin-top:4px;text-transform:uppercase;opacity:.85}
.dh nav{display:flex;gap:28px;font-size:13.5px;letter-spacing:.04em}
.dh nav a{text-decoration:none;color:var(--muc-nhat)}
.dh nav a:hover{color:var(--muc)}

/* ---- hero ---- */
.hero{padding:88px 0 76px;text-align:center;border-bottom:1px solid var(--vien)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,64px);
  line-height:1.12;margin:0 0 20px;letter-spacing:-.01em}
.hero p{max-width:560px;margin:0 auto 34px;color:var(--muc-nhat);font-size:17px}
.nut{display:inline-block;background:var(--dong);color:var(--muc);padding:15px 38px;
  text-decoration:none;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--dong);transition:.18s}
.nut:hover{background:var(--dong-dam);border-color:var(--dong-dam);color:var(--nen)}
.nut-vien{background:transparent;color:var(--muc)}
.nut-vien:hover{background:var(--muc);color:var(--nen)}

/* ---- khac biet ---- */
.kb{background:var(--nen-2);padding:44px 0;border-bottom:1px solid var(--vien)}
.kb-l{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.kb-l div{font-size:13px;color:var(--muc-nhat);letter-spacing:.03em}
.kb-l strong{display:block;font-family:var(--serif);font-size:17px;color:var(--muc);
  margin-bottom:5px;letter-spacing:0}

/* ---- luoi mui ---- */
.pt{padding:76px 0}
.pt h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.6vw,38px);
  text-align:center;margin:0 0 12px}
.pt .phu{text-align:center;color:var(--muc-nhat);margin:0 auto 48px;max-width:520px;font-size:15.5px}
/* Luoi 6 cot ao, moi the chiem 2 cot => 3 the/hang.
   So mui LE (5) thi hang cuoi tu DON VAO GIUA thay vi lech han sang trai.
   Lam bang :nth-last-child, khong dem tay => them/bot mui van dung. */
.luoi{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 30px}
.the{grid-column:span 2}
/* du 2 the o hang cuoi => day ca hai vao giua (lech 1 cot) */
.luoi > .the:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
/* du 1 the o hang cuoi => dat chinh giua (lech 2 cot) */
.luoi > .the:last-child:nth-child(3n+1){grid-column:3/span 2}
.the{text-decoration:none;display:block}
.the .anh{aspect-ratio:3/4;background:var(--nen-2);border:1px solid var(--vien);
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:15px}
.the .anh span{font-family:var(--serif);font-size:31px;letter-spacing:.14em;color:var(--nhan)}
.the h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 5px;letter-spacing:.07em}
.the .canh{font-size:13.5px;color:var(--muc-nhat);line-height:1.55;margin:0 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the .gia{font-size:14px;letter-spacing:.03em}

/* ---- so sanh ---- */
.ss{background:var(--nen-2);padding:72px 0;border-top:1px solid var(--vien)}
.ss table{width:100%;border-collapse:collapse;background:var(--nen);font-size:14.5px}
.ss th,.ss td{padding:15px 18px;border-bottom:1px solid var(--vien);text-align:left}
.ss th{font-family:var(--serif);font-size:16px;font-weight:500}
.ss td:first-child{color:var(--muc-nhat)}
.ss .bao{overflow-x:auto}

/* ---- cach dung ---- */
.cd{padding:72px 0}
.cd-l{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
.cd-l .so{font-family:var(--serif);font-size:33px;color:var(--nhan);margin-bottom:9px}
.cd-l h4{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 7px}
.cd-l p{margin:0;font-size:14.5px;color:var(--muc-nhat)}

/* ---- trang san pham ---- */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:60px 0}
.sp .anh-l{aspect-ratio:3/4;background:var(--nen-2);border:1px solid var(--vien);
  display:flex;align-items:center;justify-content:center}
.sp .anh-l span{font-family:var(--serif);font-size:52px;letter-spacing:.15em;color:var(--nhan)}
.sp h1{font-family:var(--serif);font-weight:400;font-size:40px;margin:0 0 8px;letter-spacing:.05em}
.sp .ho{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--nhan);margin-bottom:22px}
.sp .gia-l{font-size:23px;margin:22px 0}
.sp .mo p{margin:0 0 15px}
.sp form.cart{margin:28px 0}
.sp button[type=submit]{background:var(--muc);color:var(--nen);border:1px solid var(--muc);
  padding:15px 42px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
  font-family:var(--sans);transition:.18s}
.sp button[type=submit]:hover{background:transparent;color:var(--muc)}
.sp .qty{width:62px;padding:13px 9px;border:1px solid var(--vien);margin-right:11px;
  font-family:var(--sans);background:var(--nen)}

/* ---- chan ---- */
.chan{border-top:1px solid var(--vien);padding:54px 0 40px;margin-top:60px;
  font-size:13.5px;color:var(--muc-nhat);background:var(--nen-2)}
.chan-l{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
.chan h5{font-family:var(--serif);font-size:15px;color:var(--muc);margin:0 0 13px;font-weight:500}
.chan a{text-decoration:none;display:block;margin-bottom:8px}
.chan a:hover{color:var(--muc)}
.chan .cuoi{border-top:1px solid var(--vien);padding-top:22px;font-size:12.5px}
.chan .cuoi-ct{margin-top:8px;font-size:11.5px;line-height:1.6;opacity:.7}  /* 08/10 thông tin người bán */

/* ---- chung ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--nen-2);border:1px solid var(--vien);padding:15px 18px;margin:20px 0;list-style:none}
.trang{padding:56px 0;max-width:720px}
.trang h1{font-family:var(--serif);font-weight:400;font-size:36px;margin:0 0 26px}

@media(max-width:860px){
  .sp{grid-template-columns:1fr;gap:34px}
  .kb-l{grid-template-columns:repeat(2,1fr);gap:24px}
  .cd-l,.chan-l{grid-template-columns:1fr;gap:28px}
  .dh nav{gap:17px;font-size:12.5px}
  .hero{padding:60px 0 52px}
}

/* ---- nút mua: đè màu tím mặc định của Woo ----
   CSS cũ chỉ nhắm button[type=submit] nên trượt — Woo dùng <button class="single_add_to_cart_button">
   và ở nhiều chỗ là <a class="button">. Gom hết vào một chỗ. */
.sp .single_add_to_cart_button,
.sp button.button, .sp a.button,
.woocommerce button.button, .woocommerce a.button,
.woocommerce button.button.alt, .woocommerce input.button,
.wc-block-components-button, .wp-element-button{
  background:var(--muc) !important; color:var(--nen) !important;
  border:1px solid var(--muc) !important; border-radius:0 !important;
  padding:15px 42px !important; font-size:13px !important; letter-spacing:.13em !important;
  text-transform:uppercase !important; font-weight:400 !important;
  font-family:var(--sans) !important; cursor:pointer; transition:.18s;
}
.sp .single_add_to_cart_button:hover,
.woocommerce button.button:hover, .woocommerce a.button:hover,
.wc-block-components-button:hover, .wp-element-button:hover{
  background:transparent !important; color:var(--muc) !important;
}
/* Chữ giữ chỗ trong ô ảnh: không được tràn ra ngoài khung */
.the .anh span, .sp .anh-l span{
  padding:0 14px; text-align:center; line-height:1.25;
  overflow-wrap:anywhere; max-width:100%;
}
.sp .anh-l{padding:20px}

/* ---- Nút tím: thủ phạm THẬT là lớp .alt của Woo ----
   Nút thật mang class "single_add_to_cart_button button alt".
   Ràng buộc trong .sp là thừa và làm hụt ở trang khác — nhắm thẳng .alt. */
button.button.alt, a.button.alt, input.button.alt,
.woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce input.button.alt,
button.single_add_to_cart_button{
  background-color:var(--muc) !important; background-image:none !important;
  color:var(--nen) !important; border:1px solid var(--muc) !important;
  border-radius:0 !important; text-shadow:none !important; box-shadow:none !important;
  padding:15px 42px !important; font-size:13px !important; letter-spacing:.13em !important;
  text-transform:uppercase !important; font-weight:400 !important;
  font-family:var(--sans) !important; line-height:1.4 !important; cursor:pointer;
}
button.button.alt:hover, a.button.alt:hover, input.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover,
button.single_add_to_cart_button:hover{
  background-color:transparent !important; color:var(--muc) !important;
}

/* ---- Ô ảnh giữ chỗ: cho ra HÌNH thay vì khung rỗng ----
   Chưa có ảnh chụp thật. Thay vì để trống trơn, dựng một nền có chiều sâu
   để trang không còn cảm giác thiếu. ⛔Không phải ảnh giả sản phẩm. */
.the .anh, .sp .anh-l{
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(255,255,255,.82), transparent 62%),
    var(--nen-2);
  position:relative;
}
.the .anh::after, .sp .anh-l::after{
  content:""; position:absolute; left:50%; top:50%;
  width:34%; aspect-ratio:1/2.7; transform:translate(-50%,-50%);
  border-radius:44% 44% 12% 12%/12% 12% 6% 6%;
  background:linear-gradient(100deg, rgba(255,255,255,.5), rgba(160,142,118,.16) 52%, rgba(120,104,84,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 14px 30px -14px rgba(90,76,58,.42);
  pointer-events:none;
}
.the .anh span, .sp .anh-l span{position:relative; z-index:2}

/* ---- Khối kể chuyện — chỗ riddleoil để lời khách ---- */
.kc{padding:76px 0;border-top:1px solid var(--vien)}
.kc-l,.ss .kc-l{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.kc h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.6vw,36px);margin:0 0 18px;line-height:1.2}
.kc p{color:var(--muc-nhat);margin:0 0 15px}
.dan{font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--muc);
  border-left:2px solid var(--nhan);padding-left:22px;margin:0}
.dan small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--nhan);margin-top:14px}
@media(max-width:860px){.kc-l{grid-template-columns:1fr;gap:32px}
  .luoi{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .the,.luoi > .the:nth-last-child(2):nth-child(3n+1),
  .luoi > .the:last-child:nth-child(3n+1){grid-column:auto}}
@media(max-width:560px){.luoi{grid-template-columns:1fr}
  .the,.luoi > .the:nth-last-child(2):nth-child(3n+1),
  .luoi > .the:last-child:nth-child(3n+1){grid-column:auto}}

/* ---- Ô ảnh BỘ KHÁM PHÁ: 5 lọ, không phải 1 lọ ----
   Trang bộ đang mượn hình 1 lọ của trang mùi ⇒ sai thứ khách nhận. */
.postid-15 .sp .anh-l::after,
.product-bo-kham-pha .anh::after{
  width:76%; aspect-ratio:auto; height:46%; border-radius:0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.5), rgba(160,142,118,.16) 52%, rgba(120,104,84,.2)) ,
    repeating-linear-gradient(90deg,
      transparent 0 5.6%, rgba(255,255,255,.34) 5.6% 14.4%, transparent 14.4% 20%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px -16px rgba(90,76,58,.4);
  mask-image:repeating-linear-gradient(90deg,
    transparent 0 5.6%, #000 5.6% 14.4%, transparent 14.4% 20%);
  -webkit-mask-image:repeating-linear-gradient(90deg,
    transparent 0 5.6%, #000 5.6% 14.4%, transparent 14.4% 20%);
}

/* ================= TRANG SẢN PHẨM — khối theo cấu trúc riddleoil ================= */

/* Huy hiệu 3 điểm dưới tên mùi */
.sp .hh{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:22px 0 0;padding:16px 0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.sp .hh li{font-size:12px;color:var(--muc-nhat);line-height:1.45}
.sp .hh strong{display:block;font-family:var(--serif);font-size:15px;color:var(--muc);
  font-weight:500;margin-bottom:2px}

/* Dải mua yên tâm */
.sp .an-tam{list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--vien);
  font-size:13px;color:var(--muc-nhat)}
.sp .an-tam li{position:relative;padding-left:18px;margin-bottom:7px}
.sp .an-tam li::before{content:"·";position:absolute;left:6px;top:-1px;font-size:17px;color:var(--nhan)}
.sp .dan-tiep{font-size:13.5px;color:var(--muc-nhat);margin:14px 0 0}

/* Tháp hương */
.thap{padding:74px 0;border-top:1px solid var(--vien);background:var(--nen-2)}
.thap h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.3vw,34px);
  text-align:center;margin:0 0 10px}
.thap-l{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.thap-l > div{background:var(--nen);border:1px solid var(--vien);padding:26px 24px}
.nhan-t{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--nhan);margin-bottom:10px}
.thap-l strong{display:block;font-family:var(--serif);font-size:19px;font-weight:500;
  margin-bottom:9px;line-height:1.3}
.thap-l p{margin:0;font-size:13.5px;color:var(--muc-nhat)}

/* Ai hợp / ai không — khối "ai KHÔNG nên mua" giảm chuyển đổi SAI */
.ai{padding:70px 0}
.ai-l{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ai-l > div{padding:30px 28px;border:1px solid var(--vien)}
.ai-l .hop{background:var(--nen-2)}
.ai-l h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 12px}
.ai-l p{margin:0;color:var(--muc-nhat);font-size:14.5px}
.ai-l .khong h3{color:var(--nhan)}

/* Hỏi đáp */
.hoi{padding:70px 0;border-top:1px solid var(--vien)}
.hoi h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.3vw,34px);
  text-align:center;margin:0 0 38px}
.hoi details{border-bottom:1px solid var(--vien);padding:17px 0}
.hoi summary{cursor:pointer;font-size:15.5px;list-style:none;position:relative;padding-right:30px}
.hoi summary::-webkit-details-marker{display:none}
.hoi summary::after{content:"+";position:absolute;right:4px;top:-2px;font-size:19px;color:var(--nhan)}
.hoi details[open] summary::after{content:"–"}
.hoi details p{margin:13px 0 2px;color:var(--muc-nhat);font-size:14.5px;max-width:74ch}

@media(max-width:860px){
  .thap-l{grid-template-columns:1fr;gap:18px}
  .ai-l{grid-template-columns:1fr;gap:18px}
  .sp .hh{grid-template-columns:1fr;gap:10px}
}

/* .phu trong khối tháp hương bị dạt trái — .phu gốc chỉ căn giữa trong .pt */
.thap .phu{text-align:center;max-width:520px;margin:0 auto}

/* ================= BỘ SƯU TẬP ẢNH SẢN PHẨM =================
   Cột ảnh trái như riddleoil: 1 ảnh lớn + lưới 4 ảnh nhỏ, mỗi ảnh một kiểu.
   Chưa có ảnh chụp thật ⇒ dựng bằng CSS. Thay ảnh thật thì bỏ ::after. */
.bst{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bst .o{
  position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--vien);
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.85), transparent 60%),
    var(--nen-2);
}
.bst .o-to{grid-column:1 / -1;aspect-ratio:1/1}
.bst .o img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:3}
.bst .ten{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--serif);letter-spacing:.16em;color:var(--nhan);
  font-size:13px;white-space:nowrap;
}
.bst .o-to .ten{font-size:30px}
.bst figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:7px 10px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muc-nhat);background:linear-gradient(transparent,rgba(242,238,230,.94) 46%);
}

/* Hình lọ dựng bằng CSS — mỗi kiểu một dáng */
.bst .o::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30%;aspect-ratio:1/2.7;border-radius:44% 44% 12% 12%/12% 12% 6% 6%;
  background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(160,142,118,.16) 52%,rgba(120,104,84,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -14px rgba(90,76,58,.42);
}
.bst .o-to::after{width:26%}
/* nhìn nghiêng: lọ xoay + bóng dài */
.bst .o-nghieng::after{transform:translate(-50%,-50%) rotate(-19deg);width:27%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),14px 20px 30px -16px rgba(90,76,58,.46)}
/* cỡ thật: lọ nhỏ cạnh vệt bàn tay */
.bst .o-tay::after{width:19%;left:58%}
.bst .o-tay::before{content:"";position:absolute;left:24%;top:50%;transform:translate(-50%,-50%);
  width:30%;aspect-ratio:1/1.35;border-radius:46% 46% 38% 38%/40% 40% 30% 30%;
  background:linear-gradient(150deg,rgba(214,186,158,.42),rgba(186,156,126,.28));filter:blur(.6px)}
/* lăn lên da: vệt dầu trên nền da */
.bst .o-da{background:var(--nen-2)}
.bst .o-da::after{width:16%;aspect-ratio:1/2.4;left:66%;opacity:.94}
.bst .o-da::before{content:"";position:absolute;left:34%;top:50%;transform:translate(-50%,-50%) rotate(-13deg);
  width:26%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)}
/* hộp: khối chữ nhật */
.bst .o-hop::after{width:46%;aspect-ratio:1/1.25;border-radius:2px;
  background:linear-gradient(118deg,rgba(255,255,255,.5),rgba(160,142,118,.2) 54%,rgba(120,104,84,.26))}
/* bộ 5 lọ */
.bst .o-bo::after,.bst .o-lo::after{
  width:74%;aspect-ratio:auto;height:42%;border-radius:0;box-shadow:none;
  background:repeating-linear-gradient(90deg,transparent 0 5.6%,
    rgba(255,255,255,.46) 5.6% 14.4%,transparent 14.4% 20%);
}
.bst .o-lo::after{width:30%;aspect-ratio:1/2.7;height:auto;border-radius:44% 44% 12% 12%/12% 12% 6% 6%;
  background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(160,142,118,.16) 52%,rgba(120,104,84,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -14px rgba(90,76,58,.42)}

@media(max-width:860px){.bst{grid-template-columns:1fr 1fr}}

/* ============ KHỚP BỐ CỤC TRANG SẢN PHẨM VỚI RIDDLEOIL (đo 12/09) ============
   Họ: cột ảnh 50-55% ⇄ cột chữ 45-50% · ảnh chính VUÔNG 1:1 ·
   cột phải DÍNH khi cuộn · khung tối đa ~1200-1400 · gãy cột ở 768px. */
.b{width:min(1320px,92vw)}

.sp{grid-template-columns:54fr 46fr;gap:56px;align-items:start;padding:52px 0 64px}

/* Cột phải dính theo khi cuộn — khách xem ảnh mà nút mua vẫn trong tầm mắt */
.sp > div:last-child{position:sticky;top:96px}

/* Ảnh chính VUÔNG như họ; 4 ảnh phụ giữ 4:5 */
.bst .o-to{aspect-ratio:1/1}

/* Cỡ chữ khớp họ: tên ~28-32px, giá ~20-24px đậm */
.sp h1{font-size:clamp(27px,3vw,33px);line-height:1.15;margin-bottom:10px}
.sp .gia-l{font-size:23px;font-weight:500;margin:20px 0}

/* Gãy cột ở 768px như họ (trước để 860px) */
@media(max-width:768px){
  .sp{grid-template-columns:1fr;gap:30px}
  .sp > div:last-child{position:static}
}
@media(min-width:769px) and (max-width:860px){
  .sp{grid-template-columns:54fr 46fr}
}

/* Khung có ảnh thật: bỏ hình vẽ CSS, bỏ chữ giữ chỗ */
.bst .o-that::after,.bst .o-that::before{content:none}
.bst .o-that{background:var(--nen-2)}

/* Ảnh sản phẩm trong lưới: ảnh VUÔNG nhét khung 3:4 ⇒ hở dải trên/dưới.
   Cho ảnh phủ kín khung, cắt bớt phần thừa. */
.the .anh img{width:100%;height:100%;object-fit:cover;display:block}
.the .anh{padding:0}

/* ============ HERO CHIA ĐÔI — theo bố cục đo được của riddleoil ============
   Họ: chữ nửa trái ~50%, ảnh tràn hết mép phải, dải 4 điểm đè lên đáy hero.
   Chữ và ảnh là của UNA SOGLIA. */
.hero2{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:min(78vh,660px);background:var(--nen);
  border-bottom:1px solid var(--vien);
}
.hero2-chu{padding:0 clamp(24px,5vw,86px);max-width:660px;margin-left:auto}
.hero2 .mao{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nhan);margin:0 0 18px;
}
.hero2 h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(33px,4.2vw,54px);line-height:1.1;
  margin:0 0 20px;letter-spacing:-.005em;
}
.hero2 .dan2{color:var(--muc-nhat);font-size:16px;margin:0 0 30px;max-width:44ch}
.hero2 .duoi-nut{font-size:12.5px;color:var(--nhan);margin:14px 0 0;letter-spacing:.02em}
.hero2-anh{position:relative;align-self:stretch;overflow:hidden;background:var(--nen-2)}
.hero2-anh img{width:100%;height:100%;object-fit:cover;display:block}

/* Dải 4 điểm — nền nhạt, ngay dưới hero */
.kb2{background:var(--nen-2);padding:38px 0;border-bottom:1px solid var(--vien)}

@media(max-width:860px){
  .hero2{grid-template-columns:1fr;min-height:0}
  .hero2-chu{padding:54px clamp(20px,6vw,40px) 40px;margin:0;max-width:none}
  .hero2-anh{aspect-ratio:4/3}
  .kb2 .kb-l{grid-template-columns:repeat(2,1fr);gap:24px}
}

/* ============ Dải bằng chứng trong hero + thẻ mùi dày hơn (12/09) ============ */
/* ⛔ Mọi khối .mau-nhan gắn với DỮ LIỆU GIẢ — xoá cùng số khi mở bán thật. */
.bang-chung{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:0 0 28px}
.bang-chung .bc-o{display:flex;align-items:center;gap:9px}
.sao{color:var(--nhan);letter-spacing:.12em;font-size:13px;line-height:1}
.bc-so{font-size:12.5px;color:var(--muc-nhat);letter-spacing:.02em}
.bc-so strong{font-weight:500;color:var(--muc)}
.bc-avt{display:inline-flex}
.bc-avt i{width:21px;height:21px;border-radius:50%;background:var(--nen-2);
  border:1px solid var(--vien);display:block;margin-left:-7px}
.bc-avt i:first-child{margin-left:0}
.mau-nhan{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nhan);opacity:.72;border:1px solid var(--vien);border-radius:2px;
  padding:2px 7px;line-height:1.4;white-space:nowrap}
.mau-luoi{margin:0 0 18px}

.the{position:relative}
.the .the-lk{text-decoration:none;display:block;color:inherit}
.the .anh{position:relative}
.the .anh .goc{position:absolute;top:10px;left:10px;z-index:3;
  background:var(--muc);color:var(--nen);font-family:var(--sans,inherit);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;line-height:1}
.the .dg{display:flex;align-items:center;gap:7px;margin:0 0 7px;
  font-size:11.5px;color:var(--nhan);letter-spacing:.02em}
.the .dg .sao{font-size:11.5px}
.the .ho-the{display:inline-block;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nhan);border:1px solid var(--vien);
  border-radius:2px;padding:3px 8px;margin:0 0 9px}
.the .gia{font-size:14px;letter-spacing:.03em;margin-bottom:12px}
.nut-the{display:block;text-align:center;text-decoration:none;
  border:1px solid var(--muc);color:var(--muc);background:transparent;
  padding:10px 14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .18s,color .18s}
.nut-the:hover{background:var(--muc);color:var(--nen)}
@media(max-width:560px){.bang-chung{gap:8px 16px}}

/* ============ Khối câu chuyện + bảng so sánh nâng cấp (12/09) ============ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.so-sanh .ss-tieu{font-family:var(--serif);font-weight:400;
  font-size:clamp(27px,3.6vw,38px);text-align:center;margin:0 0 40px}
.bang-ss{width:100%;border-collapse:separate;border-spacing:0;
  background:var(--nen);font-size:14.5px;table-layout:fixed}
.bang-ss th,.bang-ss td{padding:15px 18px;text-align:left;
  border-bottom:1px solid var(--vien);vertical-align:top}
.bang-ss thead th{font-family:var(--serif);font-size:17px;font-weight:500;
  border-bottom:1px solid var(--muc);letter-spacing:.02em}
.bang-ss thead th em{font-style:normal;display:block;font-family:var(--sans);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nhan);margin-top:3px}
.bang-ss .c-nhan{width:22%;color:var(--muc-nhat);font-size:13px;
  letter-spacing:.03em;padding-left:0}
.bang-ss .c-ta{width:40%;background:var(--nen-2);color:var(--muc);
  border-left:2px solid var(--muc);border-right:1px solid var(--vien);font-weight:500}
.bang-ss thead .c-ta{background:var(--nen-2)}
.bang-ss .c-kia{width:38%;color:var(--muc-nhat)}
.bang-ss tbody tr:last-child td{border-bottom:0}
.bang-ss .dau{color:var(--nhan);margin-right:9px;font-weight:400}
.ss-cta{text-align:center;margin:30px 0 0;font-size:13px;letter-spacing:.03em}
.ss-cta a{color:var(--muc);text-decoration:none;
  border-bottom:1px solid var(--nhan);padding-bottom:3px}
.ss-cta a:hover{border-bottom-color:var(--muc)}

.cc{padding:84px 0;border-top:1px solid var(--vien)}
.cc-l{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:64px;align-items:center}
.cc .mao{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nhan);margin:0 0 14px}
.cc h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.6vw,40px);line-height:1.18;margin:0 0 18px}
.cc p{color:var(--muc-nhat);margin:0 0 20px;max-width:52ch}
.cc-trich{font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);
  line-height:1.35;color:var(--muc);margin:26px 0;padding:0 0 0 22px;
  border-left:2px solid var(--nhan)}
.cc-gt{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--vien)}
.cc-gt li{padding:14px 0;border-bottom:1px solid var(--vien);
  font-size:14px;color:var(--muc-nhat)}
.cc-gt strong{display:block;font-family:var(--serif);font-size:17px;
  font-weight:500;color:var(--muc);margin-bottom:3px;letter-spacing:.01em}
.cc-cta{margin:0}
.cc-cta a{color:var(--muc);text-decoration:none;font-size:13px;
  letter-spacing:.03em;border-bottom:1px solid var(--nhan);padding-bottom:3px}
.cc-cta a:hover{border-bottom-color:var(--muc)}
.cc-anh{aspect-ratio:4/5;overflow:hidden;background:var(--nen-2)}
.cc-anh img{width:100%;height:100%;object-fit:cover}

@media(max-width:860px){
  .cc{padding:56px 0}
  .cc-l{grid-template-columns:1fr;gap:34px}
  .cc-anh{aspect-ratio:4/3;order:-1}
  .bang-ss{font-size:13px}
  .bang-ss th,.bang-ss td{padding:12px 12px}
  .bang-ss .c-nhan{width:24%}
}

/* ============ 3 trang nội dung: cách dùng · về chúng tôi · chính sách ============
   Học BỐ CỤC riddleoil: ảnh chiếm phần lớn, chữ bám vào ảnh theo 2 cột so le. */

/* --- Ảnh trong 3 bước (trang Cách dùng) --- */
.cd-l .anh-b{aspect-ratio:4/3;overflow:hidden;background:var(--nen-2);
  border:1px solid var(--vien);margin-bottom:16px}
.cd-l .anh-b img{width:100%;height:100%;object-fit:cover;display:block}
.cd-l .anh-b--trong{display:flex;align-items:center;justify-content:center}

/* --- Khối 2 cột chữ ⇄ ảnh, đảo chiều được --- */
.doi{padding:74px 0}
.doi-l{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.doi-l .anh{margin:0;overflow:hidden;border:1px solid var(--vien);background:var(--nen-2)}
.doi-l .anh img{width:100%;height:100%;object-fit:cover;display:block}
.doi-l h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.3vw,34px);
  margin:0 0 18px;letter-spacing:.01em}
.doi-l p{color:var(--muc-nhat);margin:0 0 14px;font-size:15.5px}
.doi-l p:last-child{margin-bottom:0}
.doi--dao .doi-l .anh{order:-1}
/* Danh sách gạch đầu dòng nhỏ dùng trong khối 2 cột */
.doi-l .gach{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--vien)}
.doi-l .gach li{padding:13px 0;border-bottom:1px solid var(--vien);font-size:14.5px;
  color:var(--muc-nhat);display:flex;gap:14px}
.doi-l .gach li b{color:var(--muc);font-weight:500;min-width:104px;letter-spacing:.02em}

/* --- Ba giá trị: thêm nhịp bằng nền + số lớn (kiểu "The Routine") --- */
.gt-l{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
  background:var(--vien);border:1px solid var(--vien)}
.gt-l > div{background:var(--nen);padding:38px 30px 34px;position:relative}
.gt-l .so{font-family:var(--serif);font-size:15px;letter-spacing:.22em;color:var(--nhan);
  display:block;margin-bottom:20px}
.gt-l h4{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 10px;line-height:1.35}
.gt-l p{margin:0;font-size:14.5px;color:var(--muc-nhat)}

/* --- Trang chính sách: khối có tiêu đề + câu gập mở --- */
.cs-hero{padding:62px 0 46px;border-bottom:1px solid var(--vien)}
.cs-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,44px);
  margin:0 0 14px;letter-spacing:.01em}
.cs-hero p{color:var(--muc-nhat);max-width:560px;margin:0;font-size:16px}
.cs{padding:56px 0 70px}
.cs .b{max-width:min(820px,92vw)}
.cs .hoi{padding:0;border-top:0}
.cs-nhom{margin-bottom:40px}
.cs-nhom > h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 4px;
  letter-spacing:.03em}
.cs-nhom > .nhan{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--nhan);margin:0 0 12px}
.cs-lh{background:var(--nen-2);border:1px solid var(--vien);padding:30px 32px;margin-top:8px}
.cs-lh h2{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 10px}
.cs-lh p{margin:0 0 8px;color:var(--muc-nhat);font-size:15px}
.cs-lh a{color:var(--muc)}

@media(max-width:800px){
  .doi-l{grid-template-columns:1fr;gap:32px}
  .doi--dao .doi-l .anh{order:0}
  .gt-l{grid-template-columns:1fr}
}

/* Ảnh phụ dưới câu dẫn ở khối 2 cột trang Về chúng tôi */
.kc-l figure.anh{background:var(--nen-2)}
.kc-l figure.anh img{width:100%;height:auto;display:block}

/* Ảnh trong khối 2 cột: giữ khung vuông vắn, ⛔không để ảnh dọc kéo cột lệch */
.doi-l figure.anh{aspect-ratio:1/1}
.doi-l figure.anh img{width:100%;height:100%;object-fit:cover}

/* Ảnh phụ dưới câu dẫn: khung ngang thấp, ⛔không để ảnh dọc đẩy lệch 2 cột */
.kc-l figure.anh{aspect-ratio:4/3;overflow:hidden}
.kc-l figure.anh img{height:100%;object-fit:cover}

/* ==== Cột ảnh trang sản phẩm: xếp DỌC như riddleoil ====
   Trước: lưới 2 cột ⇒ số ảnh lẻ để lại 1 ô trống, và ảnh chính bị kéo giãn.
   Nay: một cột, ảnh nào cũng vuông, ảnh vừa khung không bị phóng. */
.bst{display:flex;flex-direction:column;gap:10px}
.bst .o,
.bst .o-to{aspect-ratio:1/1;width:100%}
.bst .o img{width:100%;height:100%;object-fit:contain;background:#fff}
.bst .o-that{background:#fff}
/* Ô trống (không ảnh, không hình vẽ) thì ẩn hẳn */
.bst .o:empty{display:none}

/* === Bo anh SP kieu riddleoil: 1 anh lon + dai anh nho nam ngang === */
.bst{display:flex;flex-direction:column;gap:12px}
.bst-lon{width:100%}
.bst-lon .o,.bst-lon .o-to{aspect-ratio:1/1;width:100%;margin:0;position:relative;background:#fff;overflow:hidden}
.bst-lon .o img{width:100%;height:100%;object-fit:contain;background:#fff;position:absolute;inset:0;display:block}
.bst-nho{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bst-o-nho{flex:0 0 auto;width:100px;height:100px;padding:0;margin:0;cursor:pointer;
  background:#fff;border:1px solid var(--vien);border-radius:2px;overflow:hidden;
  transition:border-color .15s ease;appearance:none}
.bst-o-nho img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.bst-o-nho:hover{border-color:var(--muc-nhat)}
.bst-o-nho.dang-chon{border-width:2px;border-color:var(--muc)}
@media(max-width:860px){.bst-o-nho{width:76px;height:76px}}

/* ============ Trang SP: cot phai thanh THE NEN TRANG + anh nho TRON (12/09) ============ */

/* A. Dai anh nho -> hinh TRON, anh dang chon co VONG VIEN bao quanh (khong phai vien vuong) */
.bst-nho{gap:12px;padding:4px 3px 8px;justify-content:flex-start}
.bst-o-nho{width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid var(--vien);
  background:#fff;transition:box-shadow .15s ease,border-color .15s ease}
.bst-o-nho img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bst-o-nho:hover{border-color:var(--nhan)}
.bst-o-nho.dang-chon{border-color:transparent;border-width:1px;
  box-shadow:0 0 0 1px #fff, 0 0 0 2px var(--muc)}
@media(max-width:860px){.bst-o-nho{width:50px;height:50px}}

/* B. Cot phai nam trong THE nen trang bo goc */
.sp .the-mua{background:#fff;border:1px solid var(--vien);border-radius:12px;
  padding:34px 36px 30px}
@media(max-width:860px){.sp .the-mua{padding:24px 20px;border-radius:10px}}

/* C. Ten SP + sao/danh gia ngang hang */
.sp .tieu-hang{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.sp .tieu-hang h1{margin:0;flex:1 1 auto;min-width:200px}
.sp .dg-sp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:10px;font-size:11.5px;color:var(--nhan);letter-spacing:.02em}
.sp .dg-sp .sao{font-size:12px}
.sp .dg-sp .dg-so{white-space:nowrap}
.sp .ho{margin-top:10px;margin-bottom:0}

/* D. Ba huy hieu: icon + 2 dong chu, co duong ke phan tach */
.sp .hh-ic{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:20px 0 0;padding:15px 0;
  border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.sp .hh-ic li{display:flex;align-items:flex-start;gap:9px;padding:0 12px;
  font-size:11.5px;color:var(--muc-nhat);line-height:1.4}
.sp .hh-ic li + li{border-left:1px solid var(--vien)}
.sp .hh-ic li:first-child{padding-left:0}
.sp .hh-ic li:last-child{padding-right:0}
.sp .hh-ic strong{display:block;font-family:var(--serif);font-size:14.5px;
  color:var(--muc);font-weight:500;letter-spacing:.02em;line-height:1.25}
.hh-svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;
  fill:none;stroke:var(--nhan);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* E. Hang mua: o so luong nho ben trai, nut dai ghi ca gia ben phai */
.sp .hang-mua form.cart{display:flex;align-items:stretch;gap:10px;margin:22px 0 0}
.sp .hang-mua .quantity{flex:0 0 auto}
.sp .hang-mua .qty{width:66px;height:100%;min-height:52px;margin:0;text-align:center;
  border-radius:6px}
.sp .hang-mua button[type=submit],
.sp .hang-mua .single_add_to_cart_button{flex:1 1 auto;min-height:52px;
  border-radius:6px;font-size:13px;letter-spacing:.11em;white-space:nowrap}

/* F. Ba huy hieu tin cay duoi nut — SU THAT, khong chung nhan bia */
.sp .tin-cay{list-style:none;display:flex;justify-content:space-around;align-items:center;
  gap:10px;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--vien);
  font-size:11.5px;color:var(--muc-nhat);letter-spacing:.03em}
.sp .tin-cay li{display:flex;align-items:center;gap:7px}
.sp .tin-cay svg{width:17px;height:17px;flex:0 0 auto;
  fill:none;stroke:var(--nhan);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* G. Bon muc gap mo cuoi cot phai */
.sp .gap-mo{margin:24px 0 0;border-top:1px solid var(--vien)}
.sp .gap-mo details{border-bottom:1px solid var(--vien)}
.sp .gap-mo summary{list-style:none;cursor:pointer;padding:15px 0;
  font-size:14.5px;letter-spacing:.02em;position:relative;padding-right:26px}
.sp .gap-mo summary::-webkit-details-marker{display:none}
.sp .gap-mo summary::after{content:"";position:absolute;right:4px;top:50%;
  width:7px;height:7px;border-right:1.4px solid var(--nhan);border-bottom:1.4px solid var(--nhan);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.sp .gap-mo details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.sp .gm-noi{padding:0 0 16px;font-size:13.5px;color:var(--muc-nhat);line-height:1.6}
.sp .gm-noi p{margin:0 0 8px}
.sp .gm-noi p:last-child{margin-bottom:0}
.gm-nhan{display:inline-block;min-width:62px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nhan)}

.sp .dan-tiep{margin-top:18px}

/* H. Dai "Nhay toi" duoi khoi san pham */
.nhay-toi{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;padding:6px 0 48px;font-size:12.5px;color:var(--muc-nhat)}
.nhay-toi span{letter-spacing:.03em;margin-right:2px}
.nhay-toi a{display:inline-block;text-decoration:none;color:var(--muc);
  border:1px solid var(--vien);border-radius:999px;padding:7px 17px;
  font-size:12.5px;letter-spacing:.02em;transition:border-color .15s ease,background .15s ease}
.nhay-toi a:hover{border-color:var(--muc);background:#fff}

/* Sua vong 2: ho huong (trai) ⇄ sao + so danh gia (phai) tren CUNG MOT dong,
   nam duoi ten SP — dung the nhu trang mau. */
.sp .the-mua h1{margin:0 0 8px}
.sp .tieu-hang{display:flex;align-items:center;justify-content:space-between;
  gap:14px 18px;flex-wrap:wrap;margin-bottom:2px}
.sp .tieu-hang .ho{margin:0}
.sp .dg-sp{padding-top:0}
/* anh nho: to hon mot chut + vong vien co KHOANG HO nhu trang mau */
.bst-o-nho{width:62px;height:62px}
.bst-o-nho.dang-chon{box-shadow:0 0 0 3px var(--nen), 0 0 0 4px var(--muc)}
.bst-nho{gap:14px;padding:5px 4px 9px}
@media(max-width:860px){.bst-o-nho{width:52px;height:52px}}


/* ===== KHOI CHON MUA (cot phai trang san pham) ===== */
.chon-mua{margin:18px 0 14px}
.cm-nhan{font-size:13px;letter-spacing:.02em;color:var(--muc);opacity:.72;margin-bottom:8px}
.cm-doi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-o{display:flex;align-items:center;gap:9px;padding:13px 14px;border:1px solid rgba(0,0,0,.16);
  border-radius:4px;background:var(--nen);cursor:pointer}
.cm-o.dang-chon{border-width:2px;border-color:var(--muc);padding:12px 13px}
.cm-cham{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.38);flex:0 0 auto}
.cm-o.dang-chon .cm-cham{border:1px solid var(--muc);box-shadow:inset 0 0 0 3px var(--nen),inset 0 0 0 9px var(--muc)}
.cm-chu{font-size:14.5px;line-height:1.25}
.cm-sap{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:99px;
  border:1px solid rgba(0,0,0,.2);opacity:.8;white-space:nowrap}
.cm-tat{opacity:.5;cursor:not-allowed;background:rgba(0,0,0,.02)}
.cm-qua{display:flex;align-items:center;gap:9px;margin-top:10px;padding:13px 14px;
  border:1px solid rgba(0,0,0,.16);border-radius:4px}
.cm-vuong{width:13px;height:13px;border:1px solid rgba(0,0,0,.38);border-radius:2px;flex:0 0 auto}
.cm-them{margin-left:auto;font-size:14px;white-space:nowrap}
.cm-goi{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 2px;
  border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);
  font-size:13.5px;color:var(--muc);text-decoration:none}
.cm-goi:hover{opacity:.7}
.cm-goi svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.3}
.cm-goi strong{margin-left:auto;font-weight:600;white-space:nowrap}
@media(max-width:520px){.cm-doi{grid-template-columns:1fr}}

/* ============ Trang chủ — 3 khối bổ sung (12/09) ============ */

/* --- 1) Dai thong bao tren dinh, truoc thanh dieu huong --- */
.tb-top{background:var(--muc);color:var(--nen);text-align:center}
.tb-top-l{max-width:1180px;margin:0 auto;padding:9px 20px;display:flex;
  flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;
  font-size:12.5px;letter-spacing:.02em;min-width:0}
.tb-top-l a{color:var(--nen);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.tb-top-l span{min-width:0}

/* --- 2) Bang chu chay ngang, ban rieng trang chu (lop bc-home khac bang-chay) --- */
.bc-home{overflow:hidden;background:var(--nen-2);border-top:1px solid var(--vien);
  border-bottom:1px solid var(--vien)}
.bch-ray{display:flex;width:max-content;animation:bch-troi 30s linear infinite;min-width:0}
.bch-cum{display:flex;align-items:center;flex:0 0 auto}
.bch-muc{font-family:var(--serif);font-size:clamp(14px,1.8vw,19px);white-space:nowrap;
  padding:16px 0;color:var(--muc)}
.bch-cham{color:var(--nhan);font-size:8px;padding:0 22px;transform:translateY(-2px)}
.bc-home:hover .bch-ray{animation-play-state:paused}
@keyframes bch-troi{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){
  .bch-ray{animation:none;width:100%;overflow-x:auto}
  .bch-cum:nth-child(2){display:none}
  .bch-muc{font-size:14px;padding:13px 0}
  .bch-cham{padding:0 14px}
}

/* --- 3) Khoi loi khach khen (DU LIEU MAU) --- */
.kk{padding:72px 0;border-top:1px solid var(--vien);min-width:0}
.kk-dau{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 8px}
.kk-dau h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.3vw,34px);margin:0}
.kk .phu{margin:0 0 30px;color:var(--muc-nhat);font-size:15px;max-width:620px}
.kk-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;min-width:0}
.kk-the{margin:0;padding:22px;border:1px solid var(--vien);min-width:0}
.kk-the p{font-family:var(--serif);font-size:17px;line-height:1.5;margin:0 0 14px;color:var(--muc)}
.kk-the cite{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muc-nhat)}
.kk-cta{margin:34px 0 0}
@media(max-width:860px){.kk-luoi{grid-template-columns:1fr}}

/* ---------- KHỐI VIDEO lọ lăn CEDAR ----------
   Video nền đá TỐI ⇒ để nguyên khung, không ép nền sáng.
   Không tiếng, tự chạy, chạy lặp. preload=none để không tốn data
   của khách cho tới khi cuộn tới. */
/* ── PHIM 32s: video phu kin khung, chu serif noi giua (hoc tu riddleoil) ── */
.phim{padding:0;margin:0}
.phim-khung{position:relative;width:100%;aspect-ratio:5/2;overflow:hidden;background:#000;
  max-height:64vh}
.phim-the{width:100%;height:100%;object-fit:cover;display:block}
/* Lop toi mo de chu doc duoc tren moi canh phim */
.phim-khung::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34) 0%,rgba(0,0,0,.14) 55%,rgba(0,0,0,0) 78%)}
.phim-chu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;padding:0 24px}
.phim-chu span{position:absolute;opacity:0;transition:opacity .8s ease;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.6vw,50px);letter-spacing:.02em;line-height:1.25;
  color:rgba(255,253,248,.94);text-align:center;text-wrap:balance;
  text-shadow:0 1px 26px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3)}
.phim-chu span.hien{opacity:1}
@media(max-width:700px){
  .phim-khung{aspect-ratio:4/5;max-height:none}
  .phim-chu span{font-size:clamp(22px,6.4vw,32px)}
}
@media(prefers-reduced-motion:reduce){.phim-chu span{transition:none}}

.vid{padding:64px 0}
.vid-khung{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--muc);border:1px solid var(--vien)}
.vid-the{width:100%;height:100%;object-fit:cover;display:block}
.vid-chu{text-align:center;color:var(--muc-nhat);font-size:14.5px;
  margin:16px 0 0;line-height:1.6}
@media(max-width:700px){
  .vid{padding:44px 0}
  .vid-chu{font-size:13.5px;margin-top:13px}
}

/* ===== DUONG NGUONG — dau hieu rieng cua UNA SOGLIA =====
   "Soglia" = nguong cua. Logo la CAI TEN nam hai ben MOT DUONG NGANG.
   Vach dong nay lap lai dau hieu do duoi moi tieu de khoi.
   Ho so 06-thuong-hieu/20 §logo + /23 §bang mau. */
.tieu-giua{position:relative;padding-bottom:20px}
.tieu-giua::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:46px;height:1px;background:var(--dong)}
/* Tieu de le trai (khong can giua) */
.pt h2,.cd h2,.kc h2{position:relative;padding-bottom:18px}
.pt h2::after,.cd h2::after,.kc h2::after{content:"";position:absolute;bottom:0;
  width:46px;height:1px;background:var(--dong)}
.pt h2::after,.cd h2::after{left:50%;transform:translateX(-50%)}
.kc h2::after{left:0}

/* Vach dong trong logo — dung dau hieu "cai ten hai ben mot nguong" */
.logo{position:relative}


/* ===== DAM CHU TOAN WEB — CEO chot 13/09 =====
   Inter 400 tren nen giay nga nhin bac. Nang than chu len 500,
   chu phu len 500 va toi hon, nhan/nut len 600. */
body{font-weight:500}
p,li,td,th,dd,figcaption,input,textarea,select,button{font-weight:500}
.dh nav a,.the .canh,.cd-l p,.thap-l p,.ai-l p,.hoi details p,
.sp .hh li,.sp .an-tam li,.sp .dan-tiep,.kb-l div,.hero p,.pt .phu,
.kc p,.hero2 .dan2,.ss td:first-child{font-weight:500;color:var(--muc-nhat)}
.nut,.nut-vien{font-weight:600}
.logo{font-weight:600}
.logo small{font-weight:600;opacity:1}
.sp .gia-l,.the .gia,.gia{font-weight:600;color:var(--muc)}
strong,b{font-weight:600}
/* serif co net day-mong san, chi nang tieu de cap 2 */
.the h3,.cd-l h4,.ai-l h3,.thap-l strong,.chan h5,.ss th{font-weight:600}
/* nhan chu nho in hoa: mo qua thi doc khong ra */
.sp .ho,.thap-l .so,.hero2 .duoi-nut,.chan .nho{font-weight:600;color:var(--muc-nhat)}

/* bang thong bao dau trang: nau nhan thay vi den — nhe hon voi khach nu */
.tb-top{background:var(--dong);color:var(--nen)}
.tb-top-l a{color:var(--nen)}
/* siet them do dam cho doan chu nho */
.the .canh,.sp .hh li,.hero2 .duoi-nut,.kb-l div,.chan p,.chan li{font-weight:500}
.hero p,.pt .phu,.kc p,.ai-l p,.cd-l p,.thap-l p,.hoi details p{color:var(--muc-nhat);font-weight:500}

/* nut chinh: chu GIAY NGA tren nau (6,47). Chu muc chi dat 2,26 — khong doc duoc */
.nut{color:var(--nen)}
.nut:hover{background:var(--dong-dam);border-color:var(--dong-dam);color:var(--nen)}
.nut-vien{background:transparent;color:var(--muc);border-color:var(--muc)}
.nut-vien:hover{background:var(--muc);color:var(--nen)}

/* nhan goc the SP: nau nhan cho dong bo voi bang tren va nut (6,47) */
.the .anh .goc{background:var(--dong);color:var(--nen)}

/* nut mua: nau nhan. Phai dat CUOI style.css vi style.css nap SAU shop.css */
button.button.alt, a.button.alt, input.button.alt,
.woocommerce button.button.alt, .woocommerce a.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce input.button.alt,
button.single_add_to_cart_button, .sp .single_add_to_cart_button,
.sp button[type=submit]{
  background:var(--dong) !important; border-color:var(--dong) !important; color:var(--nen) !important}
button.button.alt:hover, .woocommerce button.button.alt:hover,
button.single_add_to_cart_button:hover, .sp .single_add_to_cart_button:hover{
  background:var(--dong-dam) !important; border-color:var(--dong-dam) !important; color:var(--nen) !important}


/* ═══════════════════════════════════════════════════════════
   TACH KHOI — 14/09. CEO: "khoi khong tach nhau, mau nhat".
   Do that: nen khoi cu chenh nhau 1,1 lan => MAT KHONG THAY.
   Hoc tu riddleoil + ormondejayne + goldfieldandbanks (do o 390px):
     · ca 3 KHONG dung duong ke de chia khoi chinh — ho doi NEN
     · khoang cach giua khoi = 0px, khoi dam thang vao nhau
     · ca 3 deu co MANG TOI LON (Riddle chan trang den cao 901px)
   ═══════════════════════════════════════════════════════════ */

/* 1) Nen xen ke DAM len: 1,1 -> 1,19 (bang dung muc cua Riddle) */
:root{ --nen-2:#E4DBCB; }

/* 2) Bo duong ke giua cac khoi — mau nen tu tach, ke chi lam ban.
      Giu ke trong bang/hoi-dap, chi bo ke NGAN KHOI. */
.kb, .ss, .kc, .thap, .hoi, .bch{ border-top:0; border-bottom:0 }

/* 3) CHAN TRANG toi dac, tran het mep — mang toi lon nhat trang.
      Chu giay nga tren nen muc = 14,6 (rat de doc). */
.chan{ background:var(--muc); color:var(--nen); border-top:0; margin-top:0;
       padding:60px 0 44px }
.chan h5{ color:var(--nen) }
.chan a, .chan p, .chan li{ color:#C9BCA8 }
.chan a:hover{ color:var(--nen) }
.chan .nho, .chan small{ color:#9A8D7B }
/* nut dong tren nen toi chi dat 2,26 => dung nut VIEN sang */
.chan .nut{ background:transparent; border-color:var(--nen); color:var(--nen) }
.chan .nut:hover{ background:var(--nen); color:var(--muc) }

/* 4) Khoi "cau chuyen" (.kc) thanh MANG TOI giua trang —
      chan doi be lien tuc, giong dai den giua trang cua Riddle. */
.kc{ background:var(--muc); color:var(--nen) }
.kc h2{ color:var(--nen) }
.kc p{ color:#C9BCA8 }
.kc .nut-vien{ border-color:var(--nen); color:var(--nen) }
.kc .nut-vien:hover{ background:var(--nen); color:var(--muc) }
.kc a{ color:var(--nen) }

/* 5) Dem trong khoi deu nhau tren dien thoai (so cua Riddle: 40px) */
@media(max-width:700px){
  .pt,.cd,.ai,.hoi,.thap,.kc,.ss,.bch{ padding:44px 0 }
  .kb{ padding:32px 0 }
  .chan{ padding:44px 0 32px }
}
/* chu trong khoi toi .kc: cau dan + dong nho */
.kc .dan{color:var(--nen)}
.kc .dan small{color:#9A8D7B}
.kc small{color:#9A8D7B}

/* Doan "Dung the nao" + "Nguoi dung thu" tung la dai be LIEN TUC ~4 man.
   3 web mau khong de dai lien qua 1-1,5 man => chen 1 nhip doi nen. */
.kk{background:var(--nen-2)}

/* Chan trang phai TRAN het day man, khong de ho be duoi cung */
body{background:var(--nen)}
.chan{margin-bottom:0}
html{background:var(--muc)}

/* The cuoi dai cuon phai co dem phai, khong bi mep man cat */
@media(max-width:700px){
  .bch-dai::after{content:"";flex:0 0 max(16px,calc(50vw - 50%))}
}

/* Chu phu dam them 1 bac: #7B7063 chi dat 3,52 tren nen dam (duoi chuan 4,5).
   #6E6458 dat 4,22 tren nen dam va 5,0 tren nen nhat — tot hon o CA HAI cho. */
:root{ --muc-nhat:#6E6458 }

/* Khoi "Dung the nao" (.cd) nen dam — cat dai be nhat 4,4 man tu hero xuong.
   3 web mau khong de dai lien qua 1-1,5 man. */
.cd{ background:var(--nen-2) }
.kk{ background:var(--nen) }

/* ".ss" (Chua biet chon mui) va ".cd" (Dung the nao) dung LIEN NHAU cung nen dam
   => doc nhu MOT dai 2,27 man. Tach: .ss ve nhat, .cd giu dam. */
.ss{ background:var(--nen) }

/* Cuoi trang: cau chuyen (.bst/.kc2) + dai SP (.bch) cung nhat = 2,01 man.
   Cho dai SP nen dam de tach khoi cau chuyen. */
.bch{ background:var(--nen-2) }

/* =====================================================================
   GON 05/10 — THANG CHU + NHIP KHOI CHO TRANG CHU
   Do 05/10: trang chu dung 25+ kieu chu (co le 11,5·12,5·13,5·14,5px),
   khoi cao lech nhau 65px…900px. Abel chi 9 kieu, khoi nao cung ~1 man.
   ⇒ SAU co chu, KHONG co le. Moi co chu tren trang chu PHAI la mot trong sau:
      12 nhan in hoa · 14 chu phu · 16 than · 20 tieu de nho · H2 · H1
   ⛔ Giu do dam 500 (CEO chot 13/09: Inter 400 tren nen nga nhin bac).
   ===================================================================== */
:root{
  --c-nhan:12px; --c-phu:14px; --c-than:16px; --c-tieu:20px;
  --c-h2:clamp(28px,3.2vw,40px); --c-h1:clamp(36px,4.4vw,56px);
  --nhip:128px;
}
.home .tb-top-l{font-size:var(--c-phu)}
.home .dh nav{font-size:var(--c-phu)}

.home .hero2 .mao{font-size:var(--c-nhan);letter-spacing:.2em}
.home .hero2 h1{font-size:var(--c-h1)}
.home .hero2 .dan2{font-size:var(--c-than)}
.home .hero2 .duoi-nut{font-size:var(--c-phu)}
.home .nut{font-size:var(--c-nhan);letter-spacing:.16em}

/* nhip: moi khoi chu cung mot khoang tho tren-duoi */
.home .cau-dat,.home .ss,.home .cc,.home .bch{padding:var(--nhip) 0;border-top:0}

/* mot cau dung giua man trong — thay dai 4 y + dai chu chay */
.cau-dat{background:var(--nen);text-align:center}
.cau-dat p{font-family:var(--serif);font-weight:400;font-size:var(--c-h2);line-height:1.3;
  color:var(--muc);margin:0 auto 28px;max-width:30em;text-wrap:pretty}
.cau-dat small{display:block;font-size:var(--c-nhan);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muc-nhat);font-weight:600}

/* tieu de khoi: mot co, mot khoang cach */
.home .ss h2,.home .cc h2,.home .bch h2{font-family:var(--serif);font-weight:400;
  font-size:var(--c-h2);line-height:1.15;margin:0 0 16px}
.home .ss .phu,.home .bch .phu{font-size:var(--c-than);color:var(--muc-nhat);margin:0 0 32px}
.home .ss .ss-gia{font-size:var(--c-than);margin:0 0 36px}
.home .ss .ss-gia strong{font-size:var(--c-tieu)}

.home .cc .mao{font-size:var(--c-nhan);letter-spacing:.2em}
.home .cc-trich{font-size:var(--c-tieu);margin:8px 0 32px}
.home .cc-cta a{font-size:var(--c-phu)}
.home .cc-anh{aspect-ratio:4/5}

.home .bch-the h3{font-size:var(--c-tieu);font-weight:500;letter-spacing:.06em;margin:0 0 8px}
.home .bch-the .bch-ho{font-size:var(--c-nhan);letter-spacing:.14em;padding:3px 8px}
.home .bch-the .bch-gia{font-size:var(--c-phu)}
.home .bch-nut{font-size:var(--c-nhan)}
.home .bch-the .bch-anh{margin-bottom:16px}

@media(max-width:700px){
  :root{--nhip:80px}
}

/* Menu tren dien thoai: 390px khong chua noi logo + 4 muc tren MOT hang
   ⇒ "Ve / chung / toi" gay 3 dong, logo gay 2 dong (chup 05/10).
   Tach hai hang: logo tren, menu duoi, khong cho xuong dong. */
@media(max-width:600px){
  .dh .b{flex-direction:column;align-items:center;gap:10px;padding:14px 0 12px}
  .logo{font-size:20px;text-align:center;white-space:nowrap}
  .dh nav{gap:22px;font-size:13px;white-space:nowrap}
}