/* ═══════════════════════════════════════════════════════════
   Giao diện chung cho các trang sản phẩm gia công.
   Dùng lại bộ màu và họ chữ của trang danh mục. Mọi trang
   sp-*.html đều nạp tệp này — sửa một nơi, đổi tất cả.
   ═══════════════════════════════════════════════════════════ */
/* Dùng lại bộ màu và họ chữ của trang danh mục. */
:root{
  --paper:#FAF7F1; --paper-2:#F2ECE1; --ink:#141210; --ink-soft:#5B554D;
  --line:#DFD7C8; --line-soft:#EAE3D6; --gold:#C79230; --gold-ink:#8A6212;
  --oliu:#5B6B2E; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:Montserrat,system-ui,sans-serif; font-weight:400; font-size:16px;
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{width:min(1360px,100% - 8vw); margin-inline:auto}

.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; padding:1.1rem max(4vw,1rem);
  background:rgba(250,247,241,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft)}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{width:34px}
.brand b{font-size:.92rem; font-weight:500; letter-spacing:.18em}
.nav__right{display:flex; align-items:center; gap:1.6rem}
.nav__tel{font-size:.86rem; font-weight:500; line-height:1.25}
.nav__tel span{display:block; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-ink); font-weight:600}
.btn{display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 1.9em; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; background:var(--gold); color:var(--ink);
  border:0; border-radius:0; cursor:pointer;
  transition:transform .35s var(--ease), background .35s ease}
.btn:hover{transform:translateY(-2px); background:#B07D22}
.btn--vien{background:transparent; border:1px solid var(--ink)}
.btn--vien:hover{background:var(--ink); color:var(--paper)}
.btn--sang{background:transparent; color:var(--paper); border:1px solid rgba(250,247,241,.45)}
.btn--sang:hover{background:rgba(250,247,241,.1)}
@media (max-width:760px){ .nav__tel{display:none} }
/* Nút chuyển ngôn ngữ VI | EN trên trang sản phẩm (chỉ có khi trang có bản tiếng Anh) */
.nn{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; background:var(--paper)}
.nn a{padding:.32rem .62rem; border-radius:999px; font-size:.66rem; font-weight:600; letter-spacing:.14em;
  color:var(--ink-soft); line-height:1; transition:background .25s, color .25s}
.nn a:hover{color:var(--ink)}
.nn a.on{background:var(--ink); color:var(--paper)}
@media (max-width:760px){ .nav__right{gap:.6rem} .nn a{padding:.3rem .5rem}
  .brand b{white-space:nowrap} .nav .btn{white-space:nowrap; padding:.7rem .9rem; font-size:.62rem} }
@media (max-width:420px){ .brand b{display:none} }

/* ═════ Đường dẫn quay lại ═════ */
.duong{padding:1.8rem 0 0; font-size:.72rem; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft)}
.duong a:hover{color:var(--gold-ink)}
.duong span{margin:0 .5em; color:var(--line)}

/* ═════ Phần đầu: ảnh trái, giới thiệu phải ═════ */
/* align-items mặc định (stretch): cột ảnh cao bằng cột phải, nên mép dưới
   ảnh trùng mép dưới biểu mẫu. */
.dau{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;
  padding:2.6rem 0 3.5rem}
@media (max-width:900px){ .dau{grid-template-columns:1fr; gap:2rem; padding-bottom:2.5rem} }
/* Cột phải (tên sản phẩm + biểu mẫu) cao hơn ảnh khá nhiều. Cho ảnh dính
   theo khi cuộn để cột trái không bỏ trống một mảng lớn. Thanh điều hướng
   cao 77px nên chừa 77 + 24. Tắt ở màn hẹp vì lúc đó hai cột xếp chồng. */
/* Khung ảnh cao bằng cột phải nên mép dưới hai bên trùng nhau; ảnh phủ kín
   khung. Bốn ảnh trong img/sp đều là khổ DỌC ~2:3 để phần bị xén chỉ còn vài
   phần trăm — ảnh vuông thả vào đây sẽ bị xén gần 19% mỗi bên ở màn 1120px
   (ảnh sữa rửa mặt vốn vuông, đã nới thành khổ dọc bằng nền mờ của chính nó). */
/* Ảnh đặt tuyệt đối để khung KHÔNG mang chiều cao của ảnh: nếu để ảnh chảy
   bình thường, ảnh dọc 2:3 sẽ cao hơn cột phải và tự nó kéo hàng cao lên,
   biểu mẫu lại hụt 219px so với đáy ảnh. Khung rỗng thì chiều cao hàng do
   cột phải quyết định, ảnh phủ kín theo. */
