/* Hầm Rượu Lâm Gia (shopruou) — trang trong theo mockup shop / product / post / contact (hướng B, duyệt 10-03). Lớp riêng hrli-, dùng lại biến/màu/khối cam kết hrl- của trang chủ. */
.hrli-page { background: var(--hrl-bg); word-break: normal !important; }
.woocommerce-page .shop-page-title, .woocommerce-page .product-page-title, .single-product .page-title, .tax-product_cat .page-title, .post-type-archive-product .page-title { display: none !important; }
.hrli-page p { margin: 0; } .hrli-page ul { margin: 0; padding: 0; list-style: none; } .hrli-page li { margin: 0 !important; }
.hrli-page img[src=""] { visibility: hidden; }
.hrli-w { max-width: 1350px; margin: 0 auto; padding: 0 15px; position: relative; }
.hrli-sec { padding: 40px 0; }
.hrli-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: #8a8380; font-size: 15.5px; line-height: 22px; margin: 0 0 12px; }
.hrli-crumb a { color: inherit !important; } .hrli-crumb a:hover { color: var(--hrl-w) !important; } .hrli-crumb i { font-style: normal; opacity: .7; } .hrli-crumb span { color: #4a4444; }
.hrli-crumb-d span { color: var(--hrl-ink); }
.hrli-phero { background: #f4efe9; padding: 26px 0 26px; border-bottom: 1px solid #ebe3d9; }
.hrli-h1 { color: var(--hrl-w) !important; font-size: 56px !important; font-weight: 600 !important; line-height: 66px !important; letter-spacing: -.01em; margin: 0 0 4px !important; }
.hrli-lead { color: var(--hrl-ink); font-size: 26px; line-height: 36px; font-family: var(--hrl-s) !important; }
.hrli-lead-s { font-size: 20px; line-height: 30px; }
.hrli-h2 { color: var(--hrl-w) !important; font-size: 38px !important; font-weight: 600 !important; line-height: 48px !important; margin: 0 !important; }
.hrli-h2u { padding-bottom: 14px; position: relative; } .hrli-h2u::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--hrl-g); }
.hrli-sub { color: var(--hrl-mut); font-size: 18px; line-height: 26px; margin-top: 6px; }
.hrli-eye { color: var(--hrl-g); font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 22px; }
.hrli-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 4px; background: var(--hrl-w); color: #fff !important; font-size: 18px; font-weight: 500; text-transform: none; letter-spacing: 0; border: 1.5px solid var(--hrl-w); cursor: pointer; margin: 0; text-decoration: none !important; transition: background .2s; }
.hrli-btn:hover { background: var(--hrl-w2); } .hrli-btn .hrl-ic { font-size: 20px; }
.hrli-btn-o { background: #fff; color: var(--hrl-w) !important; } .hrli-btn-o:hover { background: #fbf3f6; }
.hrli-btn-g { background: linear-gradient(180deg, #e2c47a, #c9a65a); border-color: #c9a65a; color: #2a0412 !important; font-weight: 700; } .hrli-btn-g:hover { background: #d5b260; }
.hrli-more { color: var(--hrl-w) !important; font-size: 16.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.hrli-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .hrli-head .hrli-h2 { flex: 0 1 auto; width: fit-content; min-width: 0; }
/* ---------- thẻ SP ---------- */
.hrli-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hrli-pc { background: #fff; border: 1px solid #efe9e2; border-radius: 6px; padding: 10px 12px 12px; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 3px rgba(62,3,27,.03); }
.hrli-pc[hidden] { display: none; }
.hrli-pc-img { display: block; aspect-ratio: 1 / 1.08; overflow: hidden; } .hrli-pc-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s; } .hrli-pc:hover .hrli-pc-img img { transform: scale(1.03); }
.hrli-pc-b { text-align: center; display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 10px; }
.hrli-pc-c { color: var(--hrl-mut); font-size: 17px; line-height: 22px; }
.hrli-pc-n { font-family: var(--hrl-f) !important; color: var(--hrl-ink) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 24px !important; margin: 4px 0 12px !important; min-height: 48px; } .hrli-pc-n a { color: inherit !important; }
.hrli-pc-pr { color: var(--hrl-pr); font-size: 21px; font-weight: 700; margin: auto 0 10px; }
.hrli-pc-btn { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 3px; background: var(--hrl-w); color: #fff !important; font-size: 16.5px; font-weight: 500; } .hrli-pc-btn:hover { background: var(--hrl-w2); }
/* ---------- cửa hàng ---------- */
.hrli-shopsec { padding: 24px 0 40px; }
.hrli-shop-g { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 20px; align-items: start; }
.hrli-filter { background: #fff; border: 1px solid #efe9e2; border-radius: 6px; padding: 0 16px 22px; }
.hrli-ftog { display: flex; align-items: center; gap: 22px; width: 100%; background: none; border: 0; border-bottom: 1px solid #efe9e2; margin: 0 0 6px; padding: 16px 4px; cursor: default; color: var(--hrl-ink); text-transform: none; letter-spacing: 0; min-height: 0; }
.hrli-ftog svg { width: 36px; height: 36px; color: var(--hrl-w); } .hrli-ftog b { font-family: var(--hrl-s) !important; font-size: 27px; font-weight: 600; color: var(--hrl-ink); }
.hrli-fb { border-bottom: 1px solid #efe9e2; padding: 14px 0 14px; }
.hrli-fh { position: relative; cursor: pointer; color: var(--hrl-w); font-family: var(--hrl-s) !important; font-size: 19px; font-weight: 600; line-height: 26px; padding-right: 26px; margin-bottom: 10px; }
.hrli-fh::after { content: ""; position: absolute; right: 2px; top: 8px; width: 9px; height: 9px; border-left: 2px solid var(--hrl-ink); border-top: 2px solid var(--hrl-ink); transform: rotate(45deg); transition: transform .2s; }
.hrli-fb.is-closed .hrli-fc { display: none; } .hrli-fb.is-closed .hrli-fh::after { transform: rotate(-135deg); top: 4px; } .hrli-fb.is-closed .hrli-fh { margin-bottom: 0; }
.hrli-fc label, .hrli-flinks a { display: flex; align-items: center; gap: 14px; color: var(--hrl-ink) !important; font-size: 17px; font-weight: 400; line-height: 30px; margin: 0; cursor: pointer; }
.hrli-fc input[type=checkbox] { width: 19px; height: 19px; margin: 0; accent-color: var(--hrl-w); }
.hrli-flinks a i { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #b9b2ad; flex: 0 0 auto; } .hrli-flinks a.is-on { color: var(--hrl-w) !important; font-weight: 600; } .hrli-flinks a.is-on i { border: 6px solid var(--hrl-w); }
.hrli-range { position: relative; height: 26px; margin: 4px 0 10px; } .hrli-range::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 3px; background: var(--hrl-w); border-radius: 2px; }
.hrli-range input { position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; border: 0; box-shadow: none; padding: 0; }
.hrli-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--hrl-w); cursor: pointer; border: 0; }
.hrli-range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--hrl-w); border: 0; }
.hrli-pv { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; text-align: center; } .hrli-pv span { border: 1px solid #ddd5cd; border-radius: 4px; padding: 8px 4px; font-size: 14.5px; color: var(--hrl-ink); white-space: nowrap; } .hrli-pv i { font-style: normal; }
.hrli-taste { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ddd5cd; border-radius: 4px; overflow: hidden; }
.hrli-taste button { margin: 0; min-height: 44px; border: 0; border-left: 1px solid #ddd5cd; background: #fff; color: var(--hrl-ink); font-size: 16.5px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 0; } .hrli-taste button:first-child { border-left: 0; } .hrli-taste button.is-on { background: var(--hrl-w); color: #fff; }
.hrli-apply { display: block; width: 100%; margin: 18px 0 10px; min-height: 52px; border-radius: 4px; border: 0; background: var(--hrl-w); color: #fff; font-size: 18px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.hrli-reset { display: block; text-align: center; color: var(--hrl-mut) !important; font-size: 15.5px; text-decoration: underline !important; }
.hrli-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border: 1px solid #efe9e2; border-radius: 6px; padding: 8px 8px 8px 16px; margin-bottom: 14px; color: var(--hrl-ink); font-size: 17px; }
.hrli-bar b { font-weight: 400; } .hrli-sortw { display: flex; align-items: center; gap: 0; margin: 0; font-size: 16px; font-weight: 400; color: var(--hrl-ink); border: 1px solid #ddd5cd; border-radius: 4px; padding-left: 14px; }
.hrli-sort { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 42px; font-size: 16px; padding: 0 30px 0 6px; background-color: transparent; width: auto; }
.hrli-pag { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; } .hrli-pag span { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--hrl-w); color: #fff; border-radius: 4px; font-weight: 700; } .hrli-pag em { font-style: normal; color: var(--hrl-mut); font-size: 16.5px; } .hrli-pag b { font-weight: 400; }
.hrli-empty { background: #fff; border: 1px dashed #d8c7b4; border-radius: 6px; padding: 30px; text-align: center; color: var(--hrl-ink); font-size: 17px; line-height: 27px; margin-bottom: 26px; }
.hrli-empty h2 { color: var(--hrl-w) !important; font-size: 26px !important; margin: 0 0 8px !important; } .hrli-empty a { color: var(--hrl-w) !important; font-weight: 700; }
.hrli-empty[hidden] { display: none; } .hrli-h2s { color: var(--hrl-w) !important; font-size: 28px !important; margin: 0 0 16px !important; }
/* ---------- dải mua theo thùng (rộng theo cột sản phẩm như mockup) ---------- */
.hrli-case { background: var(--hrl-bg); }
.hrli-case-in { display: grid; grid-template-columns: 400px minmax(0, 1fr); margin-left: calc(50% - 720px + 345px); background: var(--hrl-w); min-height: 174px; }
.hrli-case-img { overflow: hidden; } .hrli-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrli-case-tx { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px calc(50vw - 720px + 62px) 18px 14px; }
.hrli-case-tx h2 { color: #f3e5c4 !important; font-size: 34px !important; white-space: nowrap; font-weight: 600 !important; line-height: 46px !important; margin: 0 0 6px !important; } .hrli-case-tx p { color: #f1e7e2; font-size: 21px; line-height: 32px; }
.hrli-case-tx .hrli-btn { min-width: 168px; flex: 0 0 auto; }
.hrli-trustband { background: #fff; padding: 22px 0; }
/* ---------- chi tiết SP ---------- */
.hrli-pdtop { padding: 16px 0 26px; }
.hrli-pd-g { display: grid; grid-template-columns: 636px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 8px; }
.hrli-main { background: #fff; border: 1px solid #efe9e2; border-radius: 6px; overflow: hidden; aspect-ratio: 636 / 520; } .hrli-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hrli-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.hrli-thumbs button { margin: 0; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; aspect-ratio: 1 / 1; background: #f2eeea; min-height: 0; } .hrli-thumbs button.is-on { border-color: var(--hrl-g); } .hrli-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrli-info .hrli-eye { margin-top: 2px; }
.hrli-pdh1 { color: var(--hrl-w) !important; font-size: 50px !important; font-weight: 600 !important; line-height: 58px !important; margin: 6px 0 2px !important; }
.hrli-price { color: var(--hrl-pr); font-size: 40px; font-weight: 700; line-height: 50px; font-family: var(--hrl-s) !important; }
.hrli-plead { color: var(--hrl-ink); font-size: 18.5px !important; line-height: 28px; margin: 12px 0 14px !important; }
.hrli-spec { width: 100%; border-collapse: collapse; margin: 0 0 18px; border-top: 1px solid #e8e1d9; border-bottom: 1px solid #e8e1d9; }
.hrli-spec th, .hrli-spec td { border: 0 !important; padding: 7px 6px !important; font-size: 16.5px; color: var(--hrl-ink); text-transform: none; letter-spacing: 0; font-weight: 400; text-align: left; } .hrli-spec th { width: 224px; }
.hrli-row { display: flex; align-items: center; gap: 0; margin-bottom: 14px; } .hrli-row > span { width: 122px; flex: 0 0 auto; color: var(--hrl-ink); font-size: 16.5px; }
.hrli-opts { display: grid; grid-template-columns: repeat(2, 190px); gap: 14px; } .hrli-opts button { margin: 0; min-height: 44px; border: 1.5px solid #cfc6bd; border-radius: 3px; background: #fff; color: var(--hrl-ink); font-size: 15.5px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 0 10px; } .hrli-opts button.is-on { background: var(--hrl-w); color: #fff; border-color: var(--hrl-g); }
.hrli-optnote { color: var(--hrl-pr); font-size: 15px; margin: -6px 0 12px 122px; } .hrli-optnote[hidden] { display: none; }
.hrli-qty { display: grid; grid-template-columns: 52px 54px 52px; gap: 14px; } .hrli-qty button, .hrli-qty input { margin: 0 !important; height: 44px; min-height: 44px; border: 1.5px solid #cfc6bd !important; border-radius: 3px !important; background: #fff; color: var(--hrl-ink); font-size: 22px; padding: 0; box-shadow: none !important; text-align: center; } .hrli-qty input { font-size: 17px; -moz-appearance: textfield; } .hrli-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hrli-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; } .hrli-acts .hrli-btn { min-height: 58px; font-size: 20px; }
.hrli-call { display: inline-flex; align-items: center; gap: 12px; color: var(--hrl-w) !important; font-size: 18px; margin: 14px 0 0; } .hrli-call .hrl-ic { font-size: 22px; } .hrli-call b { font-weight: 700; }
.hrli-tr4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; border-top: 1px solid #e8e1d9; border-bottom: 1px solid #e8e1d9; padding: 16px 0; margin-top: 14px; }
.hrli-tr4 > div { display: flex; align-items: center; gap: 22px; } .hrli-tr4 img { width: 54px; height: 54px; object-fit: contain; } .hrli-tr4 b { color: var(--hrl-w); font-size: 16.5px; line-height: 23px; font-weight: 700; }
.hrli-18 { text-align: center; color: var(--hrl-ink); font-size: 14.5px; margin-top: 12px; }
.hrli-tabs { background: #f1ece6; } .hrli-tabs .hrli-w { display: flex; justify-content: center; gap: 70px; }
.hrli-tabs button { margin: 0; background: none; border: 0; border-bottom: 3px solid transparent; min-height: 56px; padding: 0 30px; color: #7c7470; font-family: var(--hrl-s) !important; font-size: 21px; font-weight: 500; text-transform: none; letter-spacing: 0; } .hrli-tabs button.is-on { color: var(--hrl-w); border-color: var(--hrl-g); }
.hrli-desc { padding: 22px 0 32px; } .hrli-tp[hidden] { display: none; }
.hrli-desc-g { display: grid; grid-template-columns: minmax(0, 1fr) 588px; gap: 36px; align-items: start; }
.hrli-desc .hrli-h2 { font-size: 40px !important; margin-bottom: 14px !important; }
.hrli-dtx, .hrli-dtx p { color: var(--hrl-ink); font-size: 17px; line-height: 27px; } .hrli-dtx p { margin: 0 0 12px !important; }
.hrli-desc h3 { color: var(--hrl-w) !important; font-size: 23px !important; font-weight: 600 !important; margin: 16px 0 8px !important; }
.hrli-notes { width: 100%; border-collapse: collapse; margin: 0; } .hrli-notes th, .hrli-notes td { border: 0 !important; border-top: 1px solid #e8e1d9 !important; padding: 10px 10px !important; font-size: 16px; color: var(--hrl-ink); text-transform: none; letter-spacing: 0; font-weight: 400; text-align: left; } .hrli-notes th { width: 174px; } .hrli-notes tr:last-child > * { border-bottom: 1px solid #e8e1d9 !important; }
.hrli-specall { max-width: 760px; }
.hrli-desc-img { border-radius: 6px; overflow: hidden; aspect-ratio: 588 / 385; } .hrli-desc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrli-norev { background: #fff; border: 1px solid #efe9e2; border-radius: 6px; padding: 24px; max-width: 760px; } .hrli-norev a { color: var(--hrl-w) !important; font-weight: 600; }
.hrli-rel { background: #f4efe9; padding: 26px 0 22px; } .hrli-rel .hrli-h2 { font-size: 38px !important; padding-bottom: 12px; position: relative; } .hrli-rel .hrli-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--hrl-g); }
.hrli-grid4 { margin-top: 16px; gap: 16px; } .hrli-pc-r .hrli-pc-c { display: none; } .hrli-pc-r .hrli-pc-n { min-height: 0; margin-bottom: 4px !important; }
/* ---------- bài viết ---------- */
.hrli-post { background: #fff; } .hrli-posttop { padding: 16px 0 26px; }
.hrli-post-g { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 42px; align-items: start; }
.hrli-posth1 { color: var(--hrl-w) !important; font-size: 50px !important; font-weight: 600 !important; line-height: 58px !important; margin: 4px 0 8px !important; }
.hrli-pmeta { color: #6f6866; font-size: 14.5px; padding-bottom: 14px; border-bottom: 1px solid #e8e1d9; margin-bottom: 18px; } .hrli-pmeta i { font-style: normal; margin: 0 8px; }
.hrli-art-img { border-radius: 6px; overflow: hidden; margin-bottom: 18px; aspect-ratio: 864 / 374; } .hrli-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrli-artc > p:first-child { font-size: 19px; line-height: 31px; margin-bottom: 18px !important; }
.hrli-artc h2 { color: var(--hrl-w) !important; font-size: 30px !important; font-weight: 600 !important; line-height: 38px !important; margin: 18px 0 4px !important; }
.hrli-artc ul { margin: 6px 0 12px !important; } .hrli-artc li { position: relative; padding-left: 28px; } .hrli-artc li::before { content: ""; position: absolute; left: 10px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--hrl-g); }
.hrli-artc blockquote { background: #f6f2ed; border-left: 4px solid var(--hrl-g); border-radius: 4px; margin: 14px 0; padding: 16px 26px; font-size: 17px; color: var(--hrl-ink); font-style: normal; } .hrli-artc blockquote b { display: block; color: var(--hrl-pr); font-family: var(--hrl-s) !important; font-size: 20px; font-weight: 500; margin-bottom: 6px; }
.hrli-fig { margin: 4px 0 14px; } .hrli-fig img { width: 100%; border-radius: 6px; display: block; aspect-ratio: 864 / 290; object-fit: cover; } .hrli-fig figcaption { color: #7c7470; font-size: 14.5px; margin-top: 6px; }
.hrli-toc { background: #f6f2ed; border-radius: 6px; padding: 18px 26px 18px; margin: 4px 0 20px; } .hrli-toc h3 { color: var(--hrl-w) !important; font-size: 23px !important; margin: 0 0 10px !important; }
.hrli-toc ol { list-style: none; margin: 0 !important; padding: 0; columns: 2; column-gap: 40px; } .hrli-toc li { padding: 0 !important; margin: 0 0 6px !important; break-inside: avoid; } .hrli-toc li::before { display: none; }
.hrli-toc a { color: var(--hrl-w) !important; font-size: 17px; text-decoration: underline; text-decoration-color: rgba(62,3,27,.3); text-underline-offset: 4px; } .hrli-toc a b { color: var(--hrl-ink); font-weight: 400; margin-right: 12px; }
.hrli-share { display: flex; align-items: center; gap: 12px; margin: 20px 0 22px; color: var(--hrl-ink); font-size: 16px; } .hrli-share span { margin-right: 10px; }
.hrli-share a { width: 36px; height: 36px; border: 1.5px solid #b9b2ad; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #5d5757 !important; font-size: 15px; font-weight: 700; } .hrli-share a .hrl-ic { font-size: 17px; } .hrli-share a.ok { border-color: var(--hrl-g); }
.hrli-share i { flex: 1 1 auto; height: 1px; background: #e8e1d9; margin-left: 14px; }
.hrli-post .hrli-h2u { font-size: 32px !important; margin-bottom: 16px !important; } .hrli-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hrli-pc-s .hrli-pc-img { aspect-ratio: 1 / .62; }
.hrli-side { position: sticky; top: 150px; }
.hrli-sbox { background: #f8f5f1; border-radius: 6px; padding: 22px 22px; margin-bottom: 20px; }
.hrli-sbox h3 { color: var(--hrl-w) !important; font-size: 23px !important; font-weight: 600 !important; line-height: 32px !important; margin: 0 0 12px !important; }
.hrli-su { padding-bottom: 12px; position: relative; } .hrli-su::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--hrl-g); }
.hrli-scta p { color: #4a4444; font-size: 17px; line-height: 28px; margin-bottom: 16px !important; } .hrli-scta .hrli-btn { width: 100%; } .hrli-sph { display: flex; align-items: center; gap: 16px; margin: 14px 0 0 22px; color: var(--hrl-ink) !important; font-size: 18px; } .hrli-sph .hrl-ic { color: var(--hrl-w); font-size: 22px; }
.hrli-mini { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e8e1d9; color: #4a4444 !important; font-size: 16px; line-height: 25px; } .hrli-mini:last-child { border-bottom: 0; } .hrli-mini img { width: 90px; height: 84px; object-fit: cover; border-radius: 4px; display: block; }
.hrli-catl { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e8e1d9; color: #4a4444 !important; font-size: 17px; } .hrli-catl i { font-style: normal; color: #8a8380; font-size: 20px; }
.hrli-gift { padding: 0; overflow: hidden; } .hrli-gift img { width: 100%; aspect-ratio: 328 / 300; object-fit: cover; display: block; } .hrli-gift > div { padding: 18px 22px 22px; } .hrli-gift a { color: var(--hrl-w) !important; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.hrli-relp { background: #f4efe9; padding: 26px 0 30px; } .hrli-posts { margin-top: 18px; }
/* ---------- liên hệ ---------- */
.hrli-ctmain { padding: 24px 0 26px; }
.hrli-ct-g { display: grid; grid-template-columns: minmax(0, 830px) minmax(0, 1fr); gap: 26px; align-items: start; }
.hrli-ctform { background: #fff; border: 1px solid #ebe3d9; border-radius: 6px; padding: 22px 26px 26px; } .hrli-ctform .hrli-h2 { font-size: 40px !important; } .hrli-ctform .hrli-sub { font-size: 19px; margin-bottom: 16px; }
.hrli-form label { display: block; color: var(--hrl-ink); font-size: 17px; font-weight: 400; margin: 0 0 14px; } .hrli-form label em { color: #c0272d; font-style: normal; }
.hrli-form input[type=text], .hrli-form input[type=tel], .hrli-form input[type=email], .hrli-form select, .hrli-form textarea { display: block; width: 100%; height: 48px; margin: 6px 0 0; border: 1px solid #d8d0c8 !important; border-radius: 4px !important; box-shadow: none !important; padding: 0 18px !important; font-size: 16px; color: var(--hrl-ink); background-color: #fff; }
.hrli-form textarea { height: 86px; min-height: 86px; padding: 12px 18px !important; } .hrli-form .hrli-err { border-color: #c0272d !important; }
.hrli-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.hrli-send { display: flex; align-items: center; gap: 36px; margin-top: 6px; } .hrli-send .hrli-btn { min-width: 300px; min-height: 54px; } .hrli-safe { display: inline-flex; align-items: center; gap: 12px; color: #4a4444; font-size: 16px; } .hrli-safe svg { width: 22px; height: 22px; }
.hrli-done { margin-top: 12px; color: var(--hrl-w); font-size: 15.5px; } .hrli-done a { color: inherit !important; font-weight: 700; }
.hrli-ctinfo { padding-top: 2px; } .hrli-ctinfo .hrli-h2 { font-size: 36px !important; margin-bottom: 20px !important; }
.hrli-ic { display: flex; align-items: flex-start; gap: 24px; background: #f4efe9; border-radius: 6px; padding: 20px 22px; margin-bottom: 14px; color: inherit !important; } .hrli-ic img { width: 56px; height: 56px; flex: 0 0 auto; margin-top: 2px; }
.hrli-ic small { display: block; color: var(--hrl-ink); font-size: 17px; line-height: 24px; } .hrli-ic b { display: block; color: var(--hrl-w); font-weight: 600; margin-top: 4px; } .hrli-ic em { display: block; color: #4a4444; font-style: normal; font-size: 16.5px; margin-top: 2px; }
.hrli-ic-ph { font-family: var(--hrl-s) !important; font-size: 36px; line-height: 42px; } .hrli-ic-m { font-size: 19px; line-height: 28px; overflow-wrap: anywhere; } .hrli-ic-a { font-size: 19px; line-height: 28px; color: var(--hrl-ink) !important; font-weight: 500 !important; }
.hrli-hours { display: flex; align-items: center; gap: 22px; color: var(--hrl-ink); font-size: 19px; padding: 6px 4px; } .hrli-hours img { width: 40px; height: 40px; }
.hrli-store { display: grid; grid-template-columns: 58% minmax(0, 1fr); background: #f4efe9; min-height: 460px; }
.hrli-store-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hrli-store-tx { padding: 40px calc(50vw - 720px + 60px) 40px 48px; display: flex; flex-direction: column; justify-content: center; } .hrli-h2l { font-size: 50px !important; line-height: 60px !important; margin: 6px 0 12px !important; }
.hrli-store-tx p { color: #4a4444; font-size: 19px; line-height: 30px; font-family: var(--hrl-s) !important; margin-bottom: 18px !important; }
.hrli-sl { display: flex; align-items: flex-start; gap: 18px; color: var(--hrl-ink); font-size: 19px; line-height: 27px; margin-bottom: 14px; } .hrli-sl img { width: 34px; height: 34px; flex: 0 0 auto; }
.hrli-store-tx .hrli-btn-o { align-self: flex-start; min-width: 326px; min-height: 56px; margin-top: 10px; }
.hrli-mapsec { padding: 24px 0 10px; background: #fff; } .hrli-mapsec .hrli-h2 { font-size: 34px !important; }
.hrli-map { position: relative; margin-top: 16px; border-radius: 6px; overflow: hidden; height: 256px; background: #eee; border: 1px solid #e8e1d9; } .hrli-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.hrli-mapcard { position: absolute; left: calc(50% + 24px); top: 34px; background: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(62,3,27,.18); padding: 12px 18px; pointer-events: none; } .hrli-mapcard b { display: block; color: var(--hrl-ink); font-size: 17px; } .hrli-mapcard span { color: var(--hrl-mut); font-size: 15px; }
.hrli-faqsec { background: #fff; padding: 22px 0 34px; } .hrli-faqsec .hrli-h2 { font-size: 36px !important; }
.hrli-faq { margin-top: 16px; display: grid; gap: 10px; }
.hrli-faq details { border: 1px solid #e8e1d9; border-radius: 4px; background: #fff; } .hrli-faq details[open] { background: #faf8f6; }
.hrli-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 30px; padding: 14px 24px; color: var(--hrl-ink); font-size: 18.5px; line-height: 26px; } .hrli-faq summary::-webkit-details-marker { display: none; }
.hrli-faq summary::before { content: "+"; width: 22px; flex: 0 0 auto; color: var(--hrl-ink); font-size: 28px; font-weight: 300; text-align: center; } .hrli-faq details[open] summary::before { content: "–"; } .hrli-faq details[open] summary { color: var(--hrl-w); padding-bottom: 6px; }
.hrli-faq details > div { padding: 0 24px 16px 76px; color: #4a4444; font-size: 16.5px; line-height: 26px; }
/* ---------- trang tĩnh ---------- */
.hrli-simple .hrli-art { max-width: 900px; color: var(--hrl-ink); font-size: 18px; line-height: 30px; } .hrli-simple .hrli-art h2 { color: var(--hrl-w) !important; font-size: 28px !important; margin: 18px 0 8px !important; } .hrli-simple .hrli-art p { margin: 0 0 12px; }
.hrli-simple .hrli-art ul { margin: 0 0 14px; } .hrli-simple .hrli-art li { position: relative; padding-left: 26px; } .hrli-simple .hrli-art li::before { content: ""; position: absolute; left: 8px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--hrl-g); }
.page-template-page-blank .hrli-simple { margin: 0; }
.hrli-pagel ul { display: flex; justify-content: center; gap: 8px; margin-top: 26px !important; } .hrli-pagel a, .hrli-pagel span { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border: 1px solid #ddd5cd; border-radius: 4px; color: var(--hrl-ink) !important; } .hrli-pagel .current { background: var(--hrl-w); color: #fff !important; }
/* ---------- khoảng giữa ---------- */
@media (min-width: 850px) and (max-width: 1439px) {
	.hrli-case-in { margin-left: 0; grid-template-columns: 38% minmax(0, 1fr); } .hrli-case-tx { padding-right: 30px; }
	.hrli-store-tx { padding-right: 30px; }
}
@media (min-width: 850px) and (max-width: 1299px) {
	.hrli-pd-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; } .hrli-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hrli-spec th { width: 140px; }
	.hrli-desc-g { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .hrli-post-g { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
	.hrli-ct-g { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } .hrli-send { flex-wrap: wrap; gap: 14px; } .hrli-send .hrli-btn { min-width: 0; }
	.hrli-posth1, .hrli-pdh1 { font-size: 40px !important; line-height: 48px !important; }
}
@media (min-width: 850px) and (max-width: 1099px) {
	.hrli-case-tx h2 { white-space: normal; }
	.hrli-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hrli-shop-g { grid-template-columns: 240px minmax(0, 1fr); }
	.hrli-case-tx { flex-direction: column; align-items: flex-start; } .hrli-case-tx h2 { font-size: 28px !important; line-height: 36px !important; } .hrli-case-tx p { font-size: 17px; line-height: 26px; }
	.hrli-store { grid-template-columns: 50% minmax(0, 1fr); } .hrli-h2l { font-size: 40px !important; } .hrli-store-tx .hrli-btn-o { min-width: 0; }
	.hrli-acts .hrli-btn { font-size: 17px; } .hrli-row { flex-wrap: wrap; gap: 6px; } .hrli-optnote { margin-left: 0; }
}
/* ---------- mobile ---------- */
@media (max-width: 849px) {
	.hrli-sec { padding: 26px 0; }
	.hrli-h1 { font-size: 34px !important; line-height: 42px !important; } .hrli-lead { font-size: 19px; line-height: 28px; } .hrli-lead-s { font-size: 16.5px; line-height: 25px; }
	.hrli-h2, .hrli-desc .hrli-h2, .hrli-rel .hrli-h2, .hrli-ctform .hrli-h2, .hrli-ctinfo .hrli-h2, .hrli-mapsec .hrli-h2, .hrli-faqsec .hrli-h2, .hrli-post .hrli-h2u { font-size: 27px !important; line-height: 35px !important; }
	.hrli-shop-g, .hrli-pd-g, .hrli-desc-g, .hrli-post-g, .hrli-ct-g { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.hrli-grid, .hrli-grid4, .hrli-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hrli-pc-n { font-size: 15.5px !important; line-height: 21px !important; min-height: 42px; } .hrli-pc-c { font-size: 14px; } .hrli-pc-pr { font-size: 17px; } .hrli-pc-btn { font-size: 14.5px; min-height: 38px; }
	.hrli-filter { padding: 0 14px 4px; } .hrli-ftog { cursor: pointer; padding: 12px 2px; margin: 0; border: 0; } .hrli-ftog b { font-size: 21px; } .hrli-ftog svg { width: 28px; height: 28px; }
	.hrli-filter:not(.is-open) .hrli-fb, .hrli-filter:not(.is-open) .hrli-apply, .hrli-filter:not(.is-open) .hrli-reset { display: none; } .hrli-filter.is-open { padding-bottom: 18px; } .hrli-filter.is-open .hrli-ftog { border-bottom: 1px solid #efe9e2; }
	.hrli-bar { font-size: 15px; flex-wrap: wrap; gap: 8px; } .hrli-sortw { font-size: 14.5px; }
	.hrli-case-in { margin-left: 0; grid-template-columns: minmax(0, 1fr); } .hrli-case-img { height: 180px; } .hrli-case-tx { flex-direction: column; align-items: flex-start; padding: 22px 16px; } .hrli-case-tx h2 { font-size: 26px !important; line-height: 34px !important; } .hrli-case-tx p { font-size: 16.5px; line-height: 25px; } .hrli-case-tx p br { display: none; }
	.hrli-thumbs { gap: 8px; } .hrli-pdh1, .hrli-posth1 { font-size: 32px !important; line-height: 40px !important; } .hrli-price { font-size: 30px; line-height: 38px; } .hrli-plead { font-size: 16.5px !important; line-height: 25px; }
	.hrli-spec th { width: 110px; } .hrli-row > span { width: 88px; font-size: 15.5px; } .hrli-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; } .hrli-optnote { margin-left: 88px; }
	.hrli-acts .hrli-btn { font-size: 17px; min-height: 52px; } .hrli-tr4 { gap: 12px; } .hrli-tr4 > div { gap: 10px; } .hrli-tr4 img { width: 40px; height: 40px; } .hrli-tr4 b { font-size: 14px; line-height: 19px; }
	.hrli-tabs .hrli-w { gap: 0; justify-content: space-between; } .hrli-tabs button { padding: 0 10px; font-size: 17px; }
	.hrli-notes th { width: 96px; } .hrli-toc ol { columns: 1; } .hrli-toc a { font-size: 15.5px; } .hrli-artc h2 { font-size: 23px !important; line-height: 30px !important; } .hrli-artc > p:first-child { font-size: 17px; line-height: 27px; }
	.hrli-side { position: static; } .hrli-share { flex-wrap: wrap; } .hrli-share i { display: none; }
	.hrli-g2 { grid-template-columns: minmax(0, 1fr); } .hrli-send { flex-direction: column; align-items: stretch; gap: 12px; } .hrli-send .hrli-btn { min-width: 0; }
	.hrli-ctform { padding: 18px 16px 20px; } .hrli-ic { gap: 14px; padding: 16px; } .hrli-ic img { width: 40px; height: 40px; } .hrli-ic-ph { font-size: 28px; line-height: 34px; } .hrli-ic-m { font-size: 16.5px; } .hrli-ic-a { font-size: 16.5px; } .hrli-hours { font-size: 16.5px; }
	.hrli-store { grid-template-columns: minmax(0, 1fr); min-height: 0; } .hrli-store-img { height: 240px; } .hrli-store-tx { padding: 24px 16px 30px; } .hrli-h2l { font-size: 32px !important; line-height: 40px !important; } .hrli-store-tx p { font-size: 16.5px; line-height: 26px; } .hrli-sl { font-size: 16.5px; } .hrli-store-tx .hrli-btn-o { min-width: 0; align-self: stretch; }
	.hrli-mapcard { left: 12px; top: 12px; } .hrli-faq summary { font-size: 16px; gap: 14px; padding: 12px 14px; } .hrli-faq details > div { padding: 0 14px 14px 50px; font-size: 15px; }
	.hrli-trustband { padding: 18px 0; }
}
/* ruler:manual (10-03: tiêu đề bề rộng khớp mockup đo tay (cmpw OCR khớp nhầm dòng) -> giữ; icon giờ/địa chỉ cửa hàng NHO x1.25) */
@media (min-width: 850px) { .hrli-sl img { width: 40px; height: 40px; } .hrli-hours img { width: 46px; height: 46px; } }