/* phukiendienthoai: khớp mockup (10-31) — lớp pk-* trong home-m.css không khớp lớp pd-* của shortcode -> áp ở đây */
#top-bar .flex-row { justify-content: center; } #top-bar .flex-left { flex: 0 1 auto; } #top-bar .flex-center, #top-bar .flex-right { display: none; }
.pd-tb { color: #1c1c1c !important; font-size: 14px; font-weight: 700; } .pd-tb a { color: #1c1c1c !important; } .pd-tb img { width: 22px; vertical-align: -5px; margin-right: 6px; }
#logo, #logo a { width: 270px !important; } #header #logo a { height: 72px !important; }
#header .header-main .flex-left { flex: 1 1 auto; justify-content: center; padding: 0 40px 0 50px; } #header .header-main .flex-left .header-search-form { width: 100%; max-width: 860px; }
#header .header-search-form .search-field { height: 48px !important; font-size: 15px; padding-left: 18px; } #header .header-search-form .ux-search-submit { height: 48px !important; width: 58px; }
#header .cart-item > a { display: inline-flex; align-items: center; gap: 10px; color: #1c1c1c !important; font-size: 16px; font-weight: 500; text-transform: none; } #header .cart-item .header-cart-title { font-size: 16px; font-weight: 500; color: #1c1c1c; text-transform: none; } #header .cart-item i.icon-shopping-bag, #header .cart-item i { font-size: 26px !important; }
.header-bottom { background: #ffd91a !important; border: 0 !important; min-height: 50px; } #header .header-bottom-nav { justify-content: space-around !important; width: 100%; } #header .header-bottom-nav > li { flex: 1; text-align: center; margin: 0; position: relative; } #header .header-bottom-nav > li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 18px; margin-top: -9px; border-left: 1px solid rgba(0,0,0,.25); } #header .header-bottom-nav > li > a { color: #1c1c1c !important; font-size: 15.5px !important; font-weight: 600; justify-content: center; }
.pk-hg { grid-template-columns: 1.6fr 1fr; gap: 12px; } .pk-hb { min-height: 390px; background-color: #fde98a; background-size: auto 100% !important; background-position: right center !important; position: relative; } .pk-hb::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, #fdeb99 0%, #fdeb99 30%, rgba(253,235,153,0) 46%); } .pk-ht { position: relative; z-index: 1; padding-left: 34px; }
.pk-h1 { font-size: 54px !important; line-height: 1.14 !important; } .pk-ht p { font-size: 19px; margin-bottom: 26px; } a.pk-btn { min-height: 48px; font-size: 15px; }
.pk-hs { gap: 12px; } a.pk-sb { min-height: 189px; padding: 0 26px; background-size: auto 92%; background-position: right 10px center; } .pk-sb b { font-size: 25px; } .pk-sb span { font-size: 17px; } .pk-sb i { font-size: 46px; padding: 6px 18px; margin-top: 6px; } .pk-sb.pk-g { background-color: #f3eee7 !important; }
.pd-usp > div { justify-content: center; } .pd-usp b { color: #1c1c1c; font-size: 15px; } .pd-usp em { font-size: 13px; color: #8a8a8a; } .pd-usp img { width: 40px !important; height: 40px !important; }
.pd-sec.pd-prodsec { padding: 30px 0 10px !important; } .pd-hd { margin-bottom: 18px; } .pd-hd h2 { font-size: 32px !important; padding-bottom: 8px; position: relative; } .pd-hd h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: #ffd91a; } a.pd-all { font-size: 14px; color: #1c1c1c !important; font-weight: 500; }
.pd-g .b9-pc { border: 1px solid #eee !important; border-radius: 4px; overflow: hidden; --pc-pad: 0px; } .pd-g .b9-pc-img, .pd-g .b9-pc > a:first-child { background: #f4f4f4; } .pd-g .b9-pc-b, .pd-g .b9-pc-in { padding: 12px 12px 14px; }
.pd-g .b9-pc-t, .pd-g .b9-pc-t a { font-size: 14.5px !important; color: #1c1c1c !important; font-weight: 400 !important; text-align: left !important; } .pd-g .b9-pc-p { text-align: left !important; color: #e8263f !important; font-size: 17px !important; font-weight: 700; } .pd-g .b9-pc-p del { display: none; } .pd-g .b9-pc-p ins { text-decoration: none; color: #e8263f; }
.pd-g .b9-pc-btn { grid-template-columns: 1fr 1.25fr !important; gap: 8px; } .pd-g a.b9-btn { background: #fff !important; color: #1c1c1c !important; border: 1px solid #d0d0d0 !important; border-radius: 4px; min-height: 36px; font-size: 13px !important; font-weight: 500; } .pd-g a.b9-btn-o { background: #ffd91a !important; color: #1c1c1c !important; border: 1px solid #ffd91a !important; font-weight: 700; }
.b9-bd { background: #e8263f !important; color: #fff !important; }
.pk-brands { padding: 30px 0 !important; } .pk-bs { justify-content: space-between; background: #f1f1f1; padding: 18px 26px; font-size: 13px; color: #777; } .pk-bs b { color: #1c1c1c; } .pk-bs span + span, .pk-bs b + span { border-left: 1px solid #d6d6d6; padding-left: 26px; }
section.pk-band { max-width: 1290px; margin: 0 auto 10px; border-radius: 6px; overflow: hidden; min-height: 240px; background: #1c1c1c !important; } .pk-band .section-bg { left: 40% !important; width: 60% !important; } .pk-band .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1c1c1c 0%, rgba(28,28,28,.6) 18%, rgba(28,28,28,0) 45%); } .pk-band .section-content { position: relative; z-index: 2; } .pk-band .row { min-height: 240px; align-items: center; }
.pk-bi { padding: 30px 0 30px 14px !important; } .pk-bi h2 { font-size: 38px !important; font-weight: 800 !important; } .pk-bi p { font-size: 20px !important; margin-bottom: 22px !important; }
.pd-news { padding: 34px 0 44px !important; } .pd-news .b9-po { border: 0 !important; background: transparent !important; border-radius: 0; } .pd-news .b9-po-img img { aspect-ratio: 1.95 / 1; border-radius: 4px; } .pd-news .b9-po-b { padding: 12px 0 0 !important; display: flex; flex-direction: column; }
.pd-news .b9-po-tag { order: 2; background: none !important; color: #888 !important; padding: 0; margin: 2px 0 8px; font-weight: 400; font-size: 13.5px; } .pd-news .b9-po-t { order: 1; margin: 0; } .pd-news .b9-po-t a { font-size: 16.5px; color: #1c1c1c !important; font-weight: 600; } .pd-news .b9-po-e { display: none; } .pd-news .b9-more { order: 3; color: #1c1c1c !important; font-size: 13.5px; text-decoration: underline; }
.pd-ft { border-top: 6px solid #ffd91a; } .pd-ft-soc span { display: none; } .pd-ft-soc img { width: 34px !important; height: 34px !important; } .pd-ft-logo { height: 70px; }
@media (max-width: 849px) {
  #logo, #logo a { width: 190px !important; } #header #logo a { height: 54px !important; }
  #header .header-bottom-nav > li + li::before { display: none; }
  .pk-hg { grid-template-columns: 1fr; } .pk-hb { min-height: 300px; background-size: cover !important; } .pk-hb::before { background: linear-gradient(90deg, rgba(253,235,153,.95) 0%, rgba(253,235,153,.75) 55%, rgba(253,235,153,.1) 100%); } .pk-ht { padding-left: 18px; } .pk-h1 { font-size: 32px !important; } .pk-ht p { font-size: 16px; }
  a.pk-sb { min-height: 140px; } .pk-sb b { font-size: 20px; } .pk-sb i { font-size: 34px; }
  .pd-hd h2 { font-size: 24px !important; } .pd-g .b9-pc-btn { grid-template-columns: 1fr !important; }
  section.pk-band { margin: 0 12px 10px; } .pk-band .section-bg { left: 0 !important; width: 100% !important; } .pk-band .section-bg::after { background: rgba(28,28,28,.72); } .pk-bi h2 { font-size: 26px !important; } .pk-bi p { font-size: 16px !important; }
  .pk-bs { flex-direction: column; gap: 8px; } .pk-bs span + span, .pk-bs b + span { border-left: 0; padding-left: 0; }
}
#top-bar .flex-left { flex: 1 1 auto !important; } #top-bar .nav-left { justify-content: center !important; width: 100%; }
#wide-nav .flex-center, .header-bottom .flex-center { flex: 1 1 auto !important; max-width: none !important; } #header .header-bottom-nav > li > a { white-space: nowrap; }
/* ruler:manual */
@media (min-width: 850px) { .pk-h1 { font-size: 60px !important; } .pd-news .b9-po-t a { font-size: inherit; } .pd-g .b9-pc-t a { font-size: inherit !important; } .pd-g .b9-pc-p { font-size: 19px !important; } .pd-g a.b9-btn { font-size: 14px !important; min-height: 40px; } .pd-hd h2 { font-size: 38px !important; } .pk-bi h2 { font-size: 46px !important; } a.pd-all { font-size: 15.5px; } }
@media (min-width: 850px) { .pk-bi h2 { white-space: nowrap; } .pk-band .col:first-child { flex-basis: 70% !important; max-width: 70% !important; } }
@media (max-width: 849px) { section.pk-band { width: auto !important; max-width: calc(100% - 24px) !important; } }
.pd-tb img { width: 28px !important; }
.pd-usp em, .pd-news .b9-po-tag, .pk-bs span { color: #666 !important; } .b9-bd { background: #d4182f !important; } .pk-bs { font-size: 14px; }
.pk-bi { padding: 40px 0 40px 14px !important; } .pk-band .row { min-height: 0; }