/* Giao dien moi phucanhnguyen.com - phoi mau menh Hoa: do chu dao, cam keu goi, xanh la (Moc sinh Hoa) diem nhan, tranh xanh duong/den */

/* ===== Trang gioi thieu ===== */
.page-id-91 #main { background: var(--pan-bg); }
.pan-gt { padding-top: 14px; padding-bottom: 6px; }
.pan-gt-hero { background: linear-gradient(120deg, #fff7f0 0%, #fff 60%); border: 1px solid #fbe3d0; border-radius: 10px; padding: 26px 28px; margin-bottom: 14px; }
.pan-gt-tag { display: inline-block; background: var(--pan-g); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; }
.pan-gt-hero h1 { font-size: 30px; font-weight: 800; color: var(--pan-txt); margin: 10px 0 6px; }
.pan-gt-hero > p { font-size: 15.5px; color: var(--pan-mut); max-width: 760px; margin-bottom: 18px; }
.pan-gt-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pan-gt-so div { background: #fff; border: 1px solid var(--pan-line); border-radius: 8px; padding: 12px 14px; }
.pan-gt-so b { display: block; font-size: 22px; font-weight: 800; color: var(--pan-g); line-height: 1.2; }
.pan-gt-so span { font-size: 13px; color: var(--pan-mut); }
.pan-gt-nd p { font-size: 15px; line-height: 1.7; margin-bottom: .8em; }
.pan-gt-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pan-gt-mem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border: 1px solid var(--pan-line); border-radius: 10px; padding: 18px 10px; }
.pan-gt-av { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #e0401a, #9e0f15); margin-bottom: 6px; }
.pan-gt-mem b { font-size: 15.5px; }
.pan-gt-mem small { font-size: 13px; color: var(--pan-mut); }
.pan-gt-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fff; border-left: 4px solid var(--pan-g); border-radius: 8px; padding: 16px 20px; margin-bottom: 14px; }
.pan-gt-cta b { display: block; font-size: 17px; }
.pan-gt-cta span { font-size: 14px; color: var(--pan-mut); }
.pan-cta-lg a { height: 42px; font-size: 15px; padding: 0 18px; }
.pan-gt-cta span a { color: var(--pan-g); font-weight: 600; }
.pan-gt-lv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pan-gt-lv a { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--pan-line); border-top: 3px solid var(--pan-g); border-radius: 8px; padding: 12px 14px; color: var(--pan-txt) !important; transition: .15s; }
.pan-gt-lv a:hover { box-shadow: 0 6px 16px rgba(0,0,0,.07); border-color: #f3c1bd; border-top-color: var(--pan-g); }
.pan-gt-lv b { font-size: 15.5px; }
.pan-gt-lv span { font-size: 13.5px; color: var(--pan-mut); line-height: 1.55; }
.pan-gt-qt { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; counter-reset: qt; }
.pan-gt-qt li { counter-increment: qt; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 44px 10px 12px; margin: 0; background: #fff7f0; border-radius: 8px; text-align: center; }
.pan-gt-qt li::before { content: counter(qt); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--pan-g); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.pan-gt-qt b { font-size: 14px; }
.pan-gt-qt span { font-size: 12.5px; color: var(--pan-mut); line-height: 1.5; }
.pan-gt-vs { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.pan-gt-vs li { position: relative; padding-left: 26px; margin: 0; font-size: 14.5px; line-height: 1.55; }
.pan-gt-vs li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--pan-moc); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.pan-gt-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pan-gt-3 div { background: #fff; border-radius: 8px; padding: 16px 18px; border-left: 4px solid var(--pan-r); }
.pan-gt-3 b { display: block; font-size: 16px; text-transform: uppercase; color: var(--pan-g); margin-bottom: 4px; }
.pan-gt-3 span { font-size: 14px; color: var(--pan-txt); line-height: 1.55; }
@media (max-width: 849px) {
  .pan-gt-hero { padding: 18px 16px; }
  .pan-gt-hero h1 { font-size: 22px; }
  .pan-gt-so { grid-template-columns: 1fr 1fr; }
  .pan-gt-team { grid-template-columns: 1fr; }
  .pan-gt-lv, .pan-gt-vs, .pan-gt-3 { grid-template-columns: 1fr; }
  .pan-gt-qt { grid-template-columns: 1fr 1fr; }
}

/* ===== Trang tai lieu & phan mem (/tai-ve/) ===== */
.pan-tv { max-width: 1000px; margin: 0 auto 30px; }
.pan-tv-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.pan-tv-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.pan-tv-head p { margin: 0; color: var(--pan-mut); font-size: 14px; }
.pan-tv-head p a { color: var(--pan-price); font-weight: 700; }
.pan-tv-tim { max-width: 280px; height: 40px; margin: 0; border: 1.5px solid var(--pan-line); border-radius: 8px; box-shadow: none; font-size: 14px; }
.pan-tv-tim:focus { border-color: var(--pan-g); }
.pan-tv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pan-tv-tabs button { margin: 0; min-height: 0; padding: 6px 14px; border-radius: 16px; border: 1px solid var(--pan-line); background: #fff; color: var(--pan-txt); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.pan-tv-tabs button span { font-size: 11.5px; color: var(--pan-mut); }
.pan-tv-tabs button.on { background: var(--pan-g); border-color: var(--pan-g); color: #fff; }
.pan-tv-tabs button.on span { color: #fde2e0; }
.pan-tv-grid { display: grid; gap: 6px; }
.pan-tv-i { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--pan-line); border-radius: 8px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
.pan-tv-i:hover { border-color: #f3c1bd; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.pan-tv-i[hidden] { display: none; }
.pan-tv-ic { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; }
.pan-tv-ic svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
.pan-tv-zip, .pan-tv-rar, .pan-tv-7z { background: #b5651d; }
.pan-tv-pdf { background: #c8161d; }
.pan-tv-doc { background: #2b579a; }
.pan-tv-xls { background: #217346; }
.pan-tv-ppt { background: #d24726; }
.pan-tv-exe, .pan-tv-iso, .pan-tv-apk { background: #5d4b44; }
.pan-tv-link { background: var(--pan-r); }
.pan-tv-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pan-tv-b b { font-size: 14.5px; line-height: 1.35; color: var(--pan-txt); }
.pan-tv-mt { color: var(--pan-mut); }
.pan-tv-meta { font-size: 12.5px; line-height: 1.4; color: #8f8580; }
.pan-tv-act { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 0 0 150px; text-align: center; }
.pan-tv-btn { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 6px; background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff !important; font-weight: 800; font-size: 14px; white-space: nowrap; }
.pan-tv-btn:hover { filter: brightness(1.06); }
.pan-tv-btn { font-size: 13.5px; }
.pan-tv-src { font-size: 11px; color: #8f8580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pan-tv-rong { text-align: center; color: var(--pan-mut); padding: 20px 0; }
@media (max-width: 549px) {
  .pan-tv-tim { max-width: none; width: 100%; }
  .pan-tv-i { flex-wrap: wrap; gap: 10px 12px; }
  .pan-tv-ic { flex-basis: 30px; }
  .pan-tv-b { flex-basis: calc(100% - 44px); }
  .pan-tv-act { flex: 0 0 100%; flex-direction: row-reverse; align-items: center; justify-content: space-between; }
  .pan-tv-btn { width: 120px; }
}
:root {
  --pan-g: #c8161d;
  --pan-g-d: #9e0f15;
  --pan-g-l: #fdeceb;
  --pan-r: #ff6a00;
  --pan-price: #d0021b;
  --pan-moc: #2e9e3e;
  --pan-bg: #f7f3f0;
  --pan-line: #ece4df;
  --pan-txt: #2b2220;
  --pan-mut: #6e625c;
}
body { color: var(--pan-txt); }
/* co chu: noi dung bai/mo ta 15px tren may tinh (dien thoai giu 16px de khong bi phong to khi go), chan trang 14px */
@media (min-width: 850px) {
  .single-product .product-section .entry-content, .single-post .entry-content, .page .entry-content { font-size: 15px; }
}
.footer-wrapper, .footer-wrapper p, .footer-wrapper li, .absolute-footer { font-size: 14px; }
.footer-wrapper .widget-title { font-size: 15px; }
.home #wrapper, .home #main, .tax-product_cat #main, .post-type-archive-product #main { background: var(--pan-bg); }
.pan-home { padding-bottom: 6px; }
.product-small .category { display: none; }

/* ===== Header ===== */
#top-bar { font-size: 13.5px; }
#top-bar .nav > li > a { font-size: 13.5px; text-transform: none; font-weight: 500; }
.pan-top-l { display: inline-flex; gap: 18px; align-items: center; color: var(--pan-mut); font-size: 13.5px; }
.pan-top-l b { color: var(--pan-price); font-size: 14.5px; font-weight: 800; }
.pan-top-i { display: inline-flex; align-items: center; gap: 6px; color: var(--pan-mut) !important; position: relative; }
.pan-top-i + .pan-top-i::before { content: ""; position: absolute; left: -10px; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: #e2d6cf; }
.pan-top-i svg { color: var(--pan-price); flex: 0 0 15px; }
a.pan-top-i:hover { color: var(--pan-g) !important; }
.pan-top-zalo i { font-style: normal; font-size: 10px; font-weight: 800; color: #fff; background: var(--pan-r); border-radius: 4px; padding: 1px 5px; line-height: 1.35; animation: pan-nhun 3s ease-in-out infinite; }
/* dien thoai: vong tron do, rung chuong + song lan toa */
.pan-top-call svg { width: 22px; height: 22px; flex: 0 0 22px; padding: 4px; border-radius: 50%; background: var(--pan-price); color: #fff !important; position: relative; animation: pan-rung 2.4s infinite; transform-origin: 50% 50%; }
.pan-top-call { padding-left: 2px; }
.pan-top-call::after { content: ""; position: absolute; left: 2px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(208,2,27,.45); animation: pan-song 2.4s infinite; pointer-events: none; }
@keyframes pan-song { 0% { box-shadow: 0 0 0 0 rgba(208,2,27,.45); } 70% { box-shadow: 0 0 0 10px rgba(208,2,27,0); } 100% { box-shadow: 0 0 0 0 rgba(208,2,27,0); } }
@keyframes pan-nhun { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-3px); } 92% { transform: translateY(0); } 96% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .pan-top-call svg, .pan-top-call::after, .pan-top-zalo i, .pan-mnav-call i { animation: none !important; } }
.header-main .header-search-form { max-width: 620px; width: 100%; }
.header-main .searchform .search-field { height: 42px; border: 2px solid var(--pan-g); border-right: 0; border-radius: 6px 0 0 6px; box-shadow: none; font-size: 14px; background: #fff; }
.header-main .searchform .button.icon { height: 42px; min-width: 56px; background: var(--pan-g) !important; color: #fff !important; border-radius: 0 6px 6px 0; margin: 0; opacity: 1; }
.header-main .searchform .button.icon i { color: #fff; }
.pan-hd-contact { display: flex; gap: 18px; align-items: center; }
.pan-hd-c { display: flex; align-items: center; gap: 8px; color: var(--pan-txt); line-height: 1.2; font-size: 12px; }
.pan-hd-c:hover { color: var(--pan-g); }
.pan-hd-c i { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pan-g-l); color: var(--pan-g); font-style: normal; font-size: 17px; }
.pan-hd-c b { display: block; font-size: 15px; color: var(--pan-price); }
.pan-hd-c.zalo i { background: #fff1e6; color: var(--pan-r); font-weight: 700; font-size: 11px; }
.pan-hd-c.zalo b { color: var(--pan-r); }

/* thanh xanh */
.header-bottom { min-height: 44px; background: linear-gradient(90deg, #c8161d 0%, #d92a1b 60%, #ea4a1c 100%) !important; }
.header-vertical-menu__opener { background: var(--pan-g-d); font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.header-vertical-menu__fly-out { border-radius: 0 0 6px 6px; overflow: visible; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a { font-size: 14px; font-weight: 500; color: var(--pan-txt); padding-left: 16px; text-transform: none; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li:hover > a { color: var(--pan-g); background: var(--pan-g-l); }
.header-vertical-menu__fly-out .nav-vertical-fly-out .sub-menu a { text-transform: none; font-size: 14px; }
/* bieu tuong menu doc (to mau theo chu: xanh, re chuot doi mau cung chu) */
.nav-sidebar > li.pan-ic > a::before,
.nav-vertical-fly-out > li.pan-ic > a::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; margin-right: 10px; background: var(--pan-moc); -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
.nav-vertical-fly-out > li.pan-ic > a { display: flex; align-items: center; }
.nav-sidebar > li.pan-ic > a { display: flex !important; align-items: center; text-transform: none; font-size: 15px; font-weight: 600; color: var(--pan-txt); }
.nav-sidebar .sub-menu a { text-transform: none; font-size: 14px; }
.pan-ic-proj   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.pan-ic-news   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E"); }
.pan-ic-info   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E"); }
.pan-ic-phone  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.pan-ic-crm    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
/* phong chu menu danh muc: Be Vietnam Pro */
.header-vertical-menu__opener, .header-vertical-menu__fly-out .nav-vertical-fly-out a, .nav-sidebar > li > a, .nav-sidebar .sub-menu a,
#shop-sidebar .pan-cdm a, .pan-cdm-t { font-family: "Be Vietnam Pro", Roboto, Arial, sans-serif; letter-spacing: 0; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a, .nav-sidebar > li.pan-ic > a, #shop-sidebar .pan-cdm-l1 > li > a { font-weight: 500; font-size: 14.5px; }
.header-vertical-menu__fly-out .nav-vertical-fly-out > li:hover > a, .nav-sidebar > li.pan-ic:hover > a, #shop-sidebar .pan-cdm-l1 > li:hover > a,
#shop-sidebar .pan-cdm-l1 > li.mo > a, #shop-sidebar .pan-cdm li.dang > a { font-weight: 600; }
.header-vertical-menu__opener { font-weight: 700; }/* bieu tuong menu: xam mo (den trang), re chuot / muc dang xem thi chuyen xanh */
.nav-vertical-fly-out > li.pan-ic > a::before, .nav-sidebar > li.pan-ic > a::before, #shop-sidebar .pan-cdm-l1 > li.pan-ic > a::before { background: #8c8480 !important; opacity: .5; transition: opacity .15s, background-color .15s; }
.nav-vertical-fly-out > li.pan-ic:hover > a::before, .nav-vertical-fly-out > li.pan-ic.current-menu-item > a::before, .nav-vertical-fly-out > li.pan-ic.current-menu-ancestor > a::before,
.nav-sidebar > li.pan-ic:hover > a::before, .nav-sidebar > li.pan-ic.active > a::before, .nav-sidebar > li.pan-ic.current-menu-item > a::before, .nav-sidebar > li.pan-ic.current-menu-ancestor > a::before,
#shop-sidebar .pan-cdm-l1 > li.pan-ic:hover > a::before, #shop-sidebar .pan-cdm-l1 > li.pan-ic.mo > a::before { background: var(--pan-moc) !important; opacity: 1; }.pan-ic-cam    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='8' rx='2'/%3E%3Cpath d='M16 9l5-2v6l-5-2M7 14v3H4m3 0v3'/%3E%3Ccircle cx='6' cy='10' r='1'/%3E%3C/svg%3E"); }
.pan-ic-wcam   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='13' r='6'/%3E%3Ccircle cx='10' cy='13' r='2.2'/%3E%3Cpath d='M7 21h6M16.5 3.5a5 5 0 0 1 4 4M16 6.5a2 2 0 0 1 1.5 1.5'/%3E%3C/svg%3E"); }
.pan-ic-home   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7M5 9.5V20h14V9.5'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 1 5 0M8 12.5a6 6 0 0 1 8 0'/%3E%3Ccircle cx='12' cy='17.5' r='.6'/%3E%3C/svg%3E"); }
.pan-ic-net    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 16.5h.01M11 16.5h.01M8 13l-2-6M16 13l2-6M9 6a4.5 4.5 0 0 1 6 0'/%3E%3C/svg%3E"); }
.pan-ic-finger { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 7.5A7 7 0 0 1 19 12v2M5 12a7 7 0 0 1 .4-2.3M8.5 20A11 11 0 0 1 8 12a4 4 0 0 1 8 0v1.5M12 12v2a13 13 0 0 0 1.5 6M16 17.5a15 15 0 0 1-.3 2.5'/%3E%3C/svg%3E"); }
.pan-ic-office { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H4a1 1 0 0 1-1-1v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1h-3'/%3E%3Crect x='7' y='14' width='10' height='7'/%3E%3C/svg%3E"); }
.pan-ic-pc     { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.pan-ic-tool   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L21 13l-8 8-3-3 8-8-1.3-1.3M9.3 17.7l-5 5M3 3l6 6M7 3L3 7'/%3E%3C/svg%3E"); }
.pan-usp { display: flex; gap: 22px; color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.pan-usp span::before { content: "✓"; display: inline-block; margin-right: 6px; font-weight: 700; color: #ffe082; }

/* ===== Hero ===== */
.pan-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; gap: 10px; height: 380px; margin-bottom: 14px; }
.pan-hero-main { position: relative; border-radius: 8px; overflow: hidden; background: #123; }
.pan-slider, .pan-slide { position: absolute; inset: 0; }
.pan-slide { background-size: cover; background-position: center; opacity: 0; transition: opacity .6s; display: flex; align-items: center; }
.pan-slide.is-active { opacity: 1; z-index: 1; }
.pan-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.pan-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(45,8,0,.82) 0%, rgba(45,8,0,.55) 45%, rgba(0,0,0,0) 80%); }
.pan-slide-txt { position: relative; max-width: 470px; padding: 0 36px; color: #fff; }
.pan-slide-tag { display: inline-block; background: var(--pan-r); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 3px; text-transform: uppercase; letter-spacing: .3px; }
.pan-slide-h { color: #fff; font-size: 28px; line-height: 1.25; margin: 12px 0 8px; font-weight: 800; }
.pan-slide-txt p { font-size: 15px; margin: 0 0 18px; color: #f8ece6; }
.pan-slide-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pan-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 6px; font-weight: 700; font-size: 14px; }
.pan-btn-w { background: #fff; color: var(--pan-g-d) !important; }
.pan-btn-r { background: var(--pan-r); color: #fff !important; }
.pan-btn:hover { filter: brightness(1.07); }
.pan-dots { position: absolute; z-index: 3; left: 36px; bottom: 16px; display: flex; gap: 6px; }
.pan-dots button { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); padding: 0; margin: 0; min-height: 0; border: 0; }
.pan-dots button.is-active { background: #fff; width: 36px; }
.pan-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.pan-mini { border-radius: 8px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff !important; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.pan-mini b { font-size: 17px; line-height: 1.3; position: relative; }
.pan-mini span { font-size: 13px; opacity: .92; position: relative; }
.pan-mini em { font-style: normal; font-weight: 700; font-size: 13px; margin-top: 10px; position: relative; color: #ffe27a; }
.pan-mini-g { background: linear-gradient(135deg, #fff7ef 0%, #ffe9d6 100%); justify-content: center; color: var(--pan-txt) !important; border: 1px solid #ffd9b8; }
.pan-mini-g b { color: var(--pan-g-d); } .pan-mini-g span { color: var(--pan-mut); opacity: 1; } .pan-mini-g em { color: var(--pan-r); }
.pan-mini-g::after { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; border: 22px solid rgba(255,106,0,.08); }
.pan-mini-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 65%); }
.pan-mini:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }

/* ===== Khung trang (khoi trang) ===== */
.pan-box, .pan-block { background: #fff; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.pan-sec-title { font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--pan-txt); margin: 0 0 12px; }

/* nganh hang */
.pan-cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
@media (max-width: 1199px) { .pan-cats { grid-template-columns: repeat(6, 1fr); } }
.pan-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--pan-line); border-radius: 8px; text-align: center; color: var(--pan-txt) !important; transition: .15s; }
.pan-cat:hover { border-color: var(--pan-g); box-shadow: 0 4px 12px rgba(200,22,29,.12); }
.pan-cat-img { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.pan-cat-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pan-cat-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }

/* dai ly */
.pan-dealer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; color: var(--pan-txt); border-left: 4px solid var(--pan-g); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
.pan-dealer-t { font-weight: 800; text-transform: uppercase; font-size: 15px; color: var(--pan-g); }
.pan-dealer-b { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.pan-dealer-b b { background: var(--pan-bg); border: 1px solid var(--pan-line); color: var(--pan-txt); border-radius: 4px; padding: 6px 12px; font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.pan-cta { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pan-cta a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; font-weight: 700; font-size: 13.5px; }
.pan-cta-call { background: var(--pan-r); color: #fff !important; }
.pan-cta-zalo { background: #fff; color: var(--pan-r) !important; border: 1.5px solid var(--pan-r); }

/* khoi san pham */
.pan-block-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 2px solid var(--pan-line); padding-bottom: 10px; margin-bottom: 12px; }
.pan-block-head > .pan-block-title { flex: 0 0 auto; width: auto; }
.pan-block-title { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--pan-txt); position: relative; }
.pan-block-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--pan-g); }
.pan-block-kids { display: flex; gap: 6px; flex-wrap: wrap; }
.pan-block-kids a { font-size: 13px; padding: 4px 10px; border: 1px solid var(--pan-line); border-radius: 14px; color: var(--pan-mut); }
.pan-block-kids a:hover { border-color: var(--pan-g); color: var(--pan-g); }
.pan-block-all { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--pan-g) !important; }
.pan-block-deal { background: linear-gradient(180deg, #fff3e6 0, #fff 90px); border: 1px solid #ffd4ad; }
.pan-block-deal .pan-block-title { color: var(--pan-r); }
.pan-block-deal .pan-block-title::before { content: "⚡"; margin-right: 6px; }
.pan-block-deal .pan-block-title::after { background: var(--pan-r); }
.pan-block-body .row { margin-left: -5px !important; margin-right: -5px !important; }

/* the san pham (ap dung ca trang danh muc) */
.product-small.col { padding-bottom: 10px; }
.product-small .col-inner { height: 100%; }
.product-small .box { background: #fff; border: 1px solid var(--pan-line); border-radius: 8px; overflow: hidden; height: 100%; transition: box-shadow .15s, border-color .15s; display: flex; flex-direction: column; }
.product-small .box:hover { border-color: #f3c1bd; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.product-small .box-image { padding: 8px; background: #fff; width: 100%; }
.product-small .box-text { padding: 6px 10px 12px; text-align: left !important; flex: 1; display: flex; flex-direction: column; }
.product-small .box-text .title-wrapper { flex: 1; }
.product-small .name.product-title { font-size: 14px; line-height: 1.35; height: 2.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0 0 6px; }
.product-small .name.product-title a { color: var(--pan-txt); }
.product-small .price-wrapper .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.product-small .price ins { order: 1; text-decoration: none; }
.product-small .price del { order: 2; font-size: 12.5px; color: #8a949a; opacity: 1; }
.product-small .price ins .amount, .product-small .price > .amount { font-size: 16px; font-weight: 800; color: var(--pan-price); }
.product-small .price del .amount { color: #8a949a; }
.badge-container { margin: 8px 0 0 8px !important; }
.badge-inner.on-sale { background: var(--pan-price) !important; border-radius: 4px; font-size: 12px; font-weight: 700; padding: 2px 6px; }
.product-small .pan-glh { font-size: 12px; }

/* dich vu */
.pan-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pan-svc-i { display: flex; flex-direction: column; border: 1px solid var(--pan-line); border-radius: 8px; overflow: hidden; color: var(--pan-txt) !important; background: #fff; transition: .15s; }
.pan-svc-i:hover { border-color: var(--pan-g); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.pan-svc-img { height: 150px; background-size: cover; background-position: center; }
.pan-svc-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pan-svc-b b { font-size: 16px; }
.pan-svc-b span { font-size: 13.5px; color: var(--pan-mut); line-height: 1.45; flex: 1; }
.pan-svc-b em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--pan-g); }

/* cam ket */
.pan-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pan-promise-i { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 8px; padding: 14px 16px; color: var(--pan-moc); }
.pan-promise-i span { display: flex; flex-direction: column; color: var(--pan-txt); }
.pan-promise-i b { font-size: 14.5px; }
.pan-promise-i small { font-size: 12.5px; color: var(--pan-mut); }

/* tin tuc */
.pan-box .post-item .box-text { padding: 10px 2px; }
.pan-box .post-item .post-title { font-size: 15px; line-height: 1.35; }

/* ===== Man hinh nho ===== */
@media (max-width: 1100px) {
  .pan-hero { grid-template-columns: 240px minmax(0, 1fr); }
  .pan-hero-side { display: none; }
  .pan-usp span:nth-child(n+3) { display: none; }
}
@media (max-width: 849px) {
  .pan-hero { grid-template-columns: 1fr; height: auto; gap: 8px; }
  .pan-hero-space { display: none; }
  .pan-hero-main { height: 230px; }
  .pan-hero-side { display: grid; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .pan-mini { min-height: 110px; padding: 12px; }
  .pan-mini b { font-size: 14px; }
  .pan-mini span, .pan-mini em { font-size: 12px; }
  .pan-slide-txt { padding: 0 18px; }
  .pan-slide-h { font-size: 19px; margin: 8px 0 6px; }
  .pan-slide-txt p { font-size: 13px; margin-bottom: 12px; }
  .pan-btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .pan-dots { left: 18px; bottom: 10px; }
  .pan-cats { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .pan-cat { flex: 0 0 23%; scroll-snap-align: start; }
  .pan-cat-img { width: 56px; height: 56px; }
  .pan-cat-name { font-size: 13px; }
  .pan-svc, .pan-promise { grid-template-columns: 1fr 1fr; }
  .pan-svc-img { height: 110px; }
  .pan-box, .pan-block { padding: 12px 10px; border-radius: 6px; }
  .pan-block-title, .pan-sec-title { font-size: 16px; }
  .pan-block-kids { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .pan-block-kids a { white-space: nowrap; }
  .pan-dealer { padding: 10px 12px; gap: 8px; }
  .pan-dealer .pan-cta { display: none; }
  .pan-dealer-t { font-size: 13px; width: 100%; }
  .pan-dealer-b { gap: 5px; }
  .pan-dealer-b b { padding: 3px 8px; font-size: 12.5px; }
  .pan-block-body .product-small:nth-child(n+7) { display: none; }
}
@media (max-width: 549px) {
  .pan-cat { flex-basis: 28%; }
  .pan-promise-i { padding: 10px; gap: 8px; }
  .pan-promise-i svg { width: 26px; height: 26px; }
  .pan-promise-i b { font-size: 13px; }
  .pan-promise-i small { font-size: 11.5px; }
}

/* ===== Trang chi tiet san pham ===== */
.single-product #main { background: var(--pan-bg); }
.single-product .product-main { background: #fff; border-radius: 8px; margin: 12px auto 14px; max-width: 1240px; padding: 18px 6px 10px; }
.single-product .product-info .breadcrumbs { font-size: 12.5px; text-transform: none; }
.single-product .product-title { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--pan-txt); }
.single-product .product-info .is-divider { display: none; }
.pan-sp-ma { font-size: 13px; color: var(--pan-mut); margin: -4px 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.pan-sp-ma span { color: var(--pan-line); }
.pan-sp-ma a { color: var(--pan-g); font-weight: 600; }
.pan-sp-gia { background: linear-gradient(90deg, #fff4ee, #fff); border: 1px solid #ffe0cf; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.pan-sp-gia-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pan-sp-gia-now, .pan-sp-gia-now .amount { font-size: 28px; font-weight: 800; color: var(--pan-price); line-height: 1.1; }
.pan-sp-gia del { color: #8f8580; font-size: 15px; }
.pan-sp-gia-off { background: var(--pan-price); color: #fff; font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 4px; }
.pan-sp-gia-save { font-size: 13.5px; color: var(--pan-mut); margin-top: 4px; }
.pan-sp-gia-save b { color: var(--pan-price); }
.pan-sp-gia-ny { font-size: 12.5px; color: var(--pan-mut); margin-top: 4px; }
.pan-sp-gia-lh { font-size: 15px; }
.pan-sp-gia-lh b { color: var(--pan-price); font-size: 18px; }
.single-product .product-short-description { font-size: 14.5px; line-height: 1.6; }
.single-product .product-short-description p { margin-bottom: .4em; }
.pan-sp-kho { font-size: 14px; margin: 8px 0 12px; }
.pan-sp-kho .con { color: var(--pan-moc); }
.pan-sp-kho .het { color: var(--pan-r); }
.pan-sp-kho { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pan-sp-bh b { color: var(--pan-moc); }
.pan-sp-side-sub { font-size: 12.5px; color: var(--pan-mut); margin: 6px 0 0; }
/* mo ta + khung "san pham ban dang xem" dung yen khi cuon */
.pan-pf { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.pan-pf-side { position: sticky; top: 16px; }
.pan-dangxem { background: #fff; border: 1.5px dashed #f5b38f; border-radius: 8px; padding: 14px 16px 16px; text-align: center; margin-bottom: 14px; }
.pan-dangxem-t { font-weight: 800; text-transform: uppercase; font-size: 15px; color: var(--pan-g); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--pan-line); }
.pan-dangxem-img img { width: 100%; max-width: 230px; aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.pan-dangxem-n { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 8px 0 6px; color: var(--pan-txt); }
.pan-dangxem-p { display: flex; justify-content: center; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pan-dangxem-p b, .pan-dangxem-p b .amount { font-size: 22px; font-weight: 800; color: var(--pan-price); }
.pan-dangxem-p del { color: #8f8580; font-size: 14px; }
.pan-dangxem-bh { font-size: 13px; color: var(--pan-moc); font-weight: 600; margin-top: 4px; }
.pan-dangxem-mua { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 12px; border-radius: 8px; background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff !important; font-weight: 800; font-size: 16px; box-shadow: 0 3px 10px rgba(240,90,0,.25); }
.pan-dangxem-zalo { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--pan-r) !important; }
@media (max-width: 849px) { .pan-pf { display: block; } .pan-pf-side { display: none; } }
/* cot phai trang san pham: 4 khung mau */
.pan-sp-side.pan-side-a { display: flex; gap: 12px; align-items: center; background: #edf6ea; border-color: #d7ebd1; }
.pan-side-a i { color: #2d3a2f; flex: 0 0 52px; display: flex; } .pan-side-a i svg { width: 52px; height: 52px; }
.pan-side-a b { display: block; text-transform: uppercase; font-size: 13.5px; color: var(--pan-txt); margin-bottom: 2px; }
.pan-side-a span { font-size: 13px; color: var(--pan-mut); line-height: 1.45; }
.pan-sp-side.pan-side-ck { background: #fff7f0; border-color: #fbe3d0; }
.pan-side-ck-t { font-weight: 800; font-size: 14px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px dashed #e9b99a; }
.pan-side-ck-t .r { color: var(--pan-g); } .pan-side-ck-t .g { color: var(--pan-moc); }
.pan-side-ck ul { list-style: none; margin: 0; }
.pan-side-ck li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; text-transform: uppercase; margin: 0 0 10px; color: var(--pan-txt); }
.pan-side-ck li svg { flex: 0 0 24px; }
.pan-sp-side.pan-side-ht { background: #fffbea; border-color: #f5e8b8; }
.pan-side-ht-t { text-transform: uppercase; color: var(--pan-mut); font-size: 13.5px; margin-bottom: 8px; }
.pan-side-ht-l { font-size: 13.5px; margin-bottom: 6px; line-height: 1.5; }
.pan-side-ht-l a { color: var(--pan-price) !important; font-weight: 800; font-size: 15px; }
.pan-sp-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-bottom: 14px; }
.pan-sp-btns a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 8px; padding: 9px 8px; line-height: 1.25; min-height: 58px; }
.pan-sp-btns b { font-size: 16px; letter-spacing: .3px; }
.pan-sp-btns span { font-size: 12.5px; font-weight: 400; opacity: .95; }
.pan-sp-call { background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff !important; box-shadow: 0 3px 10px rgba(240,90,0,.25); }
.pan-sp-zalo { background: #fff; color: var(--pan-g) !important; border: 2px solid var(--pan-g); }
.pan-sp-btns a:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pan-sp-ud { border: 1px dashed #f5b38f; background: #fffaf6; border-radius: 8px; padding: 10px 14px 6px; margin-bottom: 12px; }
.pan-sp-ud-t { font-weight: 800; color: var(--pan-g); font-size: 14.5px; margin-bottom: 6px; }
.pan-sp-ud ul { margin: 0; list-style: none; }
.pan-sp-ud li { font-size: 14px; margin: 0 0 5px; padding-left: 22px; position: relative; }
.pan-sp-ud li::before { content: "✓"; position: absolute; left: 2px; color: var(--pan-moc); font-weight: 800; }
.single-product .product_meta { font-size: 12.5px; }
.single-product .product_meta .tagged_as { display: none; }
#product-sidebar { padding-top: 4px; }
.pan-sp-side { border: 1px solid var(--pan-line); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.pan-sp-side-t { font-weight: 800; text-transform: uppercase; font-size: 13.5px; color: var(--pan-g); margin-bottom: 8px; }
.pan-sp-side ul { list-style: none; margin: 0; }
.pan-sp-ck li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin: 0 0 9px; }
.pan-sp-ck svg { color: var(--pan-moc); flex: 0 0 22px; }
.pan-sp-ht li { font-size: 13px; color: var(--pan-mut); margin: 0 0 8px; }
.pan-sp-ht a { display: block; font-size: 17px; font-weight: 800; color: var(--pan-price) !important; }
.single-product .product-footer { background: transparent; }
.single-product .product-footer .container { max-width: 1240px; }
.single-product .product-section { background: #fff; border-radius: 8px; padding: 6px 18px 14px; margin-bottom: 14px; border: 0 !important; }
.single-product .product-section-title { font-size: 18px !important; font-weight: 800; text-transform: uppercase; color: var(--pan-txt) !important; border-left: 4px solid var(--pan-g); padding-left: 10px; margin: 12px 0 14px !important; letter-spacing: 0 !important; }
.single-product .product-section .large-10, .single-product .product-section .large-2 { flex-basis: 100%; max-width: 100%; padding-bottom: 0; }
.single-product .product-main, .single-product .product-footer .container { max-width: 1210px; }
.single-product .product-section .large-2 h5 { font-size: 18px; font-weight: 800; color: var(--pan-txt); border-left: 4px solid var(--pan-g); padding-left: 10px; margin: 14px 0 12px; letter-spacing: 0; }
.single-product .product_meta .sku_wrapper { display: none; }
.single-product #review_form_wrapper .review-form-inner { border: 1px solid var(--pan-line) !important; border-radius: 8px; }
.pan-mota { position: relative; max-height: 720px; overflow: hidden; transition: max-height .3s; }
.pan-mota.mo { max-height: none; }
.pan-anh-bai { margin-top: 18px; }
.pan-anh-bai h3 { font-size: 17px; }
.pan-anh-bai figure { margin: 0 auto 14px; max-width: 620px; text-align: center; }
.pan-anh-bai img { width: 100%; height: auto; border: 1px solid var(--pan-line); border-radius: 8px; }
.pan-anh-bai figcaption { font-size: 13px; color: var(--pan-mut); margin-top: 6px; font-style: italic; }
.pan-mota:not(.mo)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.pan-mota-btn { display: block; margin: 10px auto 4px; background: #fff; border: 1.5px solid var(--pan-g); color: var(--pan-g); border-radius: 20px; padding: 0 22px; font-weight: 700; font-size: 14px; min-height: 36px; text-transform: none; }
.single-product .related { background: #fff; border-radius: 8px; padding: 6px 16px 10px; margin-bottom: 14px; }
.pan-daxem-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pan-daxem-i { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--pan-line); border-radius: 8px; padding: 8px; color: var(--pan-txt) !important; background: #fff; }
.pan-daxem-i:hover { border-color: #f3c1bd; }
.pan-daxem-i img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.pan-daxem-i span { font-size: 13px; line-height: 1.35; height: 2.7em; overflow: hidden; }
.pan-daxem-i b { color: var(--pan-price); font-size: 14px; }
.pan-sp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: none; grid-template-columns: 1.3fr 1fr; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
.pan-sp-bar a { display: flex; align-items: center; justify-content: center; height: 52px; font-weight: 800; font-size: 15px; }
.pan-sp-bar .c { background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff !important; }
.pan-sp-bar .z { color: var(--pan-g) !important; }
@media (max-width: 849px) {
  .pan-sp-bar { display: grid; }
  .single-product .wp-elce { display: none !important; }
  .single-product #wrapper { padding-bottom: 52px; }
  .single-product .product-main { margin: 0 0 10px; border-radius: 0; padding-top: 10px; }
  .single-product .product-title { font-size: 19px; }
  .pan-sp-gia-now, .pan-sp-gia-now .amount { font-size: 24px; }
  .pan-daxem-list { grid-template-columns: repeat(3, 1fr); }
  .single-product .product-section { padding: 4px 12px 10px; border-radius: 0; }
}

/* ===== Trang danh muc ===== */
.archive.woocommerce .category-page-title { background: transparent; }
.category-page-title .page-title-inner { padding-top: 12px; padding-bottom: 4px; min-height: 0; }
.category-page-title .breadcrumbs { font-size: 13px; text-transform: none; letter-spacing: 0; }
.category-page-title .woocommerce-result-count, .category-page-title .woocommerce-ordering { display: none !important; }
.pan-dm-head { background: #fff; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.pan-dm-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pan-dm-title { font-size: 22px; font-weight: 800; margin: 0; color: var(--pan-txt); }
.pan-dm-count { color: var(--pan-mut); font-size: 14px; }
.pan-dm-kids { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pan-dm-kids a { display: flex; align-items: center; gap: 8px; border: 1px solid var(--pan-line); border-radius: 8px; padding: 6px 12px 6px 6px; font-size: 14px; font-weight: 600; color: var(--pan-txt) !important; background: #fff; }
.pan-dm-kids a:hover { border-color: var(--pan-g); color: var(--pan-g) !important; }
.pan-dm-kids img { width: 36px; height: 36px; object-fit: contain; }
.pan-dm-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pan-line); font-size: 14px; }
.pan-dm-sort > span { color: var(--pan-mut); margin-right: 4px; white-space: nowrap; }
/* nut "Goi / Zalo de co gia tot" (tu functions.php) theo mau menh Hoa */
.pan-glh .pan-glh-t { color: var(--pan-price) !important; }
.pan-glh a.pan-glh-call { background: var(--pan-r) !important; color: #fff !important; }
.pan-glh a.pan-glh-zalo { background: #fff !important; color: var(--pan-r) !important; border: 1px solid var(--pan-r); }
.pan-dm-sort a { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--pan-line); color: var(--pan-txt) !important; }
.pan-dm-sort a.on { background: var(--pan-g); border-color: var(--pan-g); color: #fff !important; font-weight: 600; }
.pan-dm-sort a:hover:not(.on) { border-color: var(--pan-g); color: var(--pan-g) !important; }
.archive.woocommerce #shop-sidebar .widget { background: #fff; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.archive.woocommerce #shop-sidebar .widget-title { font-size: 14px; font-weight: 800; color: var(--pan-g); letter-spacing: 0; }
.archive.woocommerce #shop-sidebar .is-divider { display: none; }
.archive.woocommerce #shop-sidebar .product-categories a { text-transform: none; font-size: 14px; }
/* khung danh muc ben trai */
.archive.woocommerce #shop-sidebar .widget.pan-cdm { padding: 12px 10px 8px; }
#shop-sidebar .pan-cdm-t { font-weight: 800; text-transform: uppercase; font-size: 14px; color: var(--pan-g); padding: 0 6px 10px; margin-bottom: 4px; border-bottom: 2px solid var(--pan-line); }
#shop-sidebar .pan-cdm ul { list-style: none; margin: 0; display: block !important; }
#shop-sidebar .pan-cdm li { margin: 0; padding: 0; border-top: 0; display: block; }
#shop-sidebar .pan-cdm a { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 6px; color: var(--pan-txt) !important; font-size: 14.5px; line-height: 1.3; }
#shop-sidebar .pan-cdm a:hover { background: var(--pan-g-l); color: var(--pan-g) !important; }
#shop-sidebar .pan-cdm .n { flex: 1; }
#shop-sidebar .pan-cdm .c { font-size: 11.5px; color: var(--pan-mut); background: var(--pan-bg); border-radius: 10px; padding: 1px 7px; min-width: 24px; text-align: center; }
#shop-sidebar .pan-cdm-l1 > li { border-bottom: 1px solid #f1ebe7; }
#shop-sidebar .pan-cdm-l1 > li:last-child { border-bottom: 0; }
#shop-sidebar .pan-cdm-l1 > li.pan-ic > a::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background: var(--pan-moc); -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
#shop-sidebar .pan-cdm-l1 > li.mo > a { font-weight: 700; }
#shop-sidebar .pan-cdm-l2, #shop-sidebar .pan-cdm-l3 { padding: 0 0 6px 30px; }
#shop-sidebar .pan-cdm-l2 a, #shop-sidebar .pan-cdm-l3 a { font-size: 14px; padding: 6px 8px; color: #4d423d !important; }
#shop-sidebar .pan-cdm-l2 a::before, #shop-sidebar .pan-cdm-l3 a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #cdbfb7; flex: 0 0 5px; }
#shop-sidebar .pan-cdm-l3 { padding-left: 14px; }
#shop-sidebar .pan-cdm li.dang > a { background: var(--pan-g-l); color: var(--pan-g) !important; font-weight: 700; box-shadow: inset 3px 0 0 var(--pan-g); }
#shop-sidebar .pan-cdm li.dang > a::before { background: var(--pan-g) !important; }
#shop-sidebar .pan-cdm li.dang > a .c { background: #fff; color: var(--pan-g); }
.pan-dm-help .pan-cta { margin-top: 6px; }
#shop-sidebar .pan-cdm ul ul { border-left: 0 !important; margin-left: 0 !important; }
#shop-sidebar .widget_price_filter .button { background: var(--pan-g); border-radius: 6px; color: #fff; }
#shop-sidebar .widget_price_filter .ui-slider .ui-slider-range, #shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle { background: var(--pan-g); }
.pan-dm-mota { background: #fff; border-radius: 8px; padding: 14px 18px 10px; margin-top: 14px; }
.pan-dm-mota .pan-mota { max-height: 300px; }
.pan-dm-mota .term-description h3 { font-size: 18px; }
.pan-dm-help .pan-cta a { height: 32px; font-size: 13px; padding: 0 10px; }
.archive.woocommerce .products .product-small .box { height: 100%; }
.woocommerce-pagination .page-numbers li > .current { background: var(--pan-g); border-color: var(--pan-g); }
@media (max-width: 849px) {
  .pan-dm-head { border-radius: 0; margin: 0 -15px 10px; padding: 12px 15px; }
  .pan-dm-title { font-size: 19px; }
  .pan-dm-kids { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pan-dm-kids a { white-space: nowrap; }
  .pan-dm-sort { flex-wrap: nowrap; overflow-x: auto; }
  .pan-dm-sort a { white-space: nowrap; }
}

/* ===== Thanh nut duoi man hinh dien thoai ===== */
.pan-mnav, .pan-mtim { display: none; }
@media (max-width: 849px) {
  .pan-mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 98; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.1); padding-bottom: env(safe-area-inset-bottom); }
  .pan-mnav-i { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 58px; padding-bottom: 7px; color: var(--pan-mut) !important; font-size: 11px; font-weight: 600; }
  .pan-mnav-i.on { color: var(--pan-g) !important; }
  .pan-mnav-call { color: var(--pan-r) !important; }
  .pan-mnav-call i { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 4px 12px rgba(240,90,0,.4); border: 3px solid #fff; animation: pan-rung 2.4s infinite; }
  .pan-mnav-zalo { font-size: 10.5px; font-weight: 800; color: var(--pan-r); border: 1.8px solid var(--pan-r); border-radius: 6px; padding: 1px 4px; line-height: 1.3; }
  .pan-mtim:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 58px; z-index: 97; background: #fff; padding: 10px 12px; box-shadow: 0 -4px 14px rgba(0,0,0,.12); }
  .pan-mtim form { display: flex; margin: 0; }
  .pan-mtim input[type=search] { flex: 1; height: 42px; margin: 0; border: 2px solid var(--pan-g); border-right: 0; border-radius: 6px 0 0 6px; font-size: 16px; box-shadow: none; }
  .pan-mtim button { height: 42px; margin: 0; background: var(--pan-g); color: #fff; border-radius: 0 6px 6px 0; padding: 0 16px; }
  body:not(.single-product) #wrapper { padding-bottom: 58px; }
  .wp-elce { display: none !important; }
  .back-to-top { bottom: 70px !important; }
}
@keyframes pan-rung { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }

/* ===== Chan trang ===== */
#footer.footer-wrapper { background: transparent; }
.pan-ft { background: #fbf6f2; border-top: 3px solid var(--pan-g); margin-top: 10px; font-size: 14px; color: var(--pan-txt); }
.pan-ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 30px; padding-bottom: 22px; }
.pan-ft-logo { width: 78px; height: auto; margin-bottom: 6px; }
.pan-ft-ten { font-weight: 800; font-size: 15px; color: var(--pan-g); margin-bottom: 8px; }
.pan-ft-info, .pan-ft-list, .pan-ft-cs { list-style: none; margin: 0 0 14px; }
.pan-ft-info li { margin: 0 0 6px; line-height: 1.5; }
.pan-ft-info a { color: var(--pan-price) !important; font-weight: 700; }
.pan-ft-dl { font-size: 13px; color: var(--pan-mut); line-height: 1.5; }
.pan-ft-dl b { color: var(--pan-txt); }
.pan-ft-t { font-weight: 800; text-transform: uppercase; font-size: 14px; margin: 0 0 10px; padding-bottom: 6px; position: relative; }
.pan-ft-t::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--pan-g); }
.pan-ft-list li { margin: 0 0 7px; }
.pan-ft-list a { color: var(--pan-txt) !important; }
.pan-ft-list a:hover { color: var(--pan-g) !important; }
.pan-ft-cs li { margin: 0 0 7px; padding-left: 20px; position: relative; }
.pan-ft-cs li::before { content: "✓"; position: absolute; left: 0; color: var(--pan-moc); font-weight: 800; }
.pan-ft-map { border-radius: 8px; overflow: hidden; border: 1px solid var(--pan-line); line-height: 0; }
.pan-ft-map iframe { width: 100%; height: 150px; border: 0; }
.pan-ft-bot { background: #3a1b18; color: #e6d6cf; font-size: 13px; padding: 12px 0; }
@media (max-width: 849px) {
  .pan-ft-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .pan-ft-cty, .pan-ft-grid > .pan-ft-c:last-child { grid-column: 1 / -1; }
  .pan-ft-bot { padding-bottom: 12px; }
}

/* ===== Trang Tin tuc / chuyen muc bai viet ===== */
.blog #main, .category #main { background: var(--pan-bg); }
.pan-tt { padding-top: 14px; padding-bottom: 20px; }
.pan-tt-dau { background: #fff; border-radius: 10px; padding: 18px 20px 14px; margin-bottom: 14px; }
.pan-tt-dau h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--pan-txt); }
.pan-tt-dau p { color: var(--pan-mut); font-size: 14.5px; margin: 0 0 12px; }
.pan-tt-loc { display: flex; gap: 8px; flex-wrap: wrap; }
.pan-tt-loc a { padding: 6px 14px; border-radius: 18px; border: 1px solid var(--pan-line); color: var(--pan-txt) !important; font-size: 14px; font-weight: 600; background: #fff; }
.pan-tt-loc a span { font-size: 12px; color: var(--pan-mut); font-weight: 400; }
.pan-tt-loc a.on { background: var(--pan-g); border-color: var(--pan-g); color: #fff !important; }
.pan-tt-loc a.on span { color: #fde2e0; }
.pan-tt-loc a:hover:not(.on) { border-color: var(--pan-g); color: var(--pan-g) !important; }
.pan-tt-khung { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
/* the bai */
.pan-tt-the { background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--pan-line); transition: box-shadow .15s, transform .15s; }
.pan-tt-the:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); transform: translateY(-2px); }
.pan-tt-anh { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f3eeea; }
.pan-tt-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pan-tt-the:hover .pan-tt-anh img { transform: scale(1.04); }
.pan-tt-anh-trong { display: block; width: 100%; height: 100%; }
.pan-tt-nd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pan-tt-nhan { align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--pan-g) !important; background: var(--pan-g-l); padding: 2px 8px; border-radius: 4px; letter-spacing: .2px; }
.pan-tt-nd h3 { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; }
.pan-tt-nd h3 a { color: var(--pan-txt) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pan-tt-nd h3 a:hover { color: var(--pan-g) !important; }
.pan-tt-nd p { margin: 0; font-size: 13.5px; color: var(--pan-mut); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.pan-tt-cuoi { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #8f8580; padding-top: 6px; border-top: 1px solid #f1ebe7; margin-top: 4px; }
.pan-tt-cuoi a { font-weight: 700; color: var(--pan-r) !important; }
/* bai noi bat */
.pan-tt-noi { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; }
.pan-tt-noi-phu { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.pan-tt-noi-phu .pan-tt-the { flex-direction: row; }
.pan-tt-noi-phu .pan-tt-anh { flex: 0 0 42%; aspect-ratio: auto; }
.pan-tt-noi-phu .pan-tt-nd p { -webkit-line-clamp: 2; flex: 0 0 auto; }
.pan-tt-noi-phu .pan-tt-nd h3 { font-size: 15px; }
.pan-tt-noi-phu .pan-tt-cuoi { margin-top: auto; }
.pan-tt-the.lon .pan-tt-nd h3 { font-size: 20px; }
.pan-tt-the.lon .pan-tt-nd p { -webkit-line-clamp: 3; font-size: 14.5px; }
/* luoi */
.pan-tt-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pan-tt-trang { display: flex; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.pan-tt-trang .page-numbers { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid var(--pan-line); color: var(--pan-txt) !important; font-weight: 600; padding: 0 8px; }
.pan-tt-trang .page-numbers.current { background: var(--pan-g); border-color: var(--pan-g); color: #fff !important; }
.pan-tt-rong { background: #fff; border-radius: 10px; padding: 30px; text-align: center; color: var(--pan-mut); }
/* cot phai */
.pan-tt-phai { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pan-tt-hop { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--pan-line); }
.pan-tt-hop-t { font-weight: 800; text-transform: uppercase; font-size: 13.5px; color: var(--pan-g); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--pan-line); }
.pan-tt-tim { display: flex; margin: 0; }
.pan-tt-tim input { flex: 1; height: 40px; margin: 0; border: 1.5px solid var(--pan-line); border-right: 0; border-radius: 8px 0 0 8px; box-shadow: none; }
.pan-tt-tim button { height: 40px; margin: 0; min-height: 0; padding: 0 14px; background: var(--pan-g); color: #fff; border-radius: 0 8px 8px 0; }
.pan-tt-ds-cm { list-style: none; margin: 0; }
.pan-tt-ds-cm li { margin: 0; border-bottom: 1px solid #f1ebe7; }
.pan-tt-ds-cm li:last-child { border-bottom: 0; }
.pan-tt-ds-cm a { display: flex; justify-content: space-between; padding: 8px 2px; color: var(--pan-txt) !important; font-size: 14px; }
.pan-tt-ds-cm a:hover { color: var(--pan-g) !important; }
.pan-tt-ds-cm span { font-size: 12px; color: var(--pan-mut); background: var(--pan-bg); border-radius: 10px; padding: 1px 8px; }
.pan-tt-moi { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: var(--pan-txt) !important; border-bottom: 1px solid #f1ebe7; }
.pan-tt-moi:last-child { border-bottom: 0; }
.pan-tt-moi img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: 0 0 64px; }
.pan-tt-moi b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.pan-tt-moi small { font-size: 12px; color: #8f8580; }
.pan-tt-moi:hover b { color: var(--pan-g); }
.pan-tt-tv { background: linear-gradient(160deg, #fff7f0, #fff); border-color: #fbe3d0; }
.pan-tt-tv p { font-size: 13.5px; color: var(--pan-mut); margin: 0 0 10px; }
@media (max-width: 1099px) { .pan-tt-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 849px) {
  .pan-tt-khung { grid-template-columns: 1fr; }
  .pan-tt-phai { position: static; }
  .pan-tt-noi { grid-template-columns: 1fr; }
  .pan-tt-noi-phu .pan-tt-the { flex-direction: column; }
  .pan-tt-noi-phu .pan-tt-anh { aspect-ratio: 16 / 9; flex: 0 0 auto; }
  .pan-tt-noi-phu { grid-template-rows: none; }
  .pan-tt-dau h1 { font-size: 21px; }
  .pan-tt-loc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pan-tt-loc a { white-space: nowrap; }
}
@media (max-width: 549px) { .pan-tt-luoi { grid-template-columns: 1fr; } }

/* ===== Binh luan ===== */
.pan-bay { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
#respond { background: #fff; border: 1px solid var(--pan-line); border-radius: 10px; padding: 16px 18px; margin-top: 10px; }
#reply-title { font-size: 18px; font-weight: 800; text-transform: none; margin: 0 0 10px; }
#reply-title small a { font-size: 13px; color: var(--pan-r); margin-left: 8px; }
.pan-bl-dn { background: #fff7f0; border: 1px solid #fbe3d0; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.pan-bl-dn-t { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.pan-bl-dn-chua { font-size: 13px; color: #8a5a00; background: #fffbea; border-color: #f5e8b8; }
.pan-bl-hoac { text-align: center; font-size: 12.5px; color: var(--pan-mut); margin-top: 10px; position: relative; }
.pan-bl-hoac::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--pan-line); }
.pan-bl-hoac span { position: relative; background: #fff7f0; padding: 0 10px; }
.pan-bl-ghi { font-size: 12.5px; color: var(--pan-mut); margin-bottom: 8px; }
#commentform textarea, #commentform input[type=text], #commentform input[type=email] { border: 1.5px solid var(--pan-line); border-radius: 8px; box-shadow: none; font-size: 14.5px; }
#commentform textarea:focus, #commentform input:focus { border-color: var(--pan-g); }
#commentform .comment-form-author, #commentform .comment-form-email { display: inline-block; width: calc(50% - 5px); margin-bottom: 10px; }
#commentform .comment-form-author { margin-right: 6px; }
#commentform .form-submit { margin: 4px 0 0; }
#commentform #submit { background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff; border: 0; border-radius: 8px; font-weight: 800; text-transform: none; letter-spacing: 0; padding: 0 22px; min-height: 42px; }
.logged-in-as { font-size: 13.5px; }
.comment-list .comment-inner, .commentlist .comment-inner { background: #fff; border: 1px solid var(--pan-line); border-radius: 10px; padding: 12px 14px; }
@media (max-width: 549px) { #commentform .comment-form-author, #commentform .comment-form-email { display: block; width: 100%; margin-right: 0; } }

/* ===== Trang Lien he + form tu van ===== */
.page-id-89 #main { background: var(--pan-bg); }
.pan-lh-khung { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; margin-bottom: 14px; }
.pan-lh-trai { display: flex; flex-direction: column; gap: 10px; }
.pan-lh-the { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--pan-line); border-radius: 10px; padding: 14px 16px; color: var(--pan-txt) !important; }
a.pan-lh-the:hover { border-color: #f3c1bd; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.pan-lh-the .i { flex: 0 0 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pan-g-l); color: var(--pan-g); font-size: 20px; font-weight: 800; }
.pan-lh-the small { display: block; font-size: 13px; color: var(--pan-mut); }
.pan-lh-the b { display: block; font-size: 19px; color: var(--pan-price); }
.pan-lh-goi .i { background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff; animation: pan-rung 2.4s infinite; }
.pan-lh-zalo .i { font-size: 12px; background: #fff1e6; color: var(--pan-r); }
.pan-lh-zalo b { color: var(--pan-r); }
.pan-lh-tt b { font-size: 15.5px; color: var(--pan-txt); }
.pan-lh-phai { background: #fff; border-radius: 10px; border: 1px solid var(--pan-line); padding: 16px 18px; }
.pan-lh-mo { color: var(--pan-mut); font-size: 14px; margin: -4px 0 10px; }
.pan-lh-ifr { border-radius: 8px; overflow: hidden; line-height: 0; }
.pan-lh-ifr iframe { width: 100%; height: 340px; border: 0; }
.pan-ftv form { margin: 0; }
.pan-ftv-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pan-ftv input, .pan-ftv select, .pan-ftv textarea { width: 100%; border: 1.5px solid var(--pan-line); border-radius: 8px; box-shadow: none; font-size: 14.5px; margin-bottom: 10px; }
.pan-ftv input:focus, .pan-ftv select:focus, .pan-ftv textarea:focus { border-color: var(--pan-g); }
.pan-ftv button { width: 100%; min-height: 46px; margin: 0; border: 0; border-radius: 8px; background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff; font-weight: 800; font-size: 16px; text-transform: none; letter-spacing: 0; }
.pan-ftv-ghi { font-size: 12.5px; color: var(--pan-mut); text-align: center; margin: 8px 0 0; }
.pan-ftv-ok { background: #edf6ea; border: 1px solid #cfe6c8; border-radius: 8px; padding: 16px; font-size: 15px; line-height: 1.6; }
@media (max-width: 849px) { .pan-lh-khung { grid-template-columns: 1fr; } .pan-lh-ifr iframe { height: 260px; } }
@media (max-width: 549px) { .pan-ftv-hang { grid-template-columns: 1fr; gap: 0; } }
.pan-lh-trai > p, .pan-lh-trai > br, .pan-lh-khung > p, .pan-lh-khung > br { display: none; }
.pan-lh-trai p { margin: 0; }
.pan-ftv input, .pan-ftv select { height: 44px; padding: 0 12px; }
.pan-ftv textarea { padding: 10px 12px; }

/* ===== Khung keu goi cuoi bai mo ta san pham ===== */
.pan-cta-bai { margin: 20px 0 6px; padding: 20px 22px; border-radius: 12px; background: linear-gradient(135deg, #fff4ea 0%, #fff 55%, #fdecea 100%); border: 1.5px solid #f7c9a8; position: relative; overflow: hidden; }
.pan-cta-bai::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 26px solid rgba(255,106,0,.07); }
.pan-cta-bai-t { font-size: 20px; font-weight: 800; color: var(--pan-g); line-height: 1.3; margin-bottom: 4px; }
.pan-cta-bai-mo { margin: 0 0 10px; font-size: 15px; color: var(--pan-txt); }
.pan-cta-bai-ds { list-style: none; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.pan-cta-bai-ds li { margin: 0; padding-left: 24px; position: relative; font-size: 14.5px; font-weight: 600; }
.pan-cta-bai-ds li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--pan-moc); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.pan-cta-bai-nut { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.pan-cta-bai-nut a { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 10px; font-size: 16px; }
.pan-cta-bai-nut .goi { background: linear-gradient(180deg, #ff7a1a, #f05a00); color: #fff !important; box-shadow: 0 6px 16px rgba(240,90,0,.3); }
.pan-cta-bai-nut .goi span { display: inline-block; animation: pan-rung 2.4s infinite; }
.pan-cta-bai-nut .zalo { background: #fff; color: var(--pan-r) !important; border: 2px solid var(--pan-r); }
.pan-cta-bai-nut .zalo span { font-size: 11px; font-weight: 800; background: var(--pan-r); color: #fff; border-radius: 4px; padding: 1px 5px; }
.pan-cta-bai-nut a:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pan-cta-bai-gio { margin: 10px 0 0; font-size: 12.5px; color: var(--pan-mut); }
@media (max-width: 549px) { .pan-cta-bai-ds { grid-template-columns: 1fr; } .pan-cta-bai-nut a { width: 100%; justify-content: center; } .pan-cta-bai-t { font-size: 18px; } }

/* lien ket noi bo ma san pham */
a.pan-lk { color: var(--pan-g) !important; font-weight: 600; border-bottom: 1px dashed rgba(200,22,29,.45); }
a.pan-lk:hover { border-bottom-style: solid; }

/* ===== Menu con cua thanh tren cung: rong theo chu, gon ===== */
#top-bar .nav-dropdown { min-width: 0; width: max-content; max-width: 300px; padding: 6px 0; border: 1px solid var(--pan-line, #ece4df); border-radius: 8px; box-shadow: 0 8px 22px rgba(43,34,32,.12); }
#top-bar .nav-dropdown > li { width: auto; }
#top-bar .nav-dropdown > li > a { display: block; width: auto; margin: 0; padding: 7px 16px; font-size: 13px; line-height: 1.45; white-space: nowrap; text-transform: none; border: 0; color: var(--pan-txt, #2b2220); }
#top-bar .nav-dropdown > li > a:hover { background: #fdf3f2; color: var(--pan-g, #c8161d); }
#top-bar .nav-dropdown-default > li:not(:last-child) > a { border-bottom: 0; }