.dau figure{margin:0; background:var(--paper-2); position:relative; min-height:0}
.dau figure img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%; display:block}
@media (max-width:900px){
  /* Xếp chồng thì không còn cột nào để căn theo — trả ảnh về khổ dọc 4:5. */
  .dau figure{position:static}
  .dau figure img{position:static; height:auto; aspect-ratio:4/5}
}
.eyebrow{font-size:.7rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink); margin:0}
.dau h1{margin:1.1rem 0 0; font-weight:300; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.3; color:var(--oliu);
  font-size:clamp(1.5rem,3.1vw,2.5rem)}
.dau .nut{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem}
/* Khối mô tả sản phẩm, nằm ngay dưới phần đầu. Tách riêng khỏi cột phải để
   cột phải chỉ còn tên sản phẩm và biểu mẫu — bên trái ảnh, bên phải ô điền. */
.dan{margin:0; max-width:none; font-size:clamp(1rem,1.25vw,1.15rem);
  font-weight:300; line-height:1.95; color:var(--ink-soft)}

/* ═════ Bảng thông số ═════ */
/* Nhịp dọc của trang (cân lại 30/09): mỗi khối đệm 2.4rem trên/dưới — vạch kẻ vẫn nằm
   chính giữa khoảng trống giữa hai khối. Nhãn → tiêu đề .7rem, tiêu đề → nội dung 1.6–1.8rem,
   ô trong lưới đệm 1.1–1.2rem: chữ gần nhau thành cụm, các cụm vẫn tách bạch. */
.khoi{padding:2.4rem 0; border-top:1px solid var(--line)}
.khoi h2{margin:.7rem 0 0; font-weight:300; letter-spacing:.05em;
  text-transform:uppercase; font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.35}
.khoi > .wrap > p:not(.eyebrow):not(.dan){margin:.9rem 0 0; max-width:none; font-weight:300;
  line-height:1.9; color:var(--ink-soft)}
.thongso{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:1.8rem;
  border-top:1px solid var(--line)}
@media (max-width:900px){ .thongso{grid-template-columns:1fr} }
.thongso div{padding:1.2rem 1.6rem 1.2rem 0; border-bottom:1px solid var(--line-soft)}
/* Hàng cuối của bảng: bỏ vạch và đệm dưới — vạch chia khối ngay bên dưới đã làm việc
   đó, để cả hai thì thành hai vạch sát nhau và khoảng trống lệch so với các khối khác. */
.thongso div:nth-last-child(-n+3){border-bottom:0; padding-bottom:0}
@media (max-width:900px){
  .thongso div:nth-last-child(-n+3){border-bottom:1px solid var(--line-soft); padding-bottom:1.2rem}
  .thongso div:last-child{border-bottom:0; padding-bottom:0}
}
.thongso dt{font-size:.64rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink); margin:0 0 .45rem}
.thongso dd{margin:0; font-size:.92rem; font-weight:300; line-height:1.8; color:var(--ink)}

/* ═════ Danh sách tuỳ chọn ═════ */
.chon{display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; margin-top:1.6rem}
@media (max-width:760px){ .chon{grid-template-columns:1fr} }
.chon div{padding:1.1rem 0; border-top:1px solid var(--line-soft)}
/* Hàng cuối: bỏ đệm dưới để khoảng cách tới khối sau chỉ do đệm khối quyết định */
.chon div:nth-last-child(-n+2){padding-bottom:0}
@media (max-width:900px){ .chon div:nth-last-child(2){padding-bottom:1.1rem} }
.chon h3{margin:0 0 .35rem; font-size:.95rem; font-weight:400}
.chon p{margin:0; font-size:.86rem; font-weight:300; line-height:1.8; color:var(--ink-soft)}

/* ═════ Quy trình ═════ */
.buoc{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:1.8rem;
  border-top:1px solid var(--line)}
@media (max-width:900px){ .buoc{grid-template-columns:1fr} }
.buoc div{padding:1.3rem 1.4rem 1.3rem 0; border-bottom:1px solid var(--line-soft)}
.buoc b{display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  color:var(--gold-ink); margin-bottom:.7rem}
.buoc h3{margin:0 0 .45rem; font-size:.92rem; font-weight:400}
.buoc p{margin:0; font-size:.82rem; font-weight:300; line-height:1.75; color:var(--ink-soft)}

