/* Bao Bì Phú Gia (inan5) — trang trong theo mockup v2 (giới thiệu, danh mục, sản phẩm, liên hệ), dùng chung lớp pg-* trang chủ */
.pgi-wrap { max-width: 1280px; margin: 0 auto; padding: 0 15px; }
.pgi-crumb { color: rgba(255,255,255,.9) !important; font-size: 15px !important; margin: 0 0 12px !important; } .pgi-crumb a { color: inherit !important; } .pgi-crumb i { font-style: normal; margin: 0 10px; }
.pgi-crumb-d { color: var(--pg-muted) !important; margin: 16px 0 10px !important; } .pgi-crumb-d a { color: var(--pg-muted) !important; } .pgi-crumb-d b { color: var(--pg-ink); }
.pgi-hero .pg-hero-in, .pgi-hero .pg-hero-img { height: 340px; } .pgi-hero .pg-hero-title { font-size: 48px !important; }
.pgi-thero { display: grid; grid-template-columns: 1fr 1fr; } .pgi-thero-l { background: var(--pg-red); } .pgi-thero .pg-hero-in, .pgi-thero .pg-hero-img { height: 320px; } .pgi-thero .pg-hero-title { font-size: 48px !important; }
.pgi-h2 { font-size: 33px !important; margin-bottom: 14px !important; } .pgi-p { color: var(--pg-text) !important; font-size: 16px !important; line-height: 1.65 !important; margin: 0 0 12px !important; }
.pgi-ws { position: relative; } .pgi-ws img { width: 100%; height: 320px; object-fit: cover; border-radius: 6px; } .pgi-ws span { position: absolute; right: 8px; bottom: 8px; background: var(--pg-red); color: #fff; border-radius: 6px; padding: 12px 24px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.pgi-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 10px; } .pgi-4 p { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; align-items: center; border: 1px solid var(--pg-line); border-radius: 6px; padding: 12px 14px; margin: 0 !important; color: var(--pg-muted); font-size: 14.5px; line-height: 1.45; }
.pgi-4 span { grid-row: 1 / 3; width: 76px; height: 76px; border-radius: 50%; background: #F2F8E6; display: flex; align-items: center; justify-content: center; } .pgi-4 img { width: 42px; height: 42px; } .pgi-4 b { color: var(--pg-ink); font-size: 17px; align-self: end; }
.pgi-sols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pgi-sols a { background: #fff; border-radius: 6px; overflow: hidden; color: var(--pg-muted) !important; text-decoration: none !important; font-size: 15.5px; line-height: 1.55; padding-bottom: 16px; box-shadow: 0 2px 10px rgba(19,33,58,.05); }
.pgi-sols img { width: 100%; height: 196px; object-fit: cover; margin-bottom: 12px; display: block; } .pgi-sols b { display: block; color: var(--pg-ink); font-size: 21px; margin: 0 18px 6px; } .pgi-sols span { display: block; margin: 0 18px; } .pgi-note { text-align: center; color: var(--pg-muted) !important; font-size: 14px !important; margin-top: 16px !important; }
.pgi-proc-img { width: 100%; height: 330px; object-fit: cover; border-radius: 6px; } .pgi-checks { list-style: none; margin: 8px 0 0 !important; } .pgi-checks li { position: relative; padding-left: 48px; margin: 0 0 14px !important; color: var(--pg-ink); font-size: 18px; font-weight: 500; }
.pgi-checks li::before { content: "✓"; position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--pg-green); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* liên hệ */
.pgi-ct3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; } .pgi-ct3 > div { display: flex; gap: 22px; align-items: center; border: 1px solid var(--pg-line); border-radius: 8px; padding: 16px 26px; }
.pgi-ct3 span { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%; background: #F2F8E6; display: flex; align-items: center; justify-content: center; } .pgi-ct3 span img { width: 46px; height: 46px; }
.pgi-ct3 p { display: flex; flex-direction: column; margin: 0 !important; color: var(--pg-ink); font-size: 17px; font-weight: 600; } .pgi-ct3 .big { color: var(--pg-red) !important; font-size: 28px; font-weight: 800; } .pgi-ct3 .mail { color: var(--pg-red) !important; font-size: 18px; } .pgi-ct3 small { color: var(--pg-muted); font-size: 15px; font-weight: 400; } .pgi-ct3 b { color: var(--pg-red); font-size: 19px; line-height: 1.45; }
.pgi-eb { color: var(--pg-ink) !important; font-size: 16px !important; text-transform: uppercase; margin: 0 0 6px !important; } .pgi-big { color: var(--pg-ink) !important; font-size: 50px !important; font-weight: 800 !important; line-height: 1.12 !important; margin: 0 0 14px !important; } .pgi-big span { color: var(--pg-red); }
.pgi-ct-img { width: 100%; height: 300px; object-fit: cover; border-radius: 6px; margin-top: 10px; }
.pgi-form { border: 1px solid var(--pg-line); border-radius: 8px; padding: 24px 30px; } .pgi-form h2 { color: var(--pg-red) !important; font-size: 32px !important; font-weight: 700 !important; margin: 0 !important; } .pgi-form > p { color: var(--pg-text); font-size: 17px; margin: 0 0 14px !important; }
.pgi-form .wpcf7 p { margin: 0 !important; } .pgi-form .wpcf7 br { display: none; } .pgi-form label { display: block; color: var(--pg-ink); font-size: 17px; font-weight: 600; margin: 0 0 12px; } .pgi-form label i { color: var(--pg-red); font-style: normal; }
.pgi-form input:not([type=checkbox]):not([type=submit]), .pgi-form select, .pgi-form textarea { margin: 6px 0 0 !important; border: 1.5px solid var(--pg-line) !important; border-radius: 6px !important; box-shadow: none !important; height: 50px; font-size: 16px !important; font-weight: 400; } .pgi-form textarea { height: 104px !important; min-height: 104px; }
.pgc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pgc-ok { color: var(--pg-text); font-size: 15.5px; margin: 4px 0 14px; } .pgc-ok .wpcf7-list-item { margin: 0; } .pgc-ok input { width: 22px; height: 22px; margin: 0 10px 0 0 !important; vertical-align: -5px; }
.pgi-form input[type=submit] { width: 100%; background: var(--pg-red) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; min-height: 52px; font-size: 20px !important; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 !important; } .pgc-lock { text-align: center; color: var(--pg-muted); font-size: 15px; margin-top: 12px; } .pgc-lock::before { content: "🔒 "; }
.pgi-maph { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; } .pgi-maph .pgi-h2 { margin-bottom: 4px !important; } .pgi-dir { border: 1.5px solid var(--pg-red); color: var(--pg-red) !important; border-radius: 8px; padding: 12px 26px; font-weight: 700; font-size: 18px; }
.pgi-map { width: 100%; height: 300px; border: 0; border-radius: 8px; display: block; margin-bottom: 24px; }
/* danh mục */
.pgi-cat { background: var(--pg-bg); } .pgi-cat .pg-perks-sec { background: #fff; }
.pgi-cat-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; } .pgi-cat-head .pg-h2 { font-size: 34px !important; } .pgi-cat-head .pg-hsub { flex: 0 1 auto; } .pgi-count { white-space: nowrap; margin: 0 0 0 auto !important; color: var(--pg-muted); font-size: 15px; } .pgi-sort { white-space: nowrap; margin: 0 !important; border: 1px solid var(--pg-line); background: #fff; border-radius: 6px; padding: 8px 14px; font-size: 15px; } .pgi-view { display: flex; gap: 6px; margin: 0 !important; } .pgi-view b, .pgi-view span { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pg-line); background: #fff; } .pgi-view b { background: var(--pg-red); color: #fff; border-color: var(--pg-red); }
.pgi-cgrid { display: grid; grid-template-columns: 262px 1fr; gap: 16px; padding-bottom: 20px; } .pgi-grid3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } .pgi-grid3 .pg-cimg { height: 216px; }
.pgi-filter { display: flex; flex-direction: column; gap: 10px; } .pgi-fbox { background: #fff; border-radius: 6px; padding: 16px 14px; } .pgi-fbox h3 { display: flex; align-items: center; gap: 12px; color: var(--pg-ink) !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 0 12px !important; } .pgi-fbox h3 img { width: 26px; height: 26px; }
.pgi-fbox h4 { color: var(--pg-ink) !important; font-size: 17px !important; margin: 12px 0 6px !important; padding-top: 10px; border-top: 1px solid var(--pg-line); } .pgi-fbox h4:first-of-type { border: 0; padding: 0; }
.pgi-fcats { list-style: none; margin: 0 !important; } .pgi-fcats li { margin: 0 !important; } .pgi-fcats a { display: flex; justify-content: space-between; padding: 5px 10px 5px 22px; color: var(--pg-text) !important; font-size: 15.5px; position: relative; } .pgi-fcats a::before { content: "›"; position: absolute; left: 8px; } .pgi-fcats i { font-style: normal; color: var(--pg-muted); } .pgi-fcats li.on a { background: var(--pg-red); color: #fff !important; border-radius: 4px; } .pgi-fcats li.on i { color: #fff; }
.pgi-chk { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; } .pgi-chk label { display: flex; align-items: center; gap: 12px; color: var(--pg-text); font-size: 15.5px; font-weight: 400; margin: 0; } .pgi-chk input { width: 20px; height: 20px; margin: 0 !important; }
.pgi-fbtn { display: grid; gap: 10px; margin: 14px 0 0 !important; } .pgi-apply, .pgi-clear { text-align: center; border-radius: 6px; padding: 8px; font-size: 16px; } .pgi-apply { background: var(--pg-red); color: #fff !important; font-weight: 600; } .pgi-clear { background: #F0F2F5; color: var(--pg-text) !important; }
.pgi-need { background: #FEF3F3; } .pgi-need h3 { color: var(--pg-red) !important; font-size: 23px !important; } .pgi-need p { color: var(--pg-muted); font-size: 15px; margin: 0 0 10px !important; } .pgi-nphone { display: flex; align-items: center; gap: 12px; color: var(--pg-red) !important; font-size: 23px; font-weight: 800; margin-bottom: 12px; } .pgi-nphone img { width: 36px; height: 36px; } .pgi-nbtn { display: block; text-align: center; border: 1.5px solid var(--pg-red); color: var(--pg-red) !important; background: #fff; border-radius: 6px; padding: 6px; font-weight: 600; }
.pgi-fp { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--pg-line); color: var(--pg-text) !important; font-size: 14.5px; } .pgi-fp img { width: 64px; height: 64px; object-fit: cover; } .pgi-fp b { display: block; color: var(--pg-red); font-size: 14.5px; }
.pgi-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; position: relative; } .pgi-pager .page-numbers { min-width: 40px; height: 40px; border: 1px solid var(--pg-line); border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--pg-ink); } .pgi-pager .current { background: var(--pg-red); color: #fff; border-color: var(--pg-red); } .pgi-pager p { position: absolute; right: 0; margin: 0 !important; color: var(--pg-muted); }
/* sản phẩm */
.pgi-pgrid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; padding-bottom: 14px; } .pgi-gmain img { width: 100%; height: 470px; object-fit: cover; border-radius: 6px; display: block; } .pgi-gthumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; } .pgi-gthumbs img { width: 100%; height: 124px; object-fit: cover; border-radius: 4px; }
.pgi-ptag { display: inline-block; background: #EAF4D8; color: var(--pg-ink) !important; font-size: 14px !important; font-weight: 600; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; margin: 0 0 8px !important; } .pgi-ptitle { color: var(--pg-ink) !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 0 6px !important; }
.pgi-psub { color: var(--pg-text) !important; font-size: 21px !important; margin: 0 0 6px !important; } .pgi-price { color: var(--pg-red) !important; font-size: 34px !important; font-weight: 800; margin: 0 !important; } .pgi-pnote { color: var(--pg-muted) !important; font-size: 15px !important; margin: 0 0 10px !important; } .pgi-short { color: var(--pg-text); font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.pgi-specs { width: 100%; border: 1.5px solid #CFE3AE; border-radius: 4px; border-collapse: separate; border-spacing: 0; margin: 0 0 14px; } .pgi-specs th, .pgi-specs td { padding: 7px 18px !important; font-size: 15.5px; border-bottom: 1px solid #E3EDD2 !important; text-transform: none; letter-spacing: 0; } .pgi-specs th { width: 34%; background: #F4F9EC; color: var(--pg-ink); font-weight: 600; border-right: 1px solid #E3EDD2; } .pgi-specs td { color: var(--pg-text); } .pgi-specs tr:last-child th, .pgi-specs tr:last-child td { border-bottom: 0 !important; }
.pgi-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px !important; } .pgi-acts a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; border-radius: 6px; font-size: 20px; font-weight: 700; } .pgi-acts img { width: 26px; height: 26px; } .pgi-call { background: var(--pg-red); color: #fff !important; } .pgi-chat { border: 1.5px solid var(--pg-red); color: var(--pg-red) !important; }
.pgi-qq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; background: #F2F8E6; border-radius: 8px; padding: 16px 22px; margin: 0; } .pgi-qq h3 { grid-column: 1 / 3; color: var(--pg-ink) !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 !important; }
.pgi-qq label { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--pg-line); border-radius: 6px; padding: 0 14px; margin: 0; } .pgi-qq label img { width: 22px; height: 22px; } .pgi-qq input { border: 0 !important; box-shadow: none !important; margin: 0 !important; height: 44px !important; font-size: 16px !important; }
.pgi-qq button { grid-column: 1 / 3; background: var(--pg-red); color: #fff; border: 0; border-radius: 6px; min-height: 46px; font-size: 19px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; } .pgi-qq small { grid-column: 1 / 3; text-align: center; color: var(--pg-muted); font-size: 14.5px; }
.pgi-tabs { padding-top: 20px; padding-bottom: 10px; } .pgi-tabnav { display: flex; gap: 50px; border-bottom: 1px solid var(--pg-line); margin: 0 0 16px !important; } .pgi-tabnav a { color: var(--pg-muted) !important; font-size: 21px; padding-bottom: 8px; } .pgi-tabnav a.on { color: var(--pg-red) !important; font-weight: 700; box-shadow: inset 0 -3px 0 var(--pg-red); }
.pgi-tab { display: none; } .pgi-tab.on { display: block; } .pgi-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } .pgi-desc h2 { color: var(--pg-ink) !important; font-size: 33px !important; font-weight: 700 !important; margin: 0 0 12px !important; } .pgi-desc p { color: var(--pg-text); font-size: 17px; line-height: 1.6; } .pgi-desc > img { width: 100%; height: 310px; object-fit: cover; border-radius: 6px; }
.pgi-guide { color: var(--pg-text); font-size: 17px; line-height: 1.8; } .pgi-rel { padding-bottom: 24px; }
@media (max-width: 849px) {
  .pgi-thero, .pgi-pgrid, .pgi-cgrid, .pgi-desc, .pgc-2 { grid-template-columns: 1fr; } .pgi-thero .pg-hero-in { height: auto; padding: 30px 20px; } .pgi-thero .pg-hero-img { height: 220px; } .pgi-thero .pg-hero-title, .pgi-hero .pg-hero-title { font-size: 32px !important; }
  .pgi-4, .pgi-sols, .pgi-ct3 { grid-template-columns: 1fr; } .pgi-big { font-size: 34px !important; } .pgi-maph { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pgi-cat-head { flex-wrap: wrap; } .pgi-count { margin: 0 !important; } .pgi-grid3 { grid-template-columns: 1fr 1fr; } .pgi-pager p { position: static; }
  .pgi-gmain img { height: 320px; } .pgi-gthumbs img { height: 76px; } .pgi-ptitle { font-size: 28px !important; } .pgi-acts, .pgi-qq { grid-template-columns: 1fr; } .pgi-qq h3, .pgi-qq button, .pgi-qq small { grid-column: auto; } .pgi-tabnav { gap: 16px; overflow-x: auto; } .pgi-tabnav a { font-size: 16px; white-space: nowrap; }
}
.wpcf7 .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]), .wpcf7 select, .wpcf7 textarea { width: 100% !important; max-width: 100% !important; }

@media (min-width: 850px) { .pgi-rel .pg-head { align-items: baseline; } .pgi-rel .pg-hsub { flex: 1 1 0; min-width: 0; } .pgi-rel .pg-h2 { flex: 0 0 auto; width: max-content !important; max-width: 60%; white-space: nowrap; } .pgi-rel .pg-all { white-space: nowrap; } }
@media (min-width: 1200px) { .pgi-ct3 a[href^="mailto"], .pgi-cards a[href^="mailto"] { white-space: nowrap; font-size: 15px; } }

/* cf7-pair: CF7 bọc 2 nhãn liền nhau trong 1 <p> -> lưới 2 cột chỉ còn 1 con */
.wpcf7-form div > p:has(> label ~ label) { display: contents; }