/* Silent.S — cửa hàng Hàn silents.vn/kr/ (SS duyệt demo PA B 18–19/10). Nạp SAU /css/noir.css của web gốc (theme sáng): chỉ thêm phần riêng
   của trang Hàn — kho sản phẩm (1/3 lưới · 2/3 chi tiết), tờ thông tin trên nền giấy kraft, clip hướng dẫn dọc, giỏ hàng, khối liên hệ. Logic: kr.js. */
#ssChatFab, #ssChatBox { display: none !important; }              /* khung chat tiếng Việt của web gốc — không dùng ở /kr/ */
html[lang="ko"] { --f-noidung: 'Tegomin', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', serif; --f-giaodien: 'Tegomin', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.hdr-logo { display: flex; align-items: center; gap: 10px; }
.kr-dt { font: 15px var(--f-vietay); color: var(--pink); white-space: nowrap; }
.hdr-cart { position: relative; }
.hdr-cart b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pink); color: #fff; font: 600 11px/18px system-ui; text-align: center; padding: 0 4px; }
.pfrom .usd { display: block; color: var(--muted); font-size: .78em; margin-top: 2px; }
.pfrom, .kr-so { font-variant-numeric: tabular-nums; }
.kr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.kr-chips::-webkit-scrollbar { display: none; }
.kr-chips .chip { flex: none; }
.kr-luoi { padding-top: 22px; padding-bottom: 8vh; }
@media (max-width: 860px) { .kr-luoi .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* PA B — mỗi dấu ấn một dải trượt ngang */
.kr-dai { padding: 9vh 0 2vh; }
.kr-dai + .kr-dai { padding-top: 5vh; }
.kr-dai .sec-title { font-size: clamp(30px, 5vw, 56px); }
.kr-dai .kr-nghia { color: var(--muted); margin-top: 10px; max-width: 40em; }
.kr-truot { display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 26px max(4vw, calc((100vw - 1360px) / 2)) 12px; scroll-padding-inline: max(4vw, calc((100vw - 1360px) / 2)); scrollbar-width: none; }
.kr-truot::-webkit-scrollbar { display: none; }
.kr-truot .pcard { scroll-snap-align: start; }
.kr-hero .hero-title { opacity: 1; }
.kr-hero .hero-title .ch { transform: none; opacity: 1; }

/* trang thông tin (About + Dấu ấn · Chính sách) */
.kr-trang { padding-bottom: 6vh; }
.kr-trang p { max-width: 44em; line-height: 1.75; }
.kr-trang p + p { margin-top: 1em; }
.kr-muc { padding: 6vh 0 0; }
.kr-muc h2 { font: 400 clamp(26px, 3.6vw, 40px)/1.15 var(--f-tieude); margin-bottom: 16px; }
.kr-muc ul { padding-left: 1.1em; display: grid; gap: 8px; max-width: 44em; line-height: 1.7; }
.kr-tam { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); border: 1px solid var(--pink); border-radius: 99px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; }
.kr-dauan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 4vh; }
.kr-dauan article { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); display: grid; grid-template-rows: auto 1fr; }
.kr-dauan .da-anh { aspect-ratio: 4/3; display: grid; place-items: center; background: var(--bg); }
.kr-dauan .da-anh img { max-width: 70%; max-height: 80%; object-fit: contain; }
.kr-dauan .da-chu { padding: 16px 18px 20px; }
.kr-dauan .da-chu small { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
.kr-dauan .da-chu h3 { font: 400 30px/1.1 var(--f-tieude); margin: 6px 0 8px; }
.kr-dauan .da-chu p { color: var(--muted); font-size: 14px; }
.kr-dauan a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); display: inline-block; margin-top: 12px; }
.kr-bang { width: 100%; max-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 10px; }
.kr-bang th, .kr-bang td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: center; font-size: 14px; }
.kr-bang th { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* cột phải khối Liên hệ: cách đặt hàng */
.kr-dat ol { padding-left: 1.2em; display: grid; gap: 10px; margin: 14px 0 22px; line-height: 1.6; }
.kr-dat .btn-line { margin: 0 10px 10px 0; }

/* tấm sản phẩm + giỏ */
#krLop { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; }
#krLop .nen { position: absolute; inset: 0; background: rgba(27,23,18,.45); }
#krLop .than { position: relative; width: min(100%, 980px); height: 100%; overflow: auto; background: var(--bg); color: var(--text); }
#krLop .dong { position: absolute; top: 12px; right: 14px; z-index: 3; }
.kr-sp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .kr-sp { grid-template-columns: minmax(0, 1fr); } }
.kr-sp .anh { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 1; background: var(--bg-2); }
.kr-sp .anh > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.kr-sp .chu { padding: 28px 24px 40px; display: grid; gap: 12px; align-content: start; }
.kr-sp h2 { font: 400 40px/1.05 var(--f-tieude); }
.kr-sp .pcat { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
.kr-sp .mo { color: var(--muted); font-size: 14px; line-height: 1.7; }
.kr-sp select, .kr-gio input { font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); width: 100%; }
.kr-sp .gia { font: 400 30px var(--f-tieude); }
.kr-sp .gia small, .kr-gio small { font: 14px var(--f-noidung); color: var(--muted); }
.kr-sp .luu-y { color: var(--pink); font-size: 13px; }
.kr-gio { padding: 30px 24px 44px; max-width: 560px; display: grid; gap: 14px; }
.kr-gio h2 { font: 400 40px var(--f-tieude); }
.kr-gio ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.kr-gio li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.kr-gio li b { font: 400 22px var(--f-tieude); display: block; }
.kr-gio .sl button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.kr-gio .hang { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.kr-gio .hang.tong { font: 400 26px var(--f-tieude); border-top: 1px solid var(--text); padding-top: 10px; }
.kr-gio .hang.giam { color: var(--pink); }
.kr-gio .ma { display: flex; gap: 8px; }
.kr-nho { font-size: 13px; color: var(--muted); }
[data-theme="light"] body:not(.subpage) .hdr:not(.scrolled) .hdr-logo img { filter: invert(1) brightness(1.7); }
/* cột «cách đặt hàng» — noir.css ẩn .lh-form trên điện thoại nên dùng khối riêng */
.contact-body .kr-dat { border-left: 1px solid var(--line); padding-left: 4vw; }
.contact-body .kr-dat > h3 { font-family: var(--f-giaodien); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.kr-dat ol { font-size: 15px; }
@media (max-width: 860px) { .contact-body .kr-dat { border-left: 0; padding-left: 0; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); } }

/* ══ vòng 2 (18/10) ══ */
html.kr-khoa { overflow: hidden; }
.kr-clip { width: 100%; max-width: 560px; border-radius: 12px; background: #000; margin: 10px 0 14px; aspect-ratio: 16/9; object-fit: cover; }
.pm-cum-body .kr-clip { max-width: 100%; }
.footer-base { padding-bottom: 90px; }
/* lớp phủ: trang phụ sản phẩm rộng; giỏ / ♡ / Chicgroov hẹp; tờ thông tin rộng */
#krLop.kr-lop-nho .than { width: min(100%, 560px); }
#krLop.kr-lop-sp .than { width: min(100%, 1180px); background: var(--bg); }
#krLop.kr-lop-rong .than { width: 100%; }
#krLop .than { animation: krVao .35s var(--ease-out); }
@keyframes krVao { from { transform: translateX(40px); opacity: 0; } }
.kr-detail { display: block !important; position: static; max-height: none; border: 0; border-radius: 0; min-height: 100%; animation: none; }
.kr-detail .store-detail-body { padding-top: 64px; }
.kr-sdb { display: flex !important; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 4; padding: 10px 64px 10px 16px; background: rgba(250,248,243,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.kr-sdb + .store-detail-body { padding-top: clamp(18px, 3vw, 36px); }
.kr-sdb-ten { flex: 1; min-width: 0; font: 400 20px var(--f-tieude); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-sdb-nav { display: flex; gap: 6px; }
#krLop.kr-lop-sp .dong { top: 9px; }
.kr-detail .pm-main img, .kr-detail .pm-video { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.kr-detail .pm-main.is-vid .pm-video { display: block; }
.kr-detail .pm-name { font-size: clamp(30px, 3.4vw, 46px); margin-top: 6px; }
.kr-detail .pm-desc { font-size: 14.5px; line-height: 1.7; margin-top: 4px; }
.kr-detail .pm-prices { margin-top: 14px; }
.kr-bac { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.kr-bac input { accent-color: var(--pink); margin-right: 6px; }
.kr-chon { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.kr-chon select { font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); width: 100%; }
.kr-chon select.kr-thieu { border-color: var(--pink); }
.kr-chon .btn-line { text-align: center; justify-content: center; }
.kr-detail .pm-note { color: var(--pink); font-size: 13px; margin-top: 8px; }
.kr-detail .pm-heart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 1px solid var(--line); border-radius: 99px; background: none; color: inherit; cursor: pointer; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 0 14px; }
.kr-detail .pm-heart.on { color: var(--pink); border-color: var(--pink); }
.kr-detail .pm-heart.on .ht { fill: var(--pink); stroke: var(--pink); }
.pm-rcard .im { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.pm-rcard .im img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pm-rcard b { display: block; font: 400 17px/1.15 var(--f-tieude); margin-top: 6px; }
.pm-rcard small { color: var(--pink); font-size: 12px; }
.kr-detail .pm-related { padding: 24px clamp(18px, 3vw, 40px) 40px; }
@media (max-width: 860px) {
  #krLop.kr-lop-sp .than { width: 100%; }
  .kr-detail .pm-cols { grid-template-columns: 1fr; }
  .kr-detail .pm-media { position: static; }
}
/* ♡ ở header như web gốc */
.hdr-wish .wish-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pink); color: #fff; font: 600 11px/18px system-ui; text-align: center; padding: 0 4px; display: none; }
.hdr-wish.has .wish-count { display: block; }
.hdr-wish.has svg { fill: var(--pink); stroke: var(--pink); }
.hdr-cart svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kr-tim { padding: 30px 20px 40px; }
.kr-tim h2 { font: 400 40px var(--f-tieude); margin-bottom: 16px; }
.kr-tim h2 small { font: 14px var(--f-noidung); color: var(--muted); }
.kr-tim .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* giỏ */
.kr-gio li { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; }
.kr-gio-anh { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); display: block; }
.kr-gio-anh img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.kr-gio small { display: block; }
.kr-gio .sl { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.kr-gio .kr-xoa { width: auto !important; border: 0 !important; color: var(--muted); font-size: 12px; text-decoration: underline; margin-left: 6px; }
.kr-gio .ma { display: flex; gap: 8px; }
.kr-gio .ma input { flex: 1; }
.kr-loi { color: var(--pink) !important; }
.kr-buoc { padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); margin: 6px 0 2px; }
.kr-gio .btn-line { text-align: center; justify-content: center; }
.kr-xem-don summary { cursor: pointer; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kr-xem-don pre { white-space: pre-wrap; font: 13px/1.6 ui-monospace, Menlo, monospace; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 8px; }
/* báo nhỏ */
.kr-bao { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; background: #1b1712; color: #f0ece4; border-radius: 99px; padding: 10px 10px 10px 18px; font-size: 14px; transition: all .3s var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,.25); white-space: nowrap; }
.kr-bao.hien { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kr-bao button { border: 0; background: var(--pink-fill, #eda3c5); color: #1b1712; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
/* nút tắt Chicgroov */
.kr-lh { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; }
.kr-lh-nut { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 14px; border-radius: 99px; border: 0; background: var(--pink-fill, #eda3c5); color: #1b1712; cursor: pointer; box-shadow: 0 10px 28px rgba(27,23,18,.2); font: 14px var(--f-vietay); }
.kr-lh-nut svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
html.kr-khoa .kr-lh { display: none; }
.kr-chic { padding: 56px 24px 40px; display: grid; gap: 14px; }
.kr-chic .vname { font: 400 40px/1 var(--f-tieude); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kr-chic .vcity { font: 600 11px var(--f-giaodien); letter-spacing: .2em; text-transform: uppercase; background: var(--pink-fill, #eda3c5); color: #1b1712; border-radius: 99px; padding: 5px 12px; }
.kr-chic-y { line-height: 1.7; }
.kr-chic dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kr-chic dt { color: var(--muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding-top: 3px; }
.kr-chic-nut { display: flex; flex-wrap: wrap; gap: 10px; }
/* About: tờ thông tin */
.kr-ve { padding-top: 12vh; }
.kr-ve.dan-nhap { padding-top: calc(var(--hdr-h, 64px) + 5vh); }
.kr-to { padding: 10vh 0 4vh; }
.kr-to-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 4vh; }
@media (max-width: 900px) { .kr-to-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.kr-to-the { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 0; overflow: hidden; cursor: pointer; text-align: left; color: inherit; display: grid; transition: border-color .3s, transform .5s var(--ease); }
.kr-to-the:hover { border-color: var(--pink); transform: translateY(-4px); }
.kr-to-anh { aspect-ratio: 150/220; background: #fff; display: block; overflow: hidden; }
.kr-to-anh img { width: 100%; height: 100%; object-fit: cover; }
.kr-to-chu { padding: 12px 14px 16px; display: grid; gap: 2px; }
.kr-to-chu small { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.kr-to-chu b { font: 400 24px/1.1 var(--f-tieude); }
.kr-to-chu i { font-style: normal; font-size: 13px; color: var(--muted); }
.kr-to-xem { padding: 60px 20px 40px; max-width: 1200px; margin: 0 auto; }
.kr-to-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.kr-to-hai img { width: 100%; border-radius: 6px; box-shadow: 0 10px 30px rgba(27,23,18,.12); background: #fff; }
@media (max-width: 760px) { .kr-to-hai { grid-template-columns: 1fr; } }
.kr-to-dieu { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.kr-cv { margin-top: 4vh; }
.kr-cv video { width: 100%; max-height: 80vh; object-fit: cover; display: block; }
.kr-gio .kr-buoc li { display: list-item; grid-template-columns: none; border: 0; padding: 0; }
#krLop.kr-lop-sp > .than > .dong { display: none; }
.kr-bao { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
html.kr-khoa .kr-bao { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.kr-muc, .kr-dai { scroll-margin-top: 80px; }

/* ══ vòng 3 (19/10) ══ */
/* tờ thông tin trên nền be giả kraft nhẹ: ảnh tờ (nền trắng) nhân màu vào nền giấy */
.kr-kraft { position: relative; display: block; background: #ece2cf; isolation: isolate; overflow: hidden; }
.kr-kraft::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/nhe/brand/kraft-black.jpg') center / 460px; filter: invert(1) sepia(.35) contrast(.9); opacity: .22; mix-blend-mode: multiply; }
.kr-kraft img { position: relative; z-index: 1; mix-blend-mode: multiply; display: block; }
.kr-to-anh.kr-kraft { background-color: #ece2cf; }
.kr-to-hai .kr-kraft { border-radius: 6px; box-shadow: 0 10px 30px rgba(27,23,18,.14); }
.kr-to-hai .kr-kraft img { box-shadow: none; background: none; border-radius: 0; }

/* clip hướng dẫn DỌC 9:16 */
.kr-hd { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 12px 0 18px; }
.kr-hd .kr-clip { width: 100%; max-width: none; aspect-ratio: 9/16; object-fit: cover; margin: 0; border-radius: 14px; }
.kr-hd-chu > :first-child { margin-top: 0; }
.kr-hd-chu ul, .kr-hd-chu .kr-bang { margin-top: 0; }
@media (max-width: 760px) {
  .kr-hd { grid-template-columns: 1fr; gap: 16px; }
  .kr-hd .kr-clip { width: min(62vw, 260px); justify-self: center; }
}
/* trong tấm sản phẩm (cột hẹp): clip nhỏ bên trái, chữ bên phải */
.pm-cum-body .kr-hd { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; margin: 4px 0 6px; }
.pm-cum-body .kr-hd .kr-clip { width: 150px; justify-self: start; border-radius: 10px; }
@media (max-width: 420px) { .pm-cum-body .kr-hd { grid-template-columns: 120px minmax(0, 1fr); } .pm-cum-body .kr-hd .kr-clip { width: 120px; } }

/* máy tính: bảng chi tiết bên phải như trang Sản phẩm gốc — trang chính dồn trái, vẫn cuộn / chọn tiếp */
:root { --kr-ben: min(46vw, 660px); }
#krLop.kr-ben { position: fixed; left: auto; right: 0; bottom: 0; width: var(--kr-ben); z-index: 25; display: block; }
#krLop.kr-ben .nen { display: none; }
#krLop.kr-ben .than { width: 100%; height: 100%; border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(27,23,18,.08); }
#krLop.kr-ben.kr-giu .than { animation: none; }
#krLop.kr-ben .kr-detail .pm-cols { grid-template-columns: 1fr; }
#krLop.kr-ben .kr-detail .pm-media { position: static; }
@media (min-width: 1500px) { #krLop.kr-ben .kr-detail .pm-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #krLop.kr-ben .kr-detail .pm-media { position: sticky; top: 64px; } }
body.kr-ben-mo #noiDung, body.kr-ben-mo #contact { margin-right: var(--kr-ben); transition: margin-right .35s var(--ease-out); }
body.kr-ben-mo .kr-lh { right: calc(var(--kr-ben) + 16px); }
body.kr-ben-mo .kr-dai .sec-title { font-size: clamp(26px, 3.2vw, 44px); }
.kr-truot .pcard.sel { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }

/* khối liên hệ cuối trang */
.contact .contact-big { font-size: clamp(30px, 5vw, 64px); }
.contact .kr-dat .lk a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
.contact .kr-dat .lk small { margin-left: 6px; }
.contact .kr-dat > h3.mt { margin-top: 28px; }
.contact .kr-dat .btn-line { margin-top: 4px; }
.footer-base { padding-bottom: 24px; }
/* chính sách gộp vào chi tiết sản phẩm + chân trang (19/10) */
.kr-cs { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.6; }
.kr-cs li::marker { color: var(--pink); }
.contact .kr-cs { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.kr-moc { display: grid; gap: 6px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.kr-moc input { font: 16px ui-sans-serif, system-ui, sans-serif; letter-spacing: .3em; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); }
.pm-cum-body .kr-bang { margin: 10px 0; max-width: 100%; }

/* ══ vòng 4 (19/10) ══ */
/* tờ thông tin: nền giấy SÁNG, vân kraft rất nhẹ */
.kr-kraft, .kr-to-anh.kr-kraft { background-color: #f6f1e7; }
.kr-kraft::before { opacity: .09; filter: invert(1) sepia(.25) contrast(.8) brightness(1.05); background-size: 520px; }
.kr-to-the { background: #f6f1e7; }

/* KHO: 1/3 lưới (lọc theo nhóm) · 2/3 chi tiết — như trang Sản phẩm gốc */
#krKho { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); background: var(--bg); border-top: 1px solid var(--line); }
#krLop { z-index: 200; }
.kho-trai { overflow-y: auto; border-right: 1px solid var(--line); padding: 0 18px 40px; overscroll-behavior: contain; }
.kho-dau { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; background: var(--bg); }
.kho-loc { flex: 1; min-width: 0; }
.kho-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.kho-luoi .pcard .pname { font-size: 19px; }
.kho-luoi .pcard .pbody { padding: 9px 10px 11px; }
.kho-luoi .pcard .pfrom { font-size: 12px; }
.kho-phai { overflow-y: auto; overscroll-behavior: contain; background: #faf8f3; }
.kho-phai.kr-vao .kr-detail { animation: krMo .35s var(--ease-out); }
@keyframes krMo { from { opacity: 0; transform: translateY(14px); } }
.kho-phai .kr-detail .store-detail-body { padding-top: clamp(18px, 2.4vw, 32px); }
.kho-phai .kr-detail .pm-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.kho-phai .kr-detail .pm-media { position: sticky; top: 72px; }
.kr-sdb-cats { display: none; }
.kr-sdb .kr-sdb-x { margin-left: 4px; }
.kho-phai .kr-sdb [data-ve-ct] { display: none; }
@media (min-width: 1500px) { .kho-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* điện thoại: hiện MỘT trong hai — lưới nhóm, hoặc chi tiết + thanh ← chip nhóm (y như web gốc) */
@media (max-width: 860px) {
  #krKho { grid-template-columns: 1fr; }
  #krKho.che-ct .kho-trai { display: none; }
  #krKho.che-luoi .kho-phai { display: none; }
  .kho-trai { border-right: 0; padding: 0 14px 40px; }
  .kho-phai .kr-detail .pm-cols { grid-template-columns: 1fr; }
  .kho-phai .kr-detail .pm-media { position: static; }
  .kho-phai .kr-sdb [data-ve-ct] { display: inline-flex; }
  .kr-sdb-cats { display: flex; flex: 1; min-width: 0; }
  .kr-sdb-ten, .kr-sdb .kr-sdb-nav { display: none; }
  .kr-sdb { padding-right: 16px; }
}

/* khối liên hệ — 3 cột cân */
.kr-lh-khung { padding-bottom: 6vh; }
.kr-lh-tieu { font: 400 clamp(30px, 4vw, 52px)/1.1 var(--f-tieude); margin: 0 0 5vh; }
.kr-lh-luoi { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.kr-lh-luoi > section { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 14px; align-content: start; }
.kr-lh-luoi h3 { font-family: var(--f-giaodien); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0; }
.kr-lh-luoi .vcard { margin: 0; }
.kr-lh-luoi .lk a { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kr-lh-luoi .lk small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.kr-lh-luoi .lk a:hover { color: var(--pink); }
.kr-lh-buoc { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); }
.kr-lh-luoi .btn-line { justify-self: start; }
.contact .kr-cs { color: var(--text); font-size: 13.5px; }
@media (max-width: 960px) { .kr-lh-luoi { grid-template-columns: 1fr; gap: 28px; } }

/* ══ vòng 5 (19/10): chi tiết gọn một màn như web gốc ══ */
.kr-ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media side" "cs side"; grid-template-rows: auto 1fr; column-gap: clamp(20px, 2.6vw, 40px); row-gap: 14px; align-items: start; }
.kr-ct > .pm-media { grid-area: media; position: static !important; }
.kr-ct > .pm-side { grid-area: side; }
.kr-ct > .kr-cs-o { grid-area: cs; margin-top: 0; }
.kho-phai .kr-detail .pm-main img, .kho-phai .kr-detail .pm-video { aspect-ratio: auto; height: min(46vh, 470px); width: 100%; object-fit: cover; }
.kho-phai .kr-detail .pm-thumbs .pm-thumb { width: 58px; height: 58px; }
.kho-phai .kr-detail .pm-name { font-size: clamp(28px, 2.6vw, 40px); }
.kho-phai .kr-detail .pm-desc { font-size: 13.5px; line-height: 1.6; }
.kho-phai .kr-detail .pm-price { padding: 7px 0; }
.kr-nut-hang { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.kr-nut-hang .btn-line { justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.kr-ct-x { position: absolute; top: 14px; right: 16px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; }
.kho-phai .kr-detail { position: relative; }
.kho-phai .kr-sdb { display: none !important; }
.kho-phai .kr-detail .store-detail-body { padding-top: 22px; padding-right: 64px; }
@media (min-width: 861px) { .kho-phai .kr-chi-dt { display: none; } }
@media (max-width: 860px) {
  .kr-ct { grid-template-columns: 1fr; grid-template-areas: "media" "side" "cs"; }
  .kho-phai .kr-sdb { display: flex !important; }
  .kr-ct-x { display: none; }
  .kho-phai .kr-detail .store-detail-body { padding-right: clamp(18px, 3vw, 40px); }
  .kho-phai .kr-detail .pm-main img, .kho-phai .kr-detail .pm-video { height: auto; aspect-ratio: 1/1; }
}
.kho-phai .kr-detail { top: 0 !important; max-height: none; overflow: visible; }
html.kr-khoa .hdr.scrolled { background: #f0ece4; backdrop-filter: none; }

/* ══ vòng 6 (19/10) ══ */
/* thẻ tờ thông tin: CẢ thẻ là một tờ giấy (ảnh + tiêu đề cùng tông, cùng vân) */
.kr-to-the.kr-kraft { background: #f6f1e7; }
.kr-to-the .kr-to-anh { background: transparent; position: relative; z-index: 1; }
.kr-to-the .kr-to-anh img { mix-blend-mode: multiply; }
.kr-to-the .kr-to-chu { position: relative; z-index: 1; border-top: 1px solid rgba(27,23,18,.08); }
/* nút trong chi tiết + giỏ: hai nút một hàng, chữ không tràn */
.kr-nut-hang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kr-nut-hang .btn-line { letter-spacing: .1em; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kr-tim-them { width: 100%; justify-content: center; text-align: center; }
/* nút nhắn Chicgroov: tròn, thẳng mép lưới (.wrap) */
.kr-lh { right: max(16px, calc((100vw - min(92vw, 1360px)) / 2)); }
.kr-lh-nut { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
.kr-lh-nut span { display: none; }
body.kr-ben-mo .kr-lh { right: max(16px, calc((100vw - min(92vw, 1360px)) / 2)); }
/* chân trang gọn lại */
.contact { padding-top: 7vh; margin-top: 3vh; }
.kr-lh-khung { padding-bottom: 2vh; }
.kr-lh-tieu { margin-bottom: 3vh; }
.kr-lh-luoi { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); }
.footer-giant { margin-top: 2vh; }

/* ══ 19/10 (bản thật) ══ */
/* tờ thông tin: nền NGÀ hơi xuống tông (không trắng tinh), vân kraft nhẹ */
.kr-kraft, .kr-to-the.kr-kraft { background-color: #efe6d3; }
.kr-kraft::before { opacity: .13; }
.kr-to-the .kr-to-chu { border-top-color: rgba(27,23,18,.1); }
/* giỏ hàng gọn trong một lần lướt */
.kr-gio { padding: 22px 20px 24px; gap: 10px; }
.kr-gio h2 { font-size: 30px; }
.kr-gio ul { gap: 8px; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.kr-gio li { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 8px; }
.kr-gio-anh { width: 52px; height: 52px; }
.kr-gio li b { font-size: 18px; }
.kr-gio .sl { margin-top: 3px; }
.kr-gio .ma input { padding: 9px 12px; }
.kr-gio .hang.tong { font-size: 22px; padding-top: 8px; }
.kr-gio .btn-line { padding-top: 11px; padding-bottom: 11px; }
.kr-gio-nhac { margin: 0; font-size: 12.5px; line-height: 1.5; }
.xem-truoc { position: relative; z-index: 31; background: #1b1712; color: #f0ece4; font: 12.5px/1.4 system-ui, sans-serif; padding: 8px 16px; text-align: center; }
/* 19/10 tối — tờ thông tin: phần TỜ nền ngà (ảnh trắng nhân vào giấy ngà + vân kraft nhẹ), phần TÊN sáng hơn.
   .kr-to-anh tự là tờ giấy (có nền riêng) — nền đặt ở thẻ ngoài không «ăn» được vì .kr-to-anh tạo lớp xếp chồng riêng. */
.kr-to-the.kr-kraft { background: #f8f4ec; }
.kr-to-the.kr-kraft::before { display: none; }
.kr-to-the .kr-to-anh { background: #eee3cd; isolation: isolate; overflow: hidden; }
.kr-to-the .kr-to-anh::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/nhe/brand/kraft-black.jpg') center / 460px; filter: invert(1) sepia(.35) contrast(.85); opacity: .13; mix-blend-mode: multiply; }
.kr-to-the .kr-to-anh img { position: relative; z-index: 1; mix-blend-mode: multiply; }
.kr-to-the .kr-to-chu { background: #f8f4ec; }
.kr-to-hai .kr-kraft { background-color: #eee3cd; }
/* 19/10 khuya (SS «sáng hơn 30%») — nền tờ thông tin sáng thêm 30% (#eee3cd → #f3ebdc), vân kraft nhạt cùng tỉ lệ (.13 → .09). */
.kr-to-the .kr-to-anh, .kr-to-hai .kr-kraft, .kr-kraft { background-color: #f3ebdc; }
.kr-to-the .kr-to-anh::before, .kr-kraft::before { opacity: .09; }
/* 19/10 — form gửi đơn trong giỏ (tên · KakaoTalk · SĐT · IG · ghi chú · đồng ý PIPA) */
.kr-kh { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.kr-kh-tieu { margin: 0; font: 400 20px var(--f-tieude); }
.kr-kh label { display: grid; gap: 3px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.kr-kh input:not([type=checkbox]) { font: 15px var(--f-noidung); padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); width: 100%; }
.kr-kh-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kr-kh .kr-kh-dy { display: flex; gap: 8px; align-items: flex-start; letter-spacing: 0; font-size: 12px; line-height: 1.5; }
.kr-kh-dy input { margin-top: 2px; accent-color: var(--pink); flex: none; }
.kr-kh-gui { width: 100%; justify-content: center; }
.kr-da-gui { display: grid; gap: 10px; border: 1px solid var(--pink); border-radius: 12px; padding: 14px; }
.kr-da-gui p { margin: 0; font-size: 14px; line-height: 1.6; }
.kr-kh .kr-kh-dy input[type=checkbox] { width: 16px !important; height: 16px; min-width: 16px; padding: 0; } .kr-kh .kr-kh-dy span { flex: 1; min-width: 0; }