/* ═════ Gọi hành động ═════ */
.goi{background:var(--ink); color:var(--paper); padding:4rem 0}
.goi .eyebrow{color:#E0B057}
.goi h2{margin:1.1rem 0 0; font-weight:300; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(1.4rem,2.8vw,2.2rem); line-height:1.35}
.goi p{margin:1.3rem 0 0; max-width:48ch; font-weight:300; line-height:1.9; color:#B8B1A6}
.goi__nut{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem}

.chan{padding:2.6rem 0; font-size:.8rem; font-weight:300; color:var(--ink-soft);
  border-top:1px solid var(--line); display:flex; gap:1.2rem;
  justify-content:space-between; flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ═════ Khối gửi thông tin & ý tưởng (nằm ngay dưới hai nút) ═════
   Nền lặn một bậc so với giấy để khối tách khỏi phần giới thiệu mà
   không cần thêm đường viền dày. Ô nhập chỉ gạch chân — cùng ngôn ngữ
   với biểu mẫu ở trang chủ, chỉ đảo màu cho nền sáng. */
.ycau{margin-top:2rem; padding:2rem 1.9rem 1.9rem;
  background:var(--paper-2); border-top:2px solid var(--oliu)}
.ycau__nhan{margin:0; font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--oliu)}
.ycau__mo{margin:.7rem 0 0; font-size:.86rem; font-weight:300; line-height:1.8;
  color:var(--ink-soft)}
.ycau__luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:.2rem 1.6rem; margin-top:1.5rem}
.o{display:grid; align-content:start}
.o--rong{grid-column:1 / -1}
.o label{font-size:.63rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); padding-top:1.1rem}
.o label i{font-style:normal; color:var(--oliu)}
.o input, .o textarea, .o select{width:100%; padding:.65em 0; font:inherit;
  font-size:.92rem; font-weight:300; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; transition:border-color .3s ease}
.o select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px), calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:1.4rem}
.o input::placeholder, .o textarea::placeholder{color:#9C958A}
.o input:focus, .o textarea:focus, .o select:focus{outline:none; border-bottom-color:var(--oliu)}
.o input[aria-invalid="true"], .o textarea[aria-invalid="true"]{border-bottom-color:#C4553C}
/* Ô ý tưởng: kéo giãn được chiều dọc, không kéo ngang vì sẽ phá cột. */
.o textarea{resize:vertical; min-height:6.5em; line-height:1.8}
.o__loi{margin:.45rem 0 0; font-size:.72rem; line-height:1.5; color:#C4553C}
.o__loi:empty{display:none}
.ycau__day{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.8rem}
.ycau__day .btn[disabled]{opacity:.5; cursor:default; transform:none}
.ycau__tt{margin:0; font-size:.78rem; font-weight:300; line-height:1.7; color:var(--ink-soft)}
.ycau__tt:empty{display:none}
.ycau__tt.loi{color:#C4553C}
.ycau__rieng{margin:1.1rem 0 0; font-size:.72rem; font-weight:300; line-height:1.7;
  color:#8D867C}
/* Ô bẫy máy gửi rác — đẩy ra ngoài màn hình chứ KHÔNG dùng display:none,
   vì nhiều máy tự động bỏ qua ô bị ẩn hẳn. */
.bay{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Màn hình gửi xong, thay chỗ cho biểu mẫu */
.ycau__xong h3{margin:0; font-size:1.1rem; font-weight:400; color:var(--oliu)}
.ycau__xong h3:focus-visible{outline:1px solid var(--oliu); outline-offset:4px}
.ycau__xong p{margin:.8rem 0 0; font-size:.88rem; font-weight:300; line-height:1.85;
  color:var(--ink-soft)}
.ycau__nut{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem}
@media (max-width:520px){
  .ycau{padding:1.6rem 1.2rem 1.5rem}
  .ycau__luoi{grid-template-columns:1fr}
}

/* Khối mô tả: chỉ còn đoạn chữ. Phải khai SAU .khoi mới đè được đệm 4.5rem
   của nó — cùng một mức ưu tiên thì thứ tự trong tệp quyết định. */
.khoi--dan{padding:2.2rem 0}
/* Chân trang: dòng đầu tên công ty đậm hơn một bậc, các dòng sau chữ nhỏ */
.chan b{font-weight:500; color:var(--ink)}
.chan span:first-child{line-height:1.8}

/* Chữ dàn hết chiều rộng khối nội dung, căn đều hai bên (màn hẹp giữ căn trái để không hở chữ) */
@media (min-width:761px){
  .dan,
  .khoi > .wrap > p:not(.eyebrow):not(.dan),
  .chon p{text-align:justify; text-justify:inter-word}
}

/* Tên sản phẩm song ngữ: dòng tiếng Anh dưới H1 và ở cuối đường dẫn */
.dau .ten-en{margin:.7rem 0 0; font-size:.78rem; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(20,18,16,.55)}
.duong .duong__en{margin:0; color:inherit; opacity:.75}
.duong .duong__en::before{content:"· "}