/* Pet Vui (thucung3) — trang trong theo mockup 10-01: cửa hàng, chi tiết SP, về chúng tôi, liên hệ. Dùng lại lớp trang chủ (pv-h2, pv-btn, pv-pc, pv-mi, pv-off, pv-cart-ic, pv-hero*). */
.pvi-page, .pvi-page p, .pvi-page li, .pvi-page td, .pvi-page th { font-family: "Nunito Sans", sans-serif; }
.pvi-h1, .pvi-ptitle, .pvi-pprice, .pvi-page h3, .pvi-ftitle, .pvi-ic strong, .pvi-ic-big, .pvi-acc summary, .pvi-cta h2, .pvi-ah1 { font-family: "Lexend", sans-serif !important; }
#content.pvi-page { padding: 0 !important; background: #fff; }
body:has(.pvi-crumb) .portfolio-breadcrumb-title, body:has(.pvi-crumb) .page-title { display: none !important; }
.pvi-wrap { max-width: 1312px; margin: 0 auto; padding: 0 15px; box-sizing: content-box; }
.pvi-page img[src=""], .pv-sec img[src=""] { opacity: 0; }
.pvi-crumb { font-size: 16px; color: #4C5759; margin: 0 0 18px; } .pvi-crumb a { color: #4C5759 !important; } .pvi-crumb i { font-style: normal; margin: 0 10px; color: #8A9396; } .pvi-crumb span { color: var(--pv-teal); }
.pvi-h1 { color: var(--pv-teal) !important; font-size: 56px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 0 0 12px !important; }
.pvi-lead { color: #3F4A4C; font-size: 22px; line-height: 1.5; }
.pvi-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 2px solid var(--pv-teal); border-radius: 26px; color: var(--pv-teal) !important; font-size: 18px; font-weight: 800; background: #fff; }
.pvi-btn-line:hover { background: var(--pv-mint); } .pvi-btn-line .pv-mi { width: 22px; height: 22px; }
.pvi-svg { display: inline-block; flex: 0 0 auto; width: 26px; height: 26px; background: var(--pv-teal); -webkit-mask: var(--s) center/contain no-repeat; mask: var(--s) center/contain no-repeat; }
.pvi-svg-phone { --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.pvi-svg-mail { --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E"); }
.pvi-svg-pin { --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.pvi-svg-clock { --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.pvi-ptxt { font-size: 20px; line-height: 1.65; color: #3F4A4C; margin: 0 0 16px; }
.pvi-sub { margin: -12px 0 24px !important; font-size: 22px !important; }
/* ---------- cửa hàng ---------- */
.pvi-band { position: relative; background: var(--pv-mint); overflow: hidden; }
.pvi-band-pic { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: #DCEFEA; } .pvi-band-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvi-band-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pv-mint) 0%, rgba(234,248,244,0) 32%); }
.pvi-band-in { position: relative; z-index: 2; min-height: 257px; padding-top: 46px; padding-bottom: 50px; box-sizing: border-box; } .pvi-band-in .pvi-crumb, .pvi-band-in .pvi-h1, .pvi-band-in .pvi-lead { padding-left: 2px; }
.pvi-shop-in { display: grid; grid-template-columns: 346px minmax(0, 1fr); gap: 36px; padding-top: 32px; padding-bottom: 30px; }
.pvi-filter { border: 1px solid #E3E8E8; border-radius: 10px; padding: 20px 20px 22px; margin: 0; }
.pvi-ftitle { display: flex; align-items: center; gap: 18px; font-size: 24px; font-weight: 700; color: var(--pv-teal); padding-bottom: 18px; border-bottom: 1px solid #E3E8E8; margin-bottom: 18px; } .pvi-ftitle .pv-mi { width: 28px; height: 28px; }
.pvi-filter h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--pv-ink) !important; margin: 0 0 14px !important; }
.pvi-ck { display: flex !important; align-items: center; gap: 14px; margin: 0 0 12px !important; font-size: 18px; color: #3A4547 !important; font-weight: 400; cursor: pointer; }
.pvi-ck input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0 !important; border: 1.5px solid #CBD3D3; border-radius: 4px; background: #fff; flex: 0 0 26px; cursor: pointer; }
.pvi-ck input:checked { background: var(--pv-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/17px no-repeat; border-color: var(--pv-teal); }
.pvi-ck input:checked + span { color: var(--pv-teal); font-weight: 700; }
.pvi-sep { height: 1px; background: #E3E8E8; margin: 22px 0; }
.pvi-range { height: 6px; background: var(--pv-teal); border-radius: 3px; margin: 10px 12px 28px; position: relative; } .pvi-range::before, .pvi-range::after { content: ""; position: absolute; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--pv-teal); } .pvi-range::before { left: -11px; } .pvi-range::after { right: -11px; }
.pvi-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .pvi-prices label { display: flex; align-items: center; gap: 4px; border: 1px solid #D6DDDD; border-radius: 4px; padding: 0 10px; height: 46px; margin: 0; color: #66737A; font-size: 16px; } .pvi-prices input { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 40px !important; margin: 0 !important; font-size: 16px !important; background: transparent !important; min-width: 0; }
.pvi-apply { width: 100%; height: 52px; margin: 0 !important; border-radius: 8px; background: var(--pv-teal) !important; color: #fff !important; font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.pvi-clear { display: inline-flex; align-items: center; gap: 12px; color: var(--pv-teal) !important; font-size: 18px; font-weight: 700; } .pvi-clear i { font-style: normal; font-size: 20px; }
.pvi-ask { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; background: var(--pv-mint); border-radius: 12px; padding: 24px 20px; margin-top: 24px; } .pvi-ask > .pv-mi { width: 48px; height: 48px; }
.pvi-ask strong { display: block; color: var(--pv-teal); font-size: 20px; font-family: "Lexend", sans-serif; } .pvi-ask small { color: var(--pv-teal); font-size: 15px; }
.pvi-ask-tel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--pv-ink) !important; font-size: 21px; font-weight: 800; margin: 12px 0 10px; }
.pvi-ask .pvi-btn-line { grid-column: 1 / -1; }
.pvi-bar { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; } .pvi-bar .pv-h2 { flex: 1 1 auto; margin: 0 !important; font-size: 34px !important; }
.pvi-sort { margin: 0; } .pvi-sort label { display: flex; align-items: center; border: 1px solid #D6DDDD; border-radius: 6px; height: 46px; padding: 0 0 0 16px; margin: 0; width: 226px; } .pvi-sort span { font-size: 17px; color: #333; white-space: nowrap; }
.pvi-sort select { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 44px !important; font-size: 17px !important; padding: 0 8px !important; background-color: transparent !important; }
.pvi-view { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; } .pvi-view .pv-mi { width: 22px; height: 22px; background: #9AA4A6; } .pvi-view.on { background: var(--pv-teal); } .pvi-view.on .pv-mi { background: #fff; }
.pvi-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .pvi-chip { display: inline-flex; align-items: center; gap: 12px; background: var(--pv-mint); color: var(--pv-teal) !important; border-radius: 6px; padding: 8px 14px; font-size: 16px; font-weight: 700; } .pvi-chip i { font-style: normal; }
.pvi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 22px; }
.pvi-grid .pv-pc-img { height: 232px; }
.pvi-grid.is-list { grid-template-columns: minmax(0, 1fr); } .pvi-grid.is-list .pv-pc { display: grid; grid-template-columns: 260px minmax(0, 1fr); } .pvi-grid.is-list .pv-pc-img { height: 100%; min-height: 200px; } .pvi-grid.is-list .pv-pc-b { padding: 24px; } .pvi-grid.is-list .pv-add { max-width: 280px; }
.pvi-empty { padding: 40px; background: var(--pv-soft); border-radius: 10px; font-size: 18px; }
.pvi-main .navigation.pagination { margin-top: 28px; } .pvi-main .nav-links { display: flex; justify-content: center; gap: 12px; }
.pvi-main .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; border: 1px solid #DCE2E2; border-radius: 6px; color: #333 !important; font-size: 18px; } .pvi-main .page-numbers.current { background: var(--pv-teal); border-color: var(--pv-teal); color: #fff !important; }
.pvi-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #E3E8E8; border-radius: 12px; padding: 22px 10px; margin: 0 0 22px; }
.pvi-perks > div { display: flex; align-items: center; gap: 18px; padding: 0 28px; border-left: 1px solid #E3E8E8; } .pvi-perks > div:first-child { border-left: 0; }
.pvi-perks .pv-mi { width: 54px; height: 54px; } .pvi-perks strong { display: block; color: var(--pv-teal); font-size: 19px; font-family: "Lexend", sans-serif; font-weight: 600; } .pvi-perks small, .pvi-perks a { display: block; color: #3F4A4C !important; font-size: 15px; } .pvi-perks a { color: var(--pv-ink) !important; font-size: 19px; font-weight: 800; }
/* ---------- chi tiết SP ---------- */
.pvi-prod .pvi-crumb { margin: 22px 0 22px; } .pvi-prod .pvi-crumb span { color: #3A4547; }
.pvi-pgrid { display: grid; grid-template-columns: 598px minmax(0, 1fr); gap: 42px; }
.pvi-gmain { position: relative; aspect-ratio: 598 / 503; border: 1px solid #E3E8E8; border-radius: 8px; overflow: hidden; background: #fff; } .pvi-gmain img { width: 100%; height: 100%; object-fit: contain; display: block; } .pvi-gmain .pv-off { left: 16px; top: 16px; }
.pvi-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .pvi-thumbs a { display: block; aspect-ratio: 138 / 133; border: 1px solid #E3E8E8; border-radius: 6px; overflow: hidden; background: #fff; } .pvi-thumbs a.on { border: 2px solid var(--pv-red); } .pvi-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvi-kick { color: #4C5759; font-size: 15px; text-transform: uppercase; margin: 2px 0 8px; letter-spacing: .3px; }
.pvi-ptitle { color: var(--pv-teal) !important; font-size: 40px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 12px !important; }
.pvi-rate { display: flex; align-items: center; gap: 18px; color: #3F4A4C; font-size: 17px; } .pvi-rate span { color: #8A9396; font-size: 22px; letter-spacing: 6px; }
.pvi-pprice { color: var(--pv-red); font-size: 36px; font-weight: 700; margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid #E3E8E8; } .pvi-pprice del { color: #8A9396; font-size: 20px; font-weight: 400; margin-left: 14px; font-family: "Nunito Sans", sans-serif; }
.pvi-short { color: #3F4A4C; font-size: 18px; line-height: 1.6; margin-bottom: 18px; } .pvi-short p { margin: 0; }
.pvi-buyf { margin: 0; } .pvi-optrow { margin-bottom: 16px; } .pvi-olabel { color: var(--pv-ink); font-size: 18px; font-weight: 700; margin-bottom: 10px; } .pvi-olabel b { font-weight: 700; }
.pvi-colors { display: flex; gap: 22px; } .pvi-color { width: 56px; height: 56px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px #E3E8E8; } .pvi-color.on { box-shadow: 0 0 0 2px var(--pv-red); }
.pvi-sizes { display: flex; gap: 18px; } .pvi-size { display: inline-flex; align-items: center; justify-content: center; width: 75px; height: 48px; border: 1px solid #D6DDDD; border-radius: 6px; color: #333 !important; font-size: 18px; } .pvi-size.on { background: var(--pv-teal); border-color: var(--pv-teal); color: #fff !important; font-weight: 700; }
.pvi-onote { color: #4C5759; font-size: 16px; margin-top: 8px; }
.pvi-qtyrow { display: flex; align-items: center; gap: 22px; margin: 4px 0 18px; } .pvi-qtyrow > span { color: var(--pv-ink); font-size: 18px; font-weight: 700; }
.pvi-qty { display: inline-flex; gap: 6px; } .pvi-qty button { width: 44px; height: 44px; margin: 0 !important; min-height: 0; border-radius: 6px; background: #F2F4F4 !important; color: #333 !important; font-size: 20px; padding: 0; } .pvi-qty input { width: 44px !important; height: 44px !important; margin: 0 !important; border: 1px solid #E3E8E8 !important; border-radius: 6px !important; box-shadow: none !important; text-align: center; padding: 0 !important; font-size: 17px !important; -moz-appearance: textfield; } .pvi-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pvi-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pvi-acts .pv-btn, .pvi-acts .pvi-btn-line { width: 100%; min-height: 54px; height: 54px; border-radius: 8px; font-size: 19px; }
.pvi-cartbtn { display: flex; align-items: center; justify-content: center; gap: 14px; height: 58px; margin-top: 12px; border-radius: 8px; background: var(--pv-teal); color: #fff !important; font-size: 20px; font-weight: 700; } .pvi-cartbtn:hover { background: var(--pv-teal-d); }
.pvi-perk3 { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 14px; } .pvi-perk3 span { display: flex; align-items: center; gap: 12px; color: #3F4A4C; font-size: 16px; white-space: nowrap; } .pvi-perk3 .pv-mi { width: 34px; height: 34px; }
.pvi-need { display: flex; align-items: center; gap: 14px; color: #3F4A4C; font-size: 18px; } .pvi-need a { color: var(--pv-ink) !important; font-weight: 800; } .pvi-need .pv-mi { width: 34px; height: 34px; }
.pvi-tabs { display: flex; gap: 0; border-bottom: 1px solid #DCE2E2; margin: 40px 0 26px; } .pvi-tabs a { color: #3F4A4C !important; font-size: 20px; padding: 0 32px 14px; border-bottom: 4px solid transparent; margin-bottom: -1px; min-width: 120px; text-align: center; } .pvi-tabs a.on { color: var(--pv-teal) !important; font-weight: 800; border-bottom-color: var(--pv-teal); }
.pvi-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 565px; gap: 70px; align-items: start; } .pvi-dgrid-1 { grid-template-columns: minmax(0, 1fr); }
.pvi-content h2 { font-size: 38px !important; font-weight: 700 !important; color: var(--pv-teal) !important; margin: 0 0 12px !important; font-family: "Lexend", sans-serif !important; }
.pvi-content p { font-size: 19px; line-height: 1.6; color: #3F4A4C; margin: 0 0 16px; }
.pvi-ticks { list-style: none; margin: 8px 0 0 !important; padding: 0; } .pvi-ticks li { display: flex; align-items: center; gap: 16px; font-size: 19px; color: #3A4547; margin: 0 0 14px !important; }
.pvi-ticks li::before { content: ""; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--pv-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/17px no-repeat; }
.pvi-spec { width: 100%; border-collapse: collapse; margin: 0 !important; } .pvi-spec th, .pvi-spec td { border: 0; border-bottom: 1px solid #E3E8E8; padding: 12px 0; font-size: 18px; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; color: #3A4547; } .pvi-spec th { width: 36%; color: #66737A; }
.pvi-noreview { background: var(--pv-soft); padding: 26px; border-radius: 10px; font-size: 18px; }
.pvi-sizebox { background: var(--pv-mint); border-radius: 14px; padding: 28px 22px 22px; } .pvi-sizebox h3 { color: var(--pv-teal) !important; font-size: 28px !important; font-weight: 700 !important; margin: 0 0 18px !important; }
.pvi-sizebox table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #DCE2E2; border-radius: 8px; overflow: hidden; margin: 0 !important; } .pvi-sizebox th, .pvi-sizebox td { text-align: center; font-size: 18px; padding: 12px 6px; border: 0; border-top: 1px solid #E3E8E8; border-right: 1px solid #E3E8E8; text-transform: none; letter-spacing: 0; color: #2E3B3E; } .pvi-sizebox th { background: #F2F4F4; border-top: 0; font-weight: 600; } .pvi-sizebox tr > *:last-child { border-right: 0; }
.pvi-rv { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #DCE2E2; border-radius: 10px; padding: 22px 22px; margin: 26px 0 34px; } .pvi-rv h3 { color: var(--pv-teal) !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 0 4px !important; } .pvi-rv h3 + div { color: #3F4A4C; font-size: 18px; }
.pvi-relhead .pv-h2 { font-size: 38px !important; }
.pvi-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; } .pvi-grid4 .pv-pc-img { height: 225px; }
/* ---------- về chúng tôi ---------- */
.pvi-ahero .pv-hero-txt.pvi-ahero-txt { padding: 70px 0 96px 10px !important; }
.pvi-ah1 { font-size: 90px !important; color: var(--pv-teal) !important; margin: 26px 0 18px !important; line-height: 1.05 !important; }
.pvi-alead { font-size: 34px; color: #2E3B3E; }
.section.pvi-story-sec { padding: 40px 0 40px !important; }
.pvi-story { display: grid; grid-template-columns: minmax(0, 1fr) 680px; gap: 46px; align-items: start; }
.pvi-eb { color: var(--pv-red); font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.pvi-h2l { font-size: 56px !important; line-height: 1.2 !important; margin-bottom: 22px !important; }
.pvi-ulink { display: inline-flex; gap: 14px; color: var(--pv-teal) !important; font-size: 21px; font-weight: 800; border-bottom: 3px solid var(--pv-teal); padding-bottom: 4px; margin-top: 14px; } .pvi-ulink i { font-style: normal; }
.pvi-story-pic { aspect-ratio: 680 / 497; border-radius: 12px; overflow: hidden; background: #DDE7E4; } .pvi-story-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section.pvi-vmv-sec { padding: 36px 0 34px !important; } .pvi-vmv-sec .pv-h2 { font-size: 50px !important; }
.pvi-vmv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .pvi-vmv > div { background: #fff; border-radius: 12px; text-align: center; padding: 30px 26px 34px; box-shadow: 0 4px 16px rgba(0,80,70,.05); }
.pvi-vmv .pv-mi { display: block; width: 100px; height: 80px; margin: 0 auto 16px; } .pvi-vmv h3 { color: var(--pv-teal) !important; font-size: 30px !important; font-weight: 700 !important; margin: 0 0 12px !important; } .pvi-vmv h3 + div { color: #3F4A4C; font-size: 21px; line-height: 1.6; }
.section.pvi-space-sec { padding: 40px 0 24px !important; } .pvi-space-sec .pv-h2, .pvi-why-sec .pv-h2 { font-size: 46px !important; }
.pvi-space { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pvi-space > div { border: 1px solid #E3E8E8; border-radius: 10px; overflow: hidden; background: #fff; }
.pvi-space-img { height: 300px; background: #E9EEED; } .pvi-space-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvi-space-b { padding: 20px 22px 20px; } .pvi-space-b h3 { color: var(--pv-ink) !important; font-size: 24px !important; font-weight: 600 !important; margin: 0 0 6px !important; } .pvi-space-b h3 + div { color: #3F4A4C; font-size: 19px; }
.section.pvi-why-sec { padding: 40px 0 20px !important; }
.pvi-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; margin: 6px 0 32px; } .pvi-why > div { padding: 0 20px; border-left: 1px solid #E3E8E8; } .pvi-why > div:first-child { border-left: 0; }
.pvi-why .pv-mi { display: block; width: 72px; height: 72px; margin: 0 auto 18px; } .pvi-why h3 { color: var(--pv-teal) !important; font-size: 23px !important; font-weight: 700 !important; margin: 0 0 8px !important; } .pvi-why h3 + div { color: #3F4A4C; font-size: 19px; line-height: 1.5; }
.pvi-cta { display: flex; align-items: center; gap: 40px; background: var(--pv-mint); border-radius: 16px; padding: 34px 40px; margin: 0 -22px; } .pvi-cta > div { flex: 1 1 auto; } .pvi-cta h2 { color: var(--pv-teal) !important; font-size: 40px !important; font-weight: 700 !important; margin: 0 0 8px !important; } .pvi-cta > div > div { color: #3F4A4C; font-size: 21px; }
.pvi-cta .pv-btn { border-radius: 10px; min-height: 66px; padding: 0 44px; }
.pvi-cta-tel { display: flex; align-items: center; gap: 16px; color: var(--pv-teal) !important; font-size: 27px; font-weight: 800; white-space: nowrap; } .pvi-cta-tel .pv-mi { width: 50px; height: 50px; }
/* ---------- liên hệ ---------- */
.section.pvi-cband { padding: 30px 0 26px !important; } .pvi-cband .pvi-h1 { font-size: 70px !important; margin-bottom: 14px !important; } .pvi-cband .pvi-lead { font-size: 25px; }
.section.pvi-ct-sec { padding: 26px 0 30px !important; }
.pvi-ct { display: grid; grid-template-columns: 792px minmax(0, 1fr); gap: 32px; }
.pvi-ct-form { border: 1px solid #DCE2E2; border-radius: 12px; padding: 22px 30px 26px; } .pvi-ct-form .pv-h2, .pvi-ct-info .pv-h2 { font-size: 40px !important; margin: 0 0 6px !important; } .pvi-ct-sub { color: #3F4A4C; font-size: 20px; margin-bottom: 20px; }
.pvi-cf form { margin: 0; } .pvi-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.pvi-cf label { display: block; margin: 0 0 16px; font-weight: 400; } .pvi-cf label > span:first-child { display: block; color: var(--pv-ink); font-size: 18px; font-weight: 700; margin-bottom: 8px; } .pvi-cf label i { color: var(--pv-red); font-style: normal; }
.pvi-cf input[type="text"], .pvi-cf input[type="tel"], .pvi-cf input[type="email"], .pvi-cf select, .pvi-cf textarea { height: 50px !important; margin: 0 !important; border: 1px solid #D6DDDD !important; border-radius: 8px !important; box-shadow: none !important; font-size: 17px !important; padding: 0 18px !important; }
.pvi-cf textarea { height: 110px !important; padding: 12px 18px !important; }
.pvi-cf input[type="submit"] { width: 100%; height: 58px; margin: 6px 0 14px !important; border-radius: 8px; background: var(--pv-red) !important; color: #fff !important; font-size: 20px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.pvi-fnote { text-align: center; color: #3F4A4C; font-size: 16px; } .pvi-cf .wpcf7-spinner { display: none; }
.wpcf7-form div > p:has(> label ~ label) { display: contents; }
.pvi-ct-info .pv-h2 { margin-bottom: 18px !important; }
.pvi-ic { display: flex; gap: 26px; align-items: flex-start; background: var(--pv-mint); border-radius: 12px; padding: 26px 24px; margin-bottom: 18px; } .pvi-ic > .pvi-svg { width: 60px; height: 60px; flex: 0 0 60px; }
.pvi-ic strong { display: block; color: var(--pv-teal); font-size: 22px; font-weight: 600; } .pvi-ic small { display: block; color: #3F4A4C; font-size: 18px; margin-top: 4px; }
.pvi-ic-big { display: block; color: var(--pv-teal) !important; font-size: 28px; font-weight: 700; line-height: 1.35; } .pvi-ic-mail { font-size: 24px; word-break: break-all; }
.section.pvi-map-sec { padding: 26px 0 30px !important; } .pvi-map-sec .pv-head { margin-bottom: 14px; } .pvi-map-sec .pv-h2 { font-size: 40px !important; }
.pvi-map { height: 312px; border-radius: 12px; overflow: hidden; background: #EEF0EF; margin-bottom: 30px; } .pvi-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.pvi-faq-h { margin-bottom: 14px !important; }
.pvi-acc details { border: 1px solid #DCE2E2; border-radius: 10px; padding: 0 28px; margin-bottom: 12px; } .pvi-acc details[open] { background: var(--pv-mint); border-color: #CFE9E2; }
.pvi-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; padding: 16px 0; font-size: 21px; font-weight: 600; color: var(--pv-teal-d); } .pvi-acc summary::-webkit-details-marker { display: none; }
.pvi-acc summary::after { content: "+"; font-size: 32px; font-weight: 400; color: var(--pv-teal); line-height: 1; } .pvi-acc details[open] summary::after { content: "–"; }
.pvi-acc details > div { color: #3A4547; font-size: 18px; line-height: 1.6; margin: -6px 0 16px; }
.section.pvi-doc-sec { padding: 36px 0 50px !important; } .pvi-doc h2 { font-size: 26px; color: var(--pv-teal); margin: 26px 0 10px; font-family: "Lexend", sans-serif; } .pvi-doc .pvi-ptxt { font-size: 18px; }
/* ---------- mobile + khoảng giữa ---------- */
@media (max-width: 849px) {
  .pvi-h1, .pvi-cband .pvi-h1 { font-size: 34px !important; } .pvi-lead, .pvi-cband .pvi-lead { font-size: 17px; }
  .pvi-band-pic { position: relative; width: auto; height: 190px; } .pvi-band-pic::after { display: none; } .pvi-band-in { min-height: 0; padding-top: 18px; padding-bottom: 24px; }
  .pvi-shop-in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 20px; } .pvi-side { order: 2; } .pvi-bar { flex-wrap: wrap; gap: 10px; } .pvi-bar .pv-h2 { flex: 1 0 100%; font-size: 26px !important; } .pvi-sort label { width: auto; flex: 1; }
  .pvi-grid, .pvi-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pvi-grid .pv-pc-img, .pvi-grid4 .pv-pc-img { height: 160px; }
  .pvi-grid.is-list .pv-pc { grid-template-columns: 120px minmax(0, 1fr); } .pvi-grid.is-list .pv-pc-b { padding: 12px; }
  .pvi-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; padding: 18px 6px; } .pvi-perks > div { padding: 0 10px; gap: 10px; } .pvi-perks > div:nth-child(3) { border-left: 0; } .pvi-perks .pv-mi { width: 36px; height: 36px; } .pvi-perks strong { font-size: 15px; } .pvi-perks small { font-size: 13px; } .pvi-perks a { font-size: 15px; }
  .pvi-pgrid, .pvi-dgrid, .pvi-story, .pvi-vmv, .pvi-space, .pvi-ct { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pvi-thumbs { gap: 8px; } .pvi-ptitle { font-size: 28px !important; } .pvi-pprice { font-size: 28px; }
  .pvi-colors { gap: 14px; } .pvi-color { width: 44px; height: 44px; } .pvi-sizes { gap: 10px; } .pvi-size { width: 60px; } .pvi-perk3 { flex-wrap: wrap; } .pvi-perk3 span { font-size: 14px; white-space: normal; } .pvi-need { font-size: 16px; }
  .pvi-tabs a { padding: 0 12px 12px; min-width: 0; font-size: 17px; } .pvi-content h2 { font-size: 26px !important; } .pvi-content p, .pvi-ticks li { font-size: 16px; } .pvi-sizebox h3 { font-size: 22px !important; } .pvi-sizebox th, .pvi-sizebox td { font-size: 15px; }
  .pvi-rv { flex-direction: column; align-items: flex-start; } .pvi-relhead .pv-h2 { font-size: 26px !important; }
  .pvi-ahero .pv-hero-txt.pvi-ahero-txt { padding: 20px 0 30px !important; } .pvi-ah1 { font-size: 46px !important; margin: 8px 0 10px !important; } .pvi-alead { font-size: 20px; }
  .pvi-h2l, .pvi-vmv-sec .pv-h2, .pvi-space-sec .pv-h2, .pvi-why-sec .pv-h2 { font-size: 28px !important; } .pvi-h2l br { display: none; } .pvi-ptxt { font-size: 16px; } .pvi-sub { font-size: 16px !important; margin-top: -8px !important; }
  .pvi-vmv h3 { font-size: 22px !important; } .pvi-vmv h3 + div { font-size: 16px; } .pvi-vmv h3 + div br, .pvi-why h3 + div br { display: none; } .pvi-vmv .pv-mi { width: 64px; height: 52px; }
  .pvi-space-img { height: 200px; } .pvi-space-b h3 { font-size: 19px !important; } .pvi-space-b h3 + div { font-size: 15px; }
  .pvi-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; } .pvi-why > div { padding: 0 10px; } .pvi-why > div:nth-child(3) { border-left: 0; } .pvi-why .pv-mi { width: 48px; height: 48px; } .pvi-why h3 { font-size: 17px !important; } .pvi-why h3 + div { font-size: 14px; }
  .pvi-cta { flex-direction: column; align-items: flex-start; gap: 16px; margin: 0; padding: 22px 18px; } .pvi-cta h2 { font-size: 24px !important; } .pvi-cta > div > div { font-size: 16px; } .pvi-cta-tel { font-size: 22px; }
  .pvi-ct-form { padding: 18px 14px; } .pvi-ct-form .pv-h2, .pvi-ct-info .pv-h2, .pvi-map-sec .pv-h2 { font-size: 26px !important; } .pvi-f2 { grid-template-columns: minmax(0, 1fr); }
  .pvi-ic { gap: 14px; padding: 18px 16px; } .pvi-ic > .pvi-svg { width: 40px; height: 40px; flex-basis: 40px; } .pvi-ic-big { font-size: 22px; } .pvi-ic-mail { font-size: 17px; } .pvi-ic strong { font-size: 18px; } .pvi-ic small { font-size: 15px; }
  .pvi-map { height: 240px; } .pvi-acc details { padding: 0 14px; } .pvi-acc summary { font-size: 16px; } .pvi-acc details > div { font-size: 15px; }
}
@media (min-width: 850px) and (max-width: 1399px) {
  .pvi-shop-in { grid-template-columns: 290px minmax(0, 1fr); gap: 24px; } .pvi-pgrid { grid-template-columns: 46% minmax(0, 1fr); gap: 30px; } .pvi-dgrid { grid-template-columns: minmax(0, 1fr) 42%; gap: 36px; } .pvi-perk3 { flex-wrap: wrap; }
  .pvi-perks > div { padding: 0 14px; gap: 10px; } .pvi-perks .pv-mi { width: 40px; height: 40px; } .pvi-story { grid-template-columns: minmax(0, 1fr) 48%; } .pvi-h2l { font-size: 44px !important; } .pvi-ct { grid-template-columns: 58% minmax(0, 1fr); } .pvi-cta { margin: 0; } .pvi-ah1 { font-size: 70px !important; }
}
@media (min-width: 850px) and (max-width: 1099px) {
  .pvi-grid, .pvi-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pvi-pgrid, .pvi-dgrid, .pvi-story, .pvi-ct { grid-template-columns: minmax(0, 1fr); } .pvi-perks, .pvi-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; } .pvi-perks > div:nth-child(3), .pvi-why > div:nth-child(3) { border-left: 0; } .pvi-cta { flex-wrap: wrap; }
}
/* sửa sau lượt chụp 1 */
.pvi-band .pvi-h1 { font-size: 46px !important; } .pvi-perks { margin-top: 10px; } .pvi-perks > div { padding: 0 20px; } .pvi-perks strong { font-size: 17px; white-space: nowrap; } .pvi-perks small { white-space: nowrap; }
@media (max-width: 1399px) { .pvi-perks strong, .pvi-perks small { white-space: normal; } }
@media (max-width: 849px) { .pvi-band .pvi-h1 { font-size: 30px !important; } }
.pvi-ic-big { font-size: 25px; } .pvi-ic-mail { font-size: 20px; word-break: normal; white-space: nowrap; } .pvi-ic { padding: 22px 22px; gap: 22px; } .pvi-ic > .pvi-svg { width: 52px; height: 52px; flex-basis: 52px; }
.pvi-content h2 { font-size: 32px !important; } .pvi-why h3 { font-size: 21px !important; white-space: nowrap; }
@media (max-width: 1399px) { .pvi-why h3 { white-space: normal; } .pvi-ic-mail { white-space: normal; word-break: break-all; } }
@media (max-width: 849px) { .pvi-ic-big { font-size: 20px; } .pvi-ic-mail { font-size: 16px; } .pvi-content h2 { font-size: 24px !important; } }
.pvi-brand-sec { padding: 40px 0 50px !important; } .pvi-brands { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
/* ---------- (10-02) bài viết / cẩm nang ---------- */
.pvi-pband .pvi-band-in { min-height: 0; padding-top: 30px; padding-bottom: 34px; } .pvi-pband .pvi-kick { color: var(--pv-red); font-weight: 800; margin-bottom: 6px; } .pvi-post-h1 { font-size: 46px !important; max-width: 900px; }
.pvi-postgrid { display: grid; grid-template-columns: minmax(0, 1fr) 346px; gap: 44px; padding-top: 34px; padding-bottom: 20px; align-items: start; }
.pvi-article-img { border-radius: 12px; overflow: hidden; margin-bottom: 24px; background: #E9EEED; } .pvi-article-img img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
.pvi-article-c h2 { font-size: 28px !important; margin: 26px 0 10px !important; } .pvi-article-c p { font-size: 19px; line-height: 1.65; color: #3A4547; margin: 0 0 14px; }
.pvi-ask-post { margin-top: 0; }
.pvi-relposts { padding-top: 30px; padding-bottom: 40px; }
.pvi-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pvi-bcard { display: block; border: 1px solid #E8ECEC; border-radius: 10px; overflow: hidden; background: #fff; } .pvi-bcard-img { display: block; aspect-ratio: 16 / 9; background: #EEF1F0; overflow: hidden; } .pvi-bcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pvi-bcard-b { display: block; padding: 16px 18px 18px; } .pvi-bcard-b small { display: block; color: var(--pv-teal); font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; } .pvi-bcard-b strong { display: block; font-family: "Lexend", sans-serif; color: var(--pv-ink); font-size: 21px; font-weight: 600; line-height: 1.4; }
@media (max-width: 849px) { .pvi-post-h1 { font-size: 30px !important; } .pvi-postgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 20px; } .pvi-bgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pvi-article-c p { font-size: 16px; } }
@media (min-width: 850px) and (max-width: 1099px) { .pvi-postgrid { grid-template-columns: minmax(0, 1fr); } .pvi-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 10-02 ruler/_cmpw trang trong: tiêu đề bộ lọc + thẻ tầm nhìn rộng hơn mockup 0.79-0.88 theo bề rộng dòng -> thu nhẹ */
.pvi-filter h3 { font-size: 18px !important; } .pvi-vmv h3 { font-size: 26px !important; } .pvi-space-b h3 { font-size: 22px !important; }
.pvi-bookpic { border-radius: 12px; overflow: hidden; height: 330px; margin-bottom: 18px; background: #DDE7E4; } .pvi-bookpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 849px) { .pvi-bookpic { height: 220px; } }