/* Pet Vui (thucung3) — trang chủ y hệt mockup home-desktop-v1 (xanh ngọc #008374 + đỏ #e4002b màu gốc), cỡ đo theo mockup x1.887 (10-01) */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");
:root { --pv-teal: #008374; --pv-teal-d: #00695E; --pv-foot: #017B76; --pv-red: #E4002B; --pv-red-d: #C40025; --pv-ink: #0E2F35; --pv-text: #3A4547; --pv-muted: #66737A; --pv-line: #E6EBEB; --pv-mint: #EAF8F4; --pv-soft: #F5F7F7; }
body, p, li, a, input, select, textarea, button, td, th, label, .nav > li > a { font-family: "Nunito Sans", sans-serif !important; }
.pv-h1, .pv-h2, .pv-sec h3, .pv-footer h4, #header #logo a, .pv-ft-logo, .pv-bc-t strong, .pv-sc-t strong, .pv-ni span, .pv-badge, .pv-nl strong { font-family: "Lexend", sans-serif !important; }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; }
body { color: var(--pv-text); }
/* ---------- topbar + header ---------- */
#top-bar { background: #fff !important; border-bottom: 1px solid #ECEFEF; }
#top-bar .flex-row { height: 42px; }
.pv-tb-l, .pv-tb-r { color: #4C5759 !important; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; }
.pv-tb-r a { color: var(--pv-ink) !important; font-weight: 800; margin-left: 4px; }
.pv-tb-heart { width: 18px; height: 16px; background: var(--pv-red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4 10.3 19.8C4.2 14.3 0 10.6 0 6.1 0 2.6 2.7 0 6.2 0c2 0 3.9.9 5.8 2.5C13.9.9 15.8 0 17.8 0 21.3 0 24 2.6 24 6.1c0 4.5-4.2 8.2-10.3 13.7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.4 10.3 19.8C4.2 14.3 0 10.6 0 6.1 0 2.6 2.7 0 6.2 0c2 0 3.9.9 5.8 2.5C13.9.9 15.8 0 17.8 0 21.3 0 24 2.6 24 6.1c0 4.5-4.2 8.2-10.3 13.7z'/%3E%3C/svg%3E") center/contain no-repeat; }
#header .header-main { background: #fff !important; }
#header #logo { width: 260px !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: 46px; font-weight: 700; color: var(--pv-teal) !important; line-height: 1; text-transform: none !important; letter-spacing: -.5px; }
#header #logo a::before { content: ""; width: 68px; height: 62px; flex: 0 0 68px; background: url(icons/logo.png) center/contain no-repeat; }
#header #logo a::after { display: none !important; }
#header .header-main .flex-left { flex: 1 1 auto; padding: 0 60px 0 50px; }
#header .header-search-form { width: 100% !important; max-width: 680px !important; }
#header .header-search-form .searchform { border-radius: 14px; overflow: hidden; background: #F1F3F4; }
#header .header-search-form input[type="search"] { height: 56px !important; background: #F1F3F4 !important; border: 0 !important; box-shadow: none !important; font-size: 17px !important; padding: 0 24px !important; color: #333; }
#header .header-search-form .button.icon { height: 56px !important; width: 76px; background: var(--pv-teal) !important; border-radius: 12px !important; margin: 0 !important; }
#header .header-search-form .button.icon i { font-size: 22px; color: #fff; }
#header .header-main .flex-right .nav > li { margin: 0 18px !important; }
#header .header-main .account-item a, #header .header-main .cart-item a.header-cart-link { display: flex !important; flex-direction: column-reverse; align-items: center; gap: 6px; color: #2C3A3D !important; font-size: 16px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0; }
#header .header-main .account-item a i, #header .header-main .cart-item i { font-size: 26px !important; color: var(--pv-teal) !important; margin: 0 !important; }
#header .header-main .account-item .header-account-title, #header .header-main .cart-item .header-cart-title { margin: 0 !important; }
#header .header-main .cart-item .cart-price { display: none !important; }
#header .header-main .cart-icon strong { border-color: var(--pv-teal) !important; color: var(--pv-teal) !important; }
#header .header-main .cart-item .icon-shopping-cart[data-icon-label]::after, #header .header-main .cart-item [data-icon-label]::after { background: var(--pv-red) !important; color: #fff; }
#header .header-bottom { background: linear-gradient(#fff 0, #fff 0) top/100% 0 no-repeat, var(--pv-mint) !important; min-height: 56px; }
#header .header-bottom > .container { max-width: 1305px; background: var(--pv-teal); border-radius: 22px; padding: 0 0 0 22px; height: 56px; }
#header .header-bottom-nav > li { margin: 0 !important; } #header .header-bottom-nav > li > a { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 15px !important; height: 56px; line-height: 56px; opacity: 1; }
#header .header-bottom-nav > li > a:hover, #header .header-bottom-nav > li.current-menu-item > a { color: #D9FFF6 !important; }
#header .header-bottom-nav > li > a::before, #header .header-bottom-nav > li > a::after { display: none !important; }
#header .header-bottom .flex-right .html { margin: 0 !important; }
.pv-spa-btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 44px; background: var(--pv-red); color: #fff !important; border-radius: 27px; font-size: 18px; font-weight: 800; text-transform: none; white-space: nowrap; margin-right: -1px; }
.pv-spa-btn:hover { background: var(--pv-red-d); }
.pv-cal-ic { width: 24px; height: 24px; background: #fff; -webkit-mask: 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' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E") center/contain no-repeat; mask: 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' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E") center/contain no-repeat; }
/* ---------- chung ---------- */
.pv-sec p, .pv-footer p { margin-bottom: 0; }
.pv-sec p:not([class]), .pv-footer p:not([class]) { display: contents; }
.pv-sec .col, .pv-footer .col { padding-bottom: 0 !important; }
.pv-sec img[src=""] { opacity: 0; }
.pv-h2 { color: var(--pv-teal) !important; font-size: 46px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.02em; margin: 0 0 22px !important; }
.pv-sub { color: #3F4A4C; font-size: 20px; margin: -14px 0 24px; }
.pv-eb-dark { color: var(--pv-ink); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; margin: 0 0 12px; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 32px; font-size: 20px; font-weight: 800; padding: 0 38px; min-height: 64px; line-height: 1.2; text-decoration: none !important; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; transition: background .2s, color .2s; border: 2px solid transparent; }
.pv-btn i { font-style: normal; font-size: 24px; }
.pv-btn-red { background: var(--pv-red); color: #fff !important; } .pv-btn-red:hover { background: var(--pv-red-d); }
.pv-btn-line { background: transparent; border-color: var(--pv-teal); color: var(--pv-teal) !important; } .pv-btn-line:hover { background: var(--pv-teal); color: #fff !important; }
.pv-mi { display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; background: var(--pv-teal); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.pv-link { color: var(--pv-teal) !important; font-weight: 800; font-size: 21px; white-space: nowrap; } .pv-link i { font-style: normal; margin-left: 6px; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 22px; }
.pv-head .pv-h2 { margin: 0 !important; }
.pv-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--pv-ink) !important; border-radius: 26px; font-size: 18px; font-weight: 800; height: 48px; padding: 0 26px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.pv-pill i { font-style: normal; }
/* ---------- hero ---------- */
.section.pv-hero { padding: 0 !important; overflow: hidden; background: var(--pv-mint) !important; }
.pv-hero .row, .pv-hero .col, .pv-hero .col-inner { position: static !important; }
.pv-hero-pic { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: #DCEFEA; }
.pv-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.pv-hero-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pv-mint) 0%, rgba(234,248,244,.75) 10%, rgba(234,248,244,0) 30%); }
.pv-hero-txt { position: relative; z-index: 2; padding: 70px 0 70px 10px; }
.pv-h1 { color: var(--pv-teal) !important; font-size: 72px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.035em; margin: 0 0 24px !important; white-space: nowrap; }
.pv-h1 em { font-style: normal; color: var(--pv-red); }
.pv-lead { font-size: 22px; line-height: 1.55; color: #36413F; margin: 0 0 32px; }
.pv-btns { display: flex; gap: 16px; }
.pv-hero .pv-btn-red { min-width: 255px; } .pv-hero .pv-btn-line { min-width: 243px; }
.pv-badge { position: absolute; z-index: 3; top: 40px; right: calc(50% - 658px); width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.3; background: var(--pv-red); border-radius: 50%; border: 3px dashed rgba(255,255,255,.55); background-clip: padding-box; outline: 6px solid var(--pv-red); box-shadow: 0 0 0 6px rgba(228,0,43,.18); }
.pv-badge b { font-size: 28px; font-weight: 800; }
/* ---------- cam kết ---------- */
.section.pv-usp-sec { padding: 0 !important; border-bottom: 1px solid var(--pv-line); }
.pv-usp { display: grid; grid-template-columns: 357px 320px 352px minmax(0, 1fr); align-items: center; height: 105px; padding-left: 18px; }
.pv-ui { display: flex; align-items: center; gap: 20px; }
.pv-ui .pv-mi { width: 64px; height: 56px; }
.pv-ui strong { display: block; color: var(--pv-ink); font-size: 18px; font-weight: 800; }
.pv-ui small { display: block; color: #4C5759; font-size: 16px; margin-top: 2px; }
/* ---------- mua theo thú cưng ---------- */
.section.pv-pet-sec { padding: 36px 0 0 !important; }
.pv-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pv-bc, .pv-sc { position: relative; border-radius: 14px; overflow: hidden; background: #EFE6DF; }
.pv-bc { height: 240px; } .pv-sc { height: 220px; }
.pv-bc img, .pv-sc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-bc-t { position: absolute; left: 46px; top: 36px; display: flex; flex-direction: column; align-items: flex-start; }
.pv-bc-t span { color: #2E3B3E; font-size: 32px; font-weight: 400; line-height: 1.1; }
.pv-bc-t strong { color: var(--pv-ink); font-size: 60px; font-weight: 700; line-height: 1.15; margin-bottom: 10px; }
.pv-small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.pv-sc-t { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pv-sc-t strong { color: var(--pv-ink); font-size: 26px; font-weight: 700; padding-left: 2px; text-shadow: 0 1px 6px rgba(255,255,255,.7); }
.pv-sc .pv-pill { height: 46px; font-size: 17px; padding: 0 22px; }
/* ---------- bán chạy ---------- */
.section.pv-pd-sec { padding: 40px 0 30px !important; }
.pv-pd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pv-pc { background: #F7F8F9; border: 1px solid #EDF0F0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,60,55,.06); }
.pv-pc-img { position: relative; display: block; height: 257px; background: #F1F3F4; }
.pv-pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-off { position: absolute; z-index: 2; left: 14px; top: 16px; background: var(--pv-red); color: #fff; font-size: 18px; font-weight: 800; padding: 3px 9px; border-radius: 5px; }
.pv-pc-b { padding: 20px 18px 18px; background: #fff; }
.pv-pc-b h3 { font-size: 18px !important; font-weight: 600 !important; color: var(--pv-ink) !important; margin: 0 0 14px !important; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-pc-b h3 a { color: inherit !important; }
.pv-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.pv-price b { color: var(--pv-red); font-size: 26px; font-weight: 800; font-family: "Lexend", sans-serif; letter-spacing: -.3px; }
.pv-price del { color: #8A9396; font-size: 17px; }
.pv-add { display: flex; align-items: center; justify-content: center; gap: 12px; height: 53px; border-radius: 8px; background: var(--pv-teal); color: #fff !important; font-size: 18px; font-weight: 700; }
.pv-add:hover { background: var(--pv-teal-d); }
.pv-cart-ic { width: 26px; height: 24px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M0 1.5C0 .7.7 0 1.5 0h2.4c.7 0 1.3.5 1.5 1.2L5.8 3H24c1 0 1.7.9 1.4 1.9l-2.2 8.4c-.2.7-.8 1.1-1.5 1.1H8.6l.5 2H22a1.5 1.5 0 1 1 0 3H8c-.7 0-1.3-.5-1.5-1.2L2.8 3H1.5C.7 3 0 2.3 0 1.5zM8 22a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm11 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M0 1.5C0 .7.7 0 1.5 0h2.4c.7 0 1.3.5 1.5 1.2L5.8 3H24c1 0 1.7.9 1.4 1.9l-2.2 8.4c-.2.7-.8 1.1-1.5 1.1H8.6l.5 2H22a1.5 1.5 0 1 1 0 3H8c-.7 0-1.3-.5-1.5-1.2L2.8 3H1.5C.7 3 0 2.3 0 1.5zM8 22a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm11 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* ---------- spa ---------- */
.section.pv-spa-sec { padding: 0 !important; overflow: hidden; background: var(--pv-mint) !important; }
.pv-spa-sec .row, .pv-spa-sec .col, .pv-spa-sec .col-inner { position: static !important; }
.pv-spa-pic { position: absolute; left: 0; top: 0; bottom: 0; width: calc(50% - 235px); background: #DDE7E4; }
.pv-spa-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.pv-spa { position: relative; display: grid; grid-template-columns: 435px 415px; justify-content: end; gap: 0; padding: 48px 0 48px; margin-right: -24px; }
.pv-eb-n { text-transform: none; font-size: 21px; font-weight: 700; margin-bottom: 14px; }
.pv-spa-txt .pv-h2 { font-size: 43px !important; line-height: 1.22 !important; margin-bottom: 16px !important; white-space: nowrap; }
.pv-lead-s { font-size: 19px; line-height: 1.6; margin-bottom: 32px; }
.pv-spa-txt .pv-btn { min-height: 68px; border-radius: 12px; padding: 0 36px; }
.pv-spa-tel { display: flex; align-items: center; gap: 22px; color: var(--pv-ink) !important; font-size: 23px; font-weight: 800; margin-top: 22px; }
.pv-spa-tel .pv-mi { width: 42px; height: 42px; }
.pv-spa-card { background: #fff; border-radius: 14px; padding: 26px 14px 24px; align-self: start; box-shadow: 0 6px 20px rgba(0,80,70,.05); }
.pv-spa-card h3 { color: var(--pv-teal) !important; font-size: 23px !important; font-weight: 700 !important; margin: 0 0 16px 15px !important; }
.pv-tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #E2E6E6; border-radius: 10px; overflow: hidden; margin: 0 !important; }
.pv-tbl th { background: #F2F3F4; color: var(--pv-ink) !important; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; height: 54px; padding: 0 8px; border: 0; border-right: 1px solid #E2E6E6; text-align: center; }
.pv-tbl td { font-size: 16px; color: #3A4547; height: 54px; padding: 0 8px; border: 0; border-top: 1px solid #E2E6E6; border-right: 1px solid #E2E6E6; text-align: center; }
.pv-tbl tr > *:last-child { border-right: 0; } .pv-tbl tr > *:first-child { width: 36%; }
.pv-note { color: #4C5759; font-size: 14px; margin-top: 18px; text-align: center; }
/* ---------- dinh dưỡng ---------- */
.section.pv-nu-sec { padding: 26px 0 0 !important; }
.pv-nu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-ni { display: flex; align-items: center; gap: 24px; padding: 8px 0 8px 28px; border-left: 1px solid var(--pv-line); }
.pv-ni:first-child { border-left: 0; }
.pv-ni .pv-mi { width: 104px; height: 88px; }
.pv-nu .pv-ni { gap: 20px; padding-left: 26px; }
.pv-ni span { color: var(--pv-teal); font-size: 23px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
/* ---------- khoảnh khắc ---------- */
.section.pv-mo-sec { padding: 38px 0 0 !important; }
.pv-mo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pv-mo-i { height: 265px; border-radius: 12px; overflow: hidden; background: #E9EEED; }
.pv-mo-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- cẩm nang ---------- */
.section.pv-bl-sec { padding: 30px 0 26px !important; }
.pv-link-s { font-size: 19px; }
.pv-bl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pv-bp { border: 1px solid #E8ECEC; border-radius: 10px; overflow: hidden; background: #fff; }
.pv-bp-img { display: block; height: 153px; background: #EEF1F0; }
.pv-bp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-bp-b { padding: 16px 18px 16px; }
.pv-bp-b span { display: block; color: var(--pv-teal); font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.pv-bp-b h3 { font-size: 21px !important; font-weight: 600 !important; line-height: 1.45 !important; margin: 0 !important; }
.pv-bp-b h3 a { color: var(--pv-ink) !important; }
/* ---------- footer ---------- */
#footer .section.pv-footer { border-top: 0 !important; }
.section.pv-footer { padding: 28px 0 0 !important; background: var(--pv-foot) !important; }
.pv-nl { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.3); }
.pv-nl-l { display: flex; align-items: center; gap: 24px; }
.pv-nl-ic { width: 68px; height: 68px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } .pv-nl-ic .pv-mi { width: 36px; height: 36px; }
.pv-nl strong { display: block; color: #fff; font-size: 26px; font-weight: 600; }
.pv-nl small { display: block; color: #E3F4F1; font-size: 18px; margin-top: 4px; }
.pv-nl .wpcf7 { width: 514px; flex: 0 0 514px; }
.pv-nl form { margin: 0; } .pv-nl-row { display: flex; background: #fff; border-radius: 29px; height: 58px; overflow: hidden; }
.pv-nl-row .wpcf7-form-control-wrap { flex: 1 1 auto; }
.pv-nl-row input[type="email"] { height: 58px !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; font-size: 17px !important; padding: 0 22px !important; background: #fff !important; }
.pv-nl-row input[type="submit"] { height: 58px !important; margin: 0 !important; border-radius: 29px !important; background: var(--pv-red) !important; color: #fff !important; font-size: 18px !important; font-weight: 800 !important; padding: 0 38px !important; text-transform: none !important; letter-spacing: 0; }
.pv-nl .wpcf7-spinner { display: none; } .pv-nl .wpcf7-response-output { color: #fff; margin: 8px 0 0 !important; font-size: 14px; }
.pv-ft { display: grid; grid-template-columns: 405px 278px 300px minmax(0, 1fr); padding-top: 26px; }
.pv-ft-brand { padding-top: 34px; }
.pv-ft-logo { display: flex; align-items: center; gap: 16px; color: #fff !important; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.pv-ft-ic { width: 76px; height: 70px; flex: 0 0 76px; background: url(icons/logo.png) center/contain no-repeat; filter: brightness(0) invert(1); }
.pv-ft-slogan { color: #EAF6F3; font-size: 19px; margin-top: 20px; }
.pv-footer h4 { color: #fff !important; font-size: 21px !important; font-weight: 600 !important; margin: 0 0 14px !important; text-transform: none; letter-spacing: 0; }
.pv-footer ul { list-style: none; margin: 0 !important; padding: 0; }
.pv-footer li { margin: 0 0 9px !important; display: flex; gap: 22px; align-items: flex-start; font-size: 19px; line-height: 1.45; color: #EAF6F3; }
.pv-footer li a { color: #EAF6F3 !important; }
.pv-footer .pv-mi { background: #fff; width: 24px; height: 24px; margin-top: 3px; }
.pv-nl-ic .pv-mi { background: var(--pv-teal); margin: 0; }
.pv-ft-copy { padding: 30px 0 30px; color: #EAF6F3; font-size: 16px; }
.absolute-footer { display: none !important; }

/* sửa sau lượt chụp 1 (10-01): CSS theme con cũ nana (margin-top 20px thanh menu, nền footer hotlink bizweb.dktcdn.net), nhãn tài khoản */
#header .header-bottom .flex-row.container { margin: 0 auto !important; }
#header .header-bottom { height: 56px; }
#footer { background: none !important; margin-top: 0 !important; padding: 0 !important; }
#header .header-main .account-item > a span { font-size: 0 !important; }
#header .header-main .account-item > a span::after { content: "Tài khoản"; font-size: 16px; }
#header .header-main .account-item > a::before { content: ""; display: block !important; position: static !important; width: 26px; height: 26px; opacity: 1 !important; background: var(--pv-teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2 22c0-5.5 4.5-9 10-9s10 3.5 10 9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2 22c0-5.5 4.5-9 10-9s10 3.5 10 9z'/%3E%3C/svg%3E") center/contain no-repeat; order: 2; }
.pv-h1 em { font-size: .9em; }
.pv-pet-sec .pv-h2 { font-size: 50px !important; } .pv-pd-sec .pv-h2 { font-size: 48px !important; } .pv-nu-sec .pv-h2, .pv-mo-sec .pv-h2 { font-size: 42px !important; } .pv-bl-sec .pv-h2 { font-size: 44px !important; }
.pv-spa { padding: 44px 0 26px; } .pv-eb-n { margin-bottom: 8px; } .pv-spa-txt .pv-h2 { font-size: 42px !important; margin-bottom: 10px !important; } .pv-lead-s { margin-bottom: 24px; } .pv-spa-tel { margin-top: 12px; } .pv-spa-tel .pv-mi { width: 38px; height: 38px; }
.pv-usp { grid-template-columns: 350px 318px 348px minmax(0, 1fr); } .pv-ui strong { font-size: 17px; }
.pv-pc-b h3 { font-size: 17px !important; }
.section.pv-pd-sec { padding: 36px 0 26px !important; } .section.pv-bl-sec { padding: 26px 0 20px !important; } .pv-bp-b { padding: 14px 18px 12px; } .section.pv-footer { padding-top: 24px !important; } .pv-ft-copy { padding: 24px 0 24px; }
/* ruler:manual (10-01) — logo header NHO x1.29, logo footer x1.3 (đo mực); tiêu đề NHO theo mực nhưng bề rộng dòng khớp mockup (_cmpw) -> giữ cỡ */
@media (min-width: 1400px) { #header #logo { width: 270px !important; } #header #logo a { font-size: 48px; gap: 14px; } #header #logo a::before { width: 76px; height: 70px; flex-basis: 76px; } } /* 10-02: x1.29 theo mực làm logo to hơn mockup (so ảnh cắt header) -> 48px */
.pv-ft-logo { font-size: 64px; gap: 18px; } .pv-ft-ic { width: 94px; height: 86px; flex-basis: 94px; }
@media (max-width: 849px) { .pv-ft-logo { font-size: 42px; } .pv-ft-ic { width: 60px; height: 56px; flex-basis: 60px; } }
/* mob-hero */ @media (max-width: 849px) { .section.pv-hero { padding-top: 0 !important; } .pv-hero-pic { position: relative; width: auto; height: 250px; margin: 0 -15px; } .pv-hero-pic img { object-position: 70% 50%; } .pv-hero-pic::after { display: none; } .pv-badge { top: 14px; right: 12px; width: 96px; height: 96px; font-size: 14px; outline-width: 4px; } .pv-badge b { font-size: 19px; } .pv-hero-txt { padding: 24px 0 36px; } .pv-eb-dark { font-size: 15px; } .pv-h1 { font-size: 38px !important; white-space: normal; } .pv-lead { font-size: 17px; } .pv-lead br { display: none; } .pv-btns { flex-wrap: wrap; } .pv-btn { min-height: 54px; font-size: 17px; padding: 0 24px; } .pv-hero .pv-btn-red, .pv-hero .pv-btn-line { min-width: 0; flex: 1 1 auto; white-space: nowrap; padding: 0 16px; font-size: 16px; } .pv-btns { gap: 10px; } } /* /mob-hero */
@media (max-width: 849px) {
  #top-bar .flex-right { display: none !important; } #top-bar .flex-left { justify-content: center; } .pv-tb-l { font-size: 14px; }
  #header #logo { width: auto !important; } #header #logo a { font-size: 30px; gap: 10px; } #header #logo a::before { width: 44px; height: 40px; flex-basis: 44px; }
  #header .mobile-nav i, #header .mobile-nav .icon-menu { color: var(--pv-teal) !important; font-size: 24px; } #header .mobile-nav a.icon, #header .mobile-nav .button.round { background: transparent !important; border: 0 !important; box-shadow: none !important; } #header .mobile-nav .cart-icon strong { border-color: var(--pv-teal) !important; color: var(--pv-teal) !important; }
  #header .header-bottom { display: none !important; }
  .pv-sec h2.pv-h2 { font-size: 28px !important; margin-bottom: 16px !important; white-space: normal; } .pv-sub { font-size: 16px; margin-top: -8px; } .pv-head { flex-wrap: wrap; } .pv-link { font-size: 17px; }
  .pv-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 16px 12px; padding: 20px 0; } .pv-ui { gap: 10px; } .pv-ui .pv-mi { width: 40px; height: 36px; } .pv-ui strong { font-size: 14px; } .pv-ui small { font-size: 13px; }
  .pv-big { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pv-bc { height: 190px; } .pv-bc-t { left: 20px; top: 20px; } .pv-bc-t span { font-size: 20px; } .pv-bc-t strong { font-size: 40px; }
  .pv-small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .pv-sc { height: 170px; } .pv-sc-t strong { font-size: 20px; } .pv-sc .pv-pill { height: 38px; font-size: 14px; padding: 0 14px; } .pv-sc-t { left: 10px; bottom: 10px; }
  .pv-pd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pv-pc-img { height: 160px; } .pv-pc-b { padding: 12px 10px; } .pv-pc-b h3 { font-size: 15px !important; } .pv-price { flex-wrap: wrap; gap: 4px 8px; } .pv-price b { font-size: 19px; } .pv-price del { font-size: 14px; } .pv-add { height: 42px; font-size: 14px; gap: 6px; } .pv-cart-ic { width: 20px; height: 18px; } .pv-off { font-size: 14px; }
  .pv-spa-pic { position: relative; width: auto; height: 250px; margin: 0 -15px; } .pv-spa { grid-template-columns: minmax(0, 1fr); padding: 26px 0 34px; margin: 0; gap: 26px; } .pv-spa-txt .pv-h2 { white-space: normal; } .pv-lead-s br { display: none; } .pv-spa-txt .pv-btn { min-height: 54px; } .pv-spa-card { padding: 18px 10px; } .pv-tbl th, .pv-tbl td { font-size: 14px; }
  .pv-nu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; } .pv-ni { padding: 6px 0 6px 12px; gap: 12px; } .pv-ni:nth-child(3) { border-left: 0; } .pv-ni .pv-mi { width: 56px; height: 48px; } .pv-ni span { font-size: 16px; }
  .pv-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pv-mo-i { height: 170px; }
  .pv-bl { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pv-bp-b h3 { font-size: 18px !important; } .pv-bp-b h3 br { display: none; }
  .pv-nl { flex-direction: column; align-items: stretch; } .pv-nl-l { gap: 14px; } .pv-nl-ic { width: 52px; height: 52px; flex: 0 0 52px; } .pv-nl strong { font-size: 20px; } .pv-nl small { font-size: 15px; } .pv-nl .wpcf7 { width: auto; flex: 0 0 auto; } .pv-nl-row input[type="submit"] { padding: 0 20px !important; }
  .pv-ft { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pv-ft-brand { padding-top: 0; } .pv-ft-logo { font-size: 38px; } .pv-ft-ic { width: 56px; height: 52px; flex-basis: 56px; } .pv-footer li { font-size: 17px; }
}
/* mid-fix */ @media (min-width: 850px) and (max-width: 1399px) { #header .header-bottom > .container { max-width: calc(100% - 30px) !important; width: calc(100% - 30px); } #header .header-main .flex-left { padding: 0 24px 0 24px; } #header #logo { width: 220px !important; } #header #logo a { font-size: 38px; } #header .header-main .flex-right .nav > li { margin: 0 8px !important; } #header .header-bottom-nav > li > a { padding: 0 10px !important; font-size: 16px !important; } .pv-spa-btn { padding: 0 24px; } .pv-badge { right: 30px; } .pv-usp { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; } .pv-spa { grid-template-columns: minmax(0, 1fr) 380px; margin-right: 0; padding-left: calc(50vw - 225px); gap: 24px; } .pv-spa-txt .pv-h2 { white-space: normal; font-size: 36px !important; } .pv-spa-pic { width: calc(50% - 250px); } .pv-ft { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; } .pv-nl .wpcf7 { width: 440px; flex-basis: 440px; } }
@media (min-width: 850px) and (max-width: 1199px) { #header #logo a { font-size: 30px !important; } #header #logo a::before { width: 48px; height: 44px; flex-basis: 48px; } #header .header-search-form { display: block !important; max-width: 300px !important; } #header .header-main .account-item .header-account-title, #header .header-main .cart-item .header-cart-title { display: none !important; } .pv-h1 { font-size: 56px !important; } .pv-hero-pic { width: 55%; } .pv-badge { display: none; } .pv-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 18px; padding: 20px 0; } .pv-small, .pv-pd, .pv-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-spa { grid-template-columns: minmax(0, 1fr); padding-left: calc(50% - 160px); } .pv-spa-pic { width: calc(50% - 175px); } .pv-nu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; } .pv-ni:nth-child(3) { border-left: 0; } .pv-bl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-nl { flex-wrap: wrap; } .pv-ft { grid-template-columns: 1fr 1fr; gap: 26px; } } /* /mid-fix */
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }