/*
Theme Name: Phone Accessories
Theme URI: https://phoneaccessories.vn
Author: Phone Accessories
Description: Theme ban phu kien dien thoai - trang chu dang landing thuong mai dien tu, toi uu desktop/tablet/mobile.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: phone-accessories
*/

* { box-sizing: border-box; }
body { margin: 0; background: #eef1f6; font-family: "Be Vietnam Pro", Helvetica, Arial, sans-serif; color: #1a2233; -webkit-font-smoothing: antialiased; }
a { color: #1868db; text-decoration: none; }
a:hover { color: #0f4fae; }
img { max-width: 100%; height: auto; }
input { font-family: inherit; }
::placeholder { color: #9aa4b5; }
.pa-wrap { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.pa-tabbtn { border: 0; background: transparent; padding: 4px 0; cursor: pointer; font-size: 13.5px; font-family: inherit; font-weight: 500; color: #7d8798; border-bottom: 2px solid transparent; }
.pa-tabbtn.is-active { font-weight: 600; color: #1868db; border-bottom-color: #1868db; }
.pa-tabpane { display: none; }
.pa-tabpane.is-active { display: grid; }

@media (max-width: 1024px) {
  [data-r="topbar"] { gap: 16px !important; font-size: 11.5px !important; }
  [data-r="nav"] { overflow-x: auto !important; }
  [data-r="hero"] { grid-template-columns: 1fr !important; }
  [data-r="heroart"] { display: none !important; }
  /* Tren mobile bon the xep 2 cot nen giu khoang cach hep hon ban desktop */
  [data-r="badges"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  [data-r="cats"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  [data-r="prods"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-r="promos"], [data-r="combos"], [data-r="reviews"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r="deal"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r="dealside"] { grid-column: 1 / -1 !important; border-right: 0 !important; border-bottom: 1px solid #eef0f5 !important; padding: 0 0 18px !important; }
  [data-r="models"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* minmax(0, 1fr) chu khong phai 1fr: mot rank 1fr co min-width mac dinh la
     auto nen khong co xuong duoi min-content cua noi dung, va dai truot
     thuong hieu ben trong se keo ca the rong ra 1378px. */
  [data-r="twocol"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r="trust"], [data-r="footgrid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  [data-r="topbar"] > span:nth-child(1), [data-r="topbar"] > span:nth-child(2) { display: none !important; }
  [data-r="headrow"] { flex-wrap: wrap !important; gap: 12px !important; }
  [data-r="search"] { order: 3 !important; flex-basis: 100% !important; max-width: none !important; }
  .pa-heroslide { background-position: center -2% !important; background-size: 220% auto !important; }
  [data-r="heroveil"] { background: linear-gradient(180deg, rgba(240,244,253,.90) 0%, rgba(233,239,251,.80) 55%, rgba(223,233,250,.88) 100%) !important; }
  [data-r="hero"] { padding-top: 30px !important; }
  [data-r="herotitle"] { font-size: 25px !important; }
  [data-r="burger"] { display: inline-flex !important; order: 2 !important; margin-left: 4px !important; }
  [data-r="navwrap"] { display: none !important; }
  [data-r="mmenu"].is-open { display: grid !important; }
  [data-r="catbtn"] { display: none !important; }
  [data-r="userbox"] { margin-left: auto !important; gap: 14px !important; order: 1 !important; }
  [data-r="userbox"] a > span:last-child { display: none !important; }
  /* Danh muc san pham tren mobile: mot dai truot ngang thay vi luoi 3 cot.
     [data-r="cats"] chinh la mot .pa-wrap nen da co san padding 16px hai ben -
     padding do vua lam le trai vua lam diem dung o cuoi dai truot, khong phai
     bu bang margin am. The ke tiep co y de lo mot phan o mep phai lam dau hieu
     con keo duoc nua. */
  [data-r="cats"] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    /* Khong co dong nay thi trinh duyet tu bat vao diem dung ngay khi tai
       trang, keo mat 16px le trai va the dau tien dinh sat mep man hinh. */
    scroll-padding-left: 16px;
  }
  [data-r="cats"]::-webkit-scrollbar { display: none; }
  /* Vua du 4 the trong man 390px (4x76 + 3x10 = 334 tren 358px cho co), the
     thu nam lo ra 14px lam dau hieu con keo duoc. Anh va chu thu theo cho can
     doi voi the nho hon - moi thu deu la style noi tuyen nen phai !important. */
  [data-r="cats"] { gap: 10px !important; }
  [data-r="cats"] > a {
    flex: 0 0 76px; scroll-snap-align: start;
    padding: 12px 6px 10px !important; gap: 8px !important;
  }
  [data-r="cats"] > a > span:first-child { height: 44px !important; }
  [data-r="cats"] > a > span:last-child { font-size: 11.5px !important; line-height: 1.3; }
  [data-r="prods"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Mua theo dong may: dai truot ngang, moi man 2 cot x 2 hang.
     grid-auto-flow: column giu tung cap dong may nam chung mot cot (17 Pro Max
     tren, 17 Pro duoi) thay vi tach ra hai man khac nhau. Khoi nay nam trong
     mot the co padding 18px, nen phai tran ra bang margin am roi tu bu lai
     padding thi cot ke tiep moi lo duoc ra sat mep the. */
  [data-r="models"] {
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 15px);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
    scroll-padding-left: 18px;
  }
  [data-r="models"]::-webkit-scrollbar { display: none; }
  [data-r="models"] > a { scroll-snap-align: start; }
  [data-r="promos"], [data-r="combos"] { grid-template-columns: 1fr !important; }
  /* Dai cam ket giu luoi 2x2 tren mobile. Moi o chi con ~157px nen phai thu
     icon va chu lai, khong thi tieu de nao cung vo thanh hai dong. Tat ca deu
     la style noi tuyen nen phai !important. */
  [data-r="trust"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 16px !important; gap: 14px 12px !important;
  }
  [data-r="trust"] > div { gap: 10px !important; }
  [data-r="trust"] > div > span:first-child { width: 34px !important; height: 34px !important; }
  [data-r="trust"] > div > span:last-child > span:first-child { font-size: 12px !important; }
  [data-r="trust"] > div > span:last-child > span:last-child { font-size: 11px !important; }
  /* Khach hang noi gi: dai truot ngang, moi man mot danh gia. Chi mot chu khong
     phai hai nhu khoi bai viet - danh gia la mot doan van, thu con nua man thi
     khong doc noi. Khoi nam thang trong .pa-wrap (padding 16px) chu khong trong
     the, nen le tran la 16px. */
  [data-r="reviews"] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    scroll-padding-left: 16px;
  }
  [data-r="reviews"]::-webkit-scrollbar { display: none; }
  [data-r="reviews"] > div { flex: 0 0 calc(100% - 34px); scroll-snap-align: start; }
  /* Bai viet huu ich: dai truot ngang, moi man 2 bai. Cung nam trong the co
     padding 18px nhu khoi thuong hieu nen cung phai tran ra bang margin am roi
     tu bu padding, the ke tiep moi lo duoc ra sat mep. */
  [data-r="artgrid"] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
    scroll-padding-left: 18px;
  }
  [data-r="artgrid"]::-webkit-scrollbar { display: none; }
  [data-r="artgrid"] > div { flex: 0 0 calc(50% - 17px); scroll-snap-align: start; }
  /* The chi con 144px thay vi tron be ngang, anh 124px hoa ra gan vuong - thu
     xuong cho ve lai ty le ngang. */
  [data-r="artgrid"] > div > span:first-child { height: 96px !important; }
  /* Chan trang tren mobile: chi hai cot danh sach lien ket dung canh nhau,
     con khoi dang ky nhan tin (co o nhap + nut) va khoi thong tin lien he
     (dia chi dai) van chiem tron be ngang nhu cu. */
  [data-r="footgrid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 20px !important; overflow-wrap: anywhere;
  }
  [data-r="footgrid"] > div:nth-child(1),
  [data-r="footgrid"] > div:nth-child(4) { grid-column: 1 / -1; }
  /* Thuong hieu noi bat: mot dai truot ngang mot hang. Khoi nam trong the co
     padding 18px nen dai phai tran ra bang margin am roi tu bu padding, o ke
     tiep moi lo duoc ra sat mep the. */
  [data-r="brandgrid"] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
    scroll-padding-left: 18px;
  }
  [data-r="brandgrid"]::-webkit-scrollbar { display: none; }
  [data-r="brandgrid"] span {
    flex: 0 0 116px; scroll-snap-align: start;
    height: 72px !important; padding: 10px 12px !important;
  }
  [data-r="footbot"] { flex-wrap: wrap !important; }
}


/* ---------- Hover / transition ---------- */
a, button, [data-r="cats"] a, [data-r="models"] a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .22s ease, opacity .18s ease; }

[data-r="topbar"] a:hover { color: #fff !important; }

[data-r="nav"] a:hover { color: #1868db !important; }
[data-r="mmenu"] a:hover { color: #1868db !important; }

[data-r="headrow"] button[type="submit"]:hover { background: #0f4fae !important; }
[data-r="catbtn"]:hover, [data-r="burger"]:hover { background: #e9edf4 !important; border-color: #d7dde8 !important; }
[data-r="userbox"] a:hover { color: #1868db !important; }
[data-r="search"]:focus-within { border-color: #b9cdf0 !important; background: #fff !important; }

[data-r="hero"] a[href]:hover { background: #0f4fae !important; color: #fff !important; }
[data-r="badges"] > div:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,80,.12) !important; }

[data-r="cats"] a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,40,80,.14) !important; }
[data-r="cats"] a:hover span:last-child { color: #1868db !important; }

[data-r="prods"] > div:hover, [data-r="combos"] > div:hover, [data-r="reviews"] > div:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,40,80,.14) !important; }
[data-r="prods"] > div:hover > div:nth-of-type(2) { color: #1868db !important; }
[data-r="combos"] a:hover { background: #1868db !important; color: #fff !important; }

[data-r="promos"] > div { transition: transform .25s ease, box-shadow .25s ease; }
[data-r="promos"] > div:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,50,120,.22); }
[data-r="promos"] a:hover { color: #fff !important; opacity: .85; }

[data-r="deal"] > div[style*="position: relative"]:hover { transform: translateY(-2px); }
[data-r="deal"] > div { transition: transform .2s ease; }
[data-r="dealside"] a:hover { background: #1868db !important; color: #fff !important; }

[data-r="models"] a:hover { border-color: #1868db !important; color: #1868db !important; box-shadow: 0 6px 16px rgba(20,40,80,.1); }

[data-r="brandgrid"] span:hover { border-color: #c9d6ec !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,40,80,.1); }
[data-r="brandgrid"] span { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }


[data-r="artgrid"] a:hover { color: #1868db !important; }
[data-r="artgrid"] > div:hover span:first-child { transform: scale(1.04); }
[data-r="artgrid"] > div span:first-child { transition: transform .25s ease; }

[data-r="trust"] > div:hover span:first-child { background: #dbe8fc !important; }

footer a:hover { color: #fff !important; }
footer button[type="submit"]:hover { background: #3b83ea !important; }
footer input:focus { border-color: #7ea6e8 !important; }
[data-r="footbot"] span[title]:hover, footer a[title]:hover { transform: translateY(-2px); }
[data-r="footbot"] span[title], footer a[title] { transition: transform .2s ease; }

.pa-tabbtn:hover { color: #1868db !important; }

/* Logo tuy chon (Customizer > Site Identity). Gioi han chieu cao de anh to
   khong lam vo chieu cao header; width:auto giu dung ty le anh goc. */
[data-r="brand"] .custom-logo-link { display: flex; align-items: center; line-height: 0; }
[data-r="brand"] .custom-logo { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; }

@media (max-width: 640px) {
  [data-r="brand"] .custom-logo { height: 36px; max-width: 160px; }
}

/* Desktop: chieu cao hero = dung chieu cao PHAN CO NOI DUNG cua anh hero.
   hero.webp la 2172x724 nhung co 12 hang trang trong o dinh va 12 hang o day
   (do bang canvas: hang co noi dung dau tien y=12, cuoi cung y=711). Neu lay
   nguyen ty le 3:1 thi hien ca hai dai trang do - dai duoi chinh la "duong ke
   trang" thua o cuoi hero. Lay ty le theo 700 hang co noi dung (2172/700) thi
   background cover tu cat deu 12px moi ben, dung bang hai dai trang. Cho section dung aspect-ratio 3/1 nen o moi
   be rong, chieu cao section trung khop chieu cao anh -> background cover khong con
   cat tren/duoi. display:flex de .pa-wrap ben trong keo cao bang section, noi dung
   van can giua theo align-items:center san co.
   max-height 724px = chieu cao goc cua anh: qua nguong do anh se bi phong to va hero
   cao qua muc doc duoc, nen chap nhan cat nhe hai ben thay vi cao vo han.
   width:100% la BAT BUOC: thieu no, khi max-height kep chieu cao thi aspect-ratio suy
   nguoc ra chieu rong (do o 2560px section co lai con 2172px, ho mot khoang trang ben
   phai). Co width xac dinh thi chi chieu cao bi kep, section van full-width. */
@media (min-width: 1025px) {
  [data-r="herosec"] { display: flex; width: 100%; aspect-ratio: 2172 / 700; max-height: 700px; }
  [data-r="hero"] { width: 100%; }
}

/* ---- Trang landing o footer (page-landing.php) ---- */
[data-r="lpcrumb"] a:hover { color: #1868db; }
[data-r="lpcards"] > div { transition: border-color .2s ease, box-shadow .2s ease; }
[data-r="lpcards"] > div:hover { border-color: #c9d6ec; box-shadow: 0 8px 18px rgba(20,40,80,.07); }
[data-r="lptable"] tbody tr:last-child td { border-bottom: none; }
[data-r="lptable"] tbody tr:hover td { background: #fafcff; }
[data-r="lpcta"] a:hover { background: #eaf1fd; }

/* details: bo tam giac mac dinh, mui ten tu xoay khi mo */
[data-r="lpfaq"] summary::-webkit-details-marker { display: none; }
[data-r="lpfaq"] summary::marker { content: ""; }
[data-r="lpfaq"] summary span { transition: transform .2s ease; }
[data-r="lpfaq"][open] summary span { transform: rotate(-135deg) translateY(2px); }

@media (max-width: 1024px) {
  [data-r="lpsteps"], [data-r="lpstats"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  [data-r="lpcards"], [data-r="lpsteps"], [data-r="lpstats"] { grid-template-columns: 1fr !important; }
  [data-r="lphero"] h1 { font-size: 25px !important; }
  [data-r="lpcta"] { padding: 22px !important; }
}

/* ================= WooCommerce ================= */
/* Woo nap style rieng cua no; phan duoi keo giao dien shop ve dung he mau va
   bo cuc cua theme (#1868db, the trang bo goc 12px, vien #e5e9f0). */

.woocommerce .pa-wrap, .woocommerce-page .pa-wrap { font-family: inherit; }
[data-r="wcmain"] { color: #33415a; }
[data-r="lpcrumb"] .woocommerce-breadcrumb { color: #6b7789; font-size: 12.5px; }
[data-r="lpcrumb"] .woocommerce-breadcrumb a { color: #6b7789; }
[data-r="lpcrumb"] .woocommerce-breadcrumb a:hover { color: #1868db; }

/* ---- Luoi san pham ---- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; padding: 14px;
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover { border-color: #c9d6ec; box-shadow: 0 10px 22px rgba(20,40,80,.09); transform: translateY(-2px); }
.woocommerce ul.products li.product a img { border-radius: 9px; margin-bottom: 12px; background: #f6f8fc; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14.5px !important; font-weight: 650; line-height: 1.5; color: #1a2740; padding: 0 !important; margin: 0 0 8px !important;
}
.woocommerce ul.products li.product .price { color: #1868db !important; font-size: 16px; font-weight: 800; display: block; margin-bottom: 10px; }
.woocommerce ul.products li.product .price del { color: #9aa5b6 !important; font-size: 13px; font-weight: 500; margin-right: 7px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { font-size: 11px; margin: 0 0 9px; color: #f5a623; }
.woocommerce span.onsale {
  background: #1868db; color: #fff; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; min-height: 0; min-width: 0; line-height: 1.6; top: 12px; left: 12px; margin: 0;
}

/* ---- Nut ---- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: #1868db; color: #fff; border-radius: 8px; font-size: 13.5px; font-weight: 650;
  padding: 11px 18px; line-height: 1.4; border: 0; transition: background .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: #0f4fae; color: #fff; }
/* The trong luoi cao bang nhau va nut bi day xuong day, de nut cua moi the
   thang hang du ten san pham dai ngan khac nhau. */
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .button { display: block; text-align: center; margin: auto 0 0; width: 100%; }
.woocommerce a.button.added::after { display: none; }

/* ---- Thanh cong cu shop ---- */
.woocommerce .woocommerce-ordering select {
  border: 1px solid #e5e9f0; background: #fff; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: #2b374b; font-family: inherit;
}
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 8px; padding: 9px 14px; font-size: 13.5px; color: #2b374b;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: #1868db; border-color: #1868db; color: #fff; }

/* ---- Chi tiet san pham ---- */
.woocommerce div.product { background: #fff; border: 1px solid #e5e9f0; border-radius: 14px; padding: 24px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: #1868db; font-size: 27px; font-weight: 800; }
.woocommerce div.product p.price del { color: #9aa5b6; font-size: 17px; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 14.5px; line-height: 1.85; color: #4a5872; }
.woocommerce div.product form.cart .variations { margin-bottom: 16px; }
.woocommerce div.product form.cart .variations label { font-weight: 650; color: #24334d; font-size: 13.5px; }
.woocommerce div.product form.cart .variations select {
  border: 1px solid #e5e9f0; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; background: #fff; color: #1f2c45; min-width: 200px;
}
.woocommerce div.product form.cart div.quantity input.qty {
  border: 1px solid #e5e9f0; border-radius: 8px; padding: 11px 8px; width: 72px; font-size: 14px; font-family: inherit;
}
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 18px; border-bottom: 1px solid #e9ecf2; display: flex; gap: 4px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 13px 16px; font-size: 14px; font-weight: 600; color: #5b6879; border-bottom: 2.5px solid transparent; display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #1868db; border-bottom-color: #1868db; }

/* ---- Duong dan trang (breadcrumb) ----
   Mot hang mong nam tren nen trang ngay duoi header. Woo in ra chuoi link tran
   (wrap_before de rong) nen kieu chu dat thang o .pa-crumb. */
.pa-crumb { font-size: 13px; line-height: 1.6; color: #6b7789; }
.pa-crumb .pa-wrap { padding-top: 14px; padding-bottom: 2px; }
.pa-crumb a { color: #1868db; }
.pa-crumb a:hover { text-decoration: underline; }
.pa-crumb__sep { margin: 0 7px; color: #aab4c4; }

/* ---- The tieu de danh muc ----
   Truoc day la mot dai mau keo het chieu ngang man hinh, chu nam sat le trai.
   Gio la mot the trang trong khung noi dung, co icon danh muc ben trai. */
.pa-pagehead {
  margin-top: 10px; display: flex; align-items: center; gap: 22px;
  background: #fff; border: 1px solid #e7ecf5; border-radius: 12px;
  box-shadow: 0 1px 6px rgba(20,40,80,.05); padding: 24px 28px;
}
.pa-pagehead__ico {
  width: 64px; height: 64px; flex: none; border-radius: 10px;
  background-color: #f5f8fd; background-position: center; background-size: contain; background-repeat: no-repeat;
}
.pa-pagehead__body { min-width: 0; }
.pa-pagehead__title { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #14243f; }
.pa-pagehead__desc { margin-top: 8px; max-width: 760px; font-size: 14.5px; line-height: 1.75; color: #6b7789; }
.pa-pagehead__desc p { margin: 0; }
@media (max-width: 640px) {
  .pa-pagehead { padding: 18px; gap: 14px; }
  .pa-pagehead__ico { width: 48px; height: 48px; }
  .pa-pagehead__title { font-size: 22px; }
  .pa-pagehead__desc { margin-top: 6px; font-size: 13.5px; }
}

/* ---- Gio hang & thanh toan ---- */
.woocommerce table.shop_table {
  border: 1px solid #e5e9f0; border-radius: 12px; border-collapse: separate; border-spacing: 0; background: #fff; overflow: hidden;
}
.woocommerce table.shop_table th { background: #f5f8fd; font-size: 13px; color: #24334d; padding: 14px 16px; border: 0; }
.woocommerce table.shop_table td { padding: 14px 16px; border-top: 1px solid #eef1f7; font-size: 14px; color: #4a5872; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3 {
  font-size: 18px; font-weight: 700; color: #17263f; margin-bottom: 14px;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single {
  border: 1px solid #e5e9f0; border-radius: 8px; padding: 11px 13px; font-size: 14px; font-family: inherit; background: #fff; color: #1f2c45; height: auto;
}
.woocommerce form .form-row label { font-size: 13.5px; font-weight: 600; color: #24334d; }
.woocommerce-checkout #payment { background: #f5f8fd; border: 1px solid #e6ecf7; border-radius: 12px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid #e6ecf7; padding: 16px; }
.woocommerce-checkout #payment div.form-row { padding: 16px; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top: 0; border-left: 3px solid #1868db; background: #f2f7fe; border-radius: 10px; font-size: 14px; color: #24334d;
}
.woocommerce-error { border-left-color: #d9534f; background: #fdf3f3; }
.woocommerce-info::before, .woocommerce-message::before { color: #1868db; }

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { padding: 16px; }
}

/* ---- Gio hang & thanh toan dang block (wc-blocks) ----
   Woo hien mac dinh dung block cho 2 trang nay, render bang JS voi bo class
   wc-block-components-* rieng, nen phan CSS checkout co dien o tren khong ap
   vao day. Duoi la phan keo block ve dung he mau theme. */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: inherit; color: #33415a; }
.wc-block-components-title, .wp-block-woocommerce-checkout h2, .wc-block-components-checkout-step__title {
  font-family: inherit; color: #17263f; font-weight: 700;
}
.wc-block-components-button:not(.is-link) {
  background: #1868db; color: #fff; border-radius: 8px; font-family: inherit;
  font-size: 14px; font-weight: 650; padding: 12px 22px; border: 0;
}
.wc-block-components-button:not(.is-link):hover { background: #0f4fae; }
.wc-block-components-text-input input, .wc-block-components-textarea,
.wc-block-components-select__container, .wc-block-components-combobox-control input {
  border: 1px solid #e5e9f0 !important; border-radius: 8px !important; font-family: inherit; font-size: 14px; color: #1f2c45;
}
.wc-block-components-text-input.is-active label, .wc-block-components-text-input label { font-family: inherit; color: #6b7789; }
.wc-block-components-product-name { color: #1a2740; font-weight: 600; }
.wc-block-components-product-price__value, .wc-block-components-totals-item__value { color: #1f2c45; font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #1868db; }
.wc-block-cart-items, .wc-block-components-sidebar, .wc-block-checkout__form {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
}
.wc-block-components-sidebar, .wc-block-checkout__form { padding: 20px; }
.wc-block-components-radio-control__option { border-radius: 8px; }
.wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control__option {
  font-family: inherit; font-size: 14px;
}
.wc-block-components-notice-banner { border-radius: 10px; font-family: inherit; }

/* Nut them vao gio o luoi trang chu */
.pa-homebtn { transition: background .2s ease, color .2s ease, border-color .2s ease; }

/* Nut trong the combo rong bang nut trong the san pham o luoi ben tren.
   Khong the keo het chieu ngang the: the combo rong hon nhieu so voi the san
   pham (luoi 3 cot so voi 5 cot, tren dien thoai la mot the tran so voi hai
   the mot hang), keo het la nut to gap doi.
   Tren dien thoai hai luoi cung nam trong mot .pa-wrap nen tinh duoc dung
   bang nhau: the san pham = (hang - khe 14px) / 2, nut = the - 24px dem, ma
   the combo lai rong bang ca hang tru 32px dem cua no. Rut gon lai con
   50% - 15px. Tu tablet tro len hai luoi khac so cot nen khong co cong thuc
   chung, dat mot be ngang co dinh cho gan bang. */
.pa-combobtn { align-self: center; width: 200px; max-width: 100%; }
@media (max-width: 640px) {
  .pa-combobtn { width: calc(50% - 15px); min-width: 138px; }
}
a.pa-homebtn.button:hover { background: #0f4fae !important; color: #fff !important; }
a.pa-homebtn:not(.button):hover { background: #1868db !important; color: #fff !important; }
.pa-homebtn.loading { opacity: .65; }
.pa-homebtn.added::after { display: none; }

/* Dropdown danh muc o header */
[data-r="catmenu"] {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 230px; background: #fff; border: 1px solid #e5e9f0; border-radius: 10px;
  box-shadow: 0 14px 32px rgba(20,40,80,.14); padding: 6px;
}
[data-r="catmenu"].is-open { display: block; }
[data-r="catmenu"] a {
  display: block; padding: 10px 12px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: #2b374b; white-space: nowrap;
}
[data-r="catmenu"] a:hover { background: #f2f6fd; color: #1868db; }
@media (max-width: 640px) { [data-r="catmenu"] { left: auto; right: 0; } }

/* ================= Trang chi tiet san pham ================= */
/* minmax(0, ...) chu khong phai 46fr/54fr thuan: mot rank fr co min-width mac
   dinh la auto nen khong co xuong duoi min-content cua noi dung. Flexslider dat
   ca dai anh trong mot hang ngang rong 8942px, nen san pham co nhieu anh phu se
   thoi cot anh phinh to nuot ca cot thong tin ben phai. */
.woocommerce div.product {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 34px; align-items: start; padding: 26px;
}
.woocommerce div.product .woocommerce-product-gallery { width: auto !important; float: none !important; margin: 0 !important; }
/* Khung anh chinh la .flex-viewport - do flexslider tao ra, va la thu duy nhat
   co kich thuoc bang o anh thuc te. Con __wrapper la BANG CHUYEN ben trong no,
   rong 600% de chua tat ca anh canh nhau, nen bo goc va nen dat len wrapper thi
   khong an nhap gi. Giu them ban cho wrapper phong khi flexslider khong chay. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: 12px; overflow: hidden; background: #fff; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 12px; }
.woocommerce div.product .summary.entry-summary { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

.woocommerce div.product .summary .product_title {
  display: block; margin: 0 0 12px; font-size: 25px; line-height: 1.32; font-weight: 800;
  letter-spacing: -0.01em; color: #14243f;
}
.woocommerce div.product .summary .woocommerce-product-rating { margin-bottom: 12px; }
.woocommerce div.product .summary p.price, .woocommerce div.product .summary span.price {
  display: block; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #eef1f7;
}
.woocommerce div.product .summary .stock { font-size: 13.5px; font-weight: 600; color: #0f7a4a; }
.woocommerce div.product .product_meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f7; font-size: 13px; color: #7b879b; }
.woocommerce div.product .product_meta a { color: #1868db; }
.woocommerce div.product .product_meta .sku_wrapper { display: none; } /* SKU trong -> khong hien "Khong ap dung" */

/* Chon bien the dang o bam duoc thay cho dropdown */
.pa-select-hidden { display: none !important; }
.woocommerce div.product form.cart .variations { border: 0; margin: 0 0 6px; }
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
  display: block; padding: 0; border: 0; text-align: left;
}
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 16px; }
.woocommerce div.product form.cart .variations label {
  display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #6b7789;
}
.pa-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.pa-swatch {
  border: 1.5px solid #dfe5ef; background: #fff; color: #2b374b; border-radius: 9px;
  padding: 10px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pa-swatch:hover:not(:disabled):not(.is-active) { border-color: #1868db; color: #1868db; }
.pa-swatch.is-active { border-color: #1868db; background: #1868db; color: #fff; }
.pa-swatch.is-disabled, .pa-swatch:disabled {
  opacity: .45; cursor: not-allowed; text-decoration: line-through; background: #f6f8fb;
}
/* Khong dat display o day: Woo tu an/hien link nay theo trang thai chon bien the.
   Ep display lam no cao 0px va chu tran de len hang o chon. */
.woocommerce div.product form.cart .reset_variations { font-size: 12.5px; color: #7b879b; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 14px; }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.woocommerce div.product form.cart { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.woocommerce div.product form.cart:not(.variations_form) { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.woocommerce div.product form.cart .button {
  flex: 1; min-width: 180px; padding: 14px 26px; font-size: 15px; border-radius: 9px;
}

@media (max-width: 900px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ================= Gio hang & thanh toan (block) ================= */
/* KHONG dat gap hay max-width o day: Woo chia hai cot bang phan tram chieu rong,
   them gap lam tong vuot 100% nen cot ben phai bi day xuong duoi. Bo cuc de Woo lo. */

.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: #1868db !important; color: #fff !important; border-radius: 9px !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
  padding: 15px 26px !important; border: 0 !important; box-shadow: none !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: #0f4fae !important; }

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper { font-family: inherit; }
.wc-block-components-totals-item__label { color: #58657c; font-size: 14px; }
.wc-block-components-totals-footer-item { border-top: 1px solid #eef1f7; padding-top: 14px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: #17263f; font-weight: 700; font-size: 15px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #1868db; font-size: 22px; font-weight: 800; }
.wc-block-cart-item__wrap .wc-block-components-product-name { font-size: 14.5px; }
.wc-block-cart-item__image img { border-radius: 8px; background: #f7f9fc; }
.wc-block-components-quantity-selector { border: 1px solid #e5e9f0; border-radius: 8px; }
.wc-block-components-quantity-selector__button { color: #5b6879; }
.wc-block-components-product-badge { border-radius: 5px; background: #eaf5ee; color: #0f7a4a; border: 0; font-weight: 600; }
.wc-block-components-checkout-step { border: 0; padding-left: 0; }
.wc-block-components-checkout-step__heading { margin-top: 0; }
.wc-block-components-checkout-step__title { font-size: 17px; color: #17263f; }
.wc-block-components-address-form input, .wc-block-components-text-input input {
  border-radius: 8px !important;
}
.wc-block-components-radio-control__option {
  border: 1px solid #e5e9f0; border-radius: 9px; padding: 12px 14px; margin-bottom: 8px;
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(input:checked) { border-color: #1868db; background: #f4f8fe; }

/* Nut them vao gio khi chua chon du bien the: Woo de mau tim mac dinh (opacity
   tren nen xanh), doi sang xam trung tinh cho ro la dang bi khoa. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product form.cart .button:disabled,
.woocommerce div.product .single_add_to_cart_button.disabled {
  background: #e3e8f0 !important; color: #939fb2 !important; cursor: not-allowed; opacity: 1 !important;
}
/* Khoang cach giua nhan thuoc tinh va cac o chon */
.woocommerce div.product form.cart .variations tr { margin-bottom: 14px; }
.woocommerce div.product form.cart .variations label { margin-bottom: 8px; }
/* KHONG dat line-height: 0 o day - link "Xoa" cua Woo nam cung o nay va se bi co
   lai 0px, chu tran ra de len hang o chon. */
.woocommerce div.product form.cart .variations td.value { display: block; }
.pa-swatches { margin-top: 2px; }
.woocommerce div.product form.cart .reset_variations { display: block; margin-top: 10px; }

/* Dau tick tren o dang chon */
.pa-swatch.is-active::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Gia bien the da duoc day len o gia phia tren nen an khoi phu nay di */
.woocommerce div.product .woocommerce-variation-price { display: none; }
/* Khung anh chinh giu dung mot hinh dang o moi tam anh.
   WooCommerce khong cat anh chinh, nen mot san pham co ca anh 600x600 lan anh
   750x500 se lam khung doi hinh moi lan chuyen anh (flexslider bat smoothHeight
   nen keo chieu cao khung theo tung tam). Ep tung o ve dung ti le da cai o Tuy
   bien -> Anh san pham, roi contain cho anh nam gon ben trong ma khong meo.
   Bien --pa-img-ratio do inc/woocommerce.php in ra; chon "Khong cat" thi bien
   khong ton tai, aspect-ratio tro ve auto va khung tu theo anh nhu cu.
   Nen khung de trang chu khong phai mau nhat: anh san pham deu la anh tach nen
   trang, de mau nhat thi anh khong vuong se lo ra hai vet nhat tren duoi, moi
   tam anh mot kieu.

   KHONG can giua bang flex tren __wrapper: flexslider bien wrapper thanh bang
   chuyen rong 600% chua ca ba anh, can giua bang chuyen do nghia la day tam anh
   dang xem ra ngoai khung nhin, con lai o anh chinh trong tron. */
.woocommerce div.product .woocommerce-product-gallery__image { aspect-ratio: var(--pa-img-ratio); }
.woocommerce div.product .woocommerce-product-gallery__image > a { height: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  display: block; width: 100%; height: 100%; object-fit: contain; margin: 0;
}

/* Anh phu. Mac dinh WooCommerce chia moi anh 25% chieu ngang cot, nen man cang
   rong thi anh phu cang to - tren man lon chung to gan bang anh chinh. Co dinh
   76px va xep bang flex de chung luon nho, bao nhieu anh cung duoc. */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; overflow: visible;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 76px; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100%; height: auto; aspect-ratio: var(--pa-img-ratio); object-fit: contain;
  background: #fff; border: 1px solid #e7ecf5; border-radius: 8px;
  opacity: 1; cursor: pointer; transition: border-color .16s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover { border-color: #1868db; }

/* Icon trong menu va dropdown danh muc */
.pa-ico { flex: none; opacity: .78; }
[data-r="catmenu"] a { display: flex; align-items: center; gap: 10px; }
[data-r="catmenu"] a:hover .pa-ico { opacity: 1; }
[data-r="nav"] a .pa-ico { opacity: .7; }
[data-r="nav"] a:hover .pa-ico { opacity: 1; }

/* ---- Thanh loc dau trang danh muc ----
   Hai hang trong mot the: hang tren la chip khoang gia, hang duoi la cac o
   chon + nut Loc, ngan cach bang mot duong ke nhat. */
.pa-filter {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px;
  padding: 4px 18px; margin-bottom: 16px;
}
.pa-filter__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 0; }
.pa-filter__row--bottom { border-top: 1px solid #eef1f7; }
.pa-filter__label { font-size: 13.5px; font-weight: 600; color: #58657c; white-space: nowrap; }
.pa-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chip khoang gia: vien tron, cai dang chon to mau xanh dac */
.pa-chipf {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #dde4ef; background: #fff; color: #3d4a5e;
  font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.pa-chipf:hover { border-color: #1868db; color: #1868db; }
.pa-chipf.is-on { background: #1868db; border-color: #1868db; color: #fff; }

.pa-filter__field { display: inline-flex; align-items: center; gap: 9px; }
.pa-filter__field select {
  border: 1px solid #dde4ef; border-radius: 9px; padding: 9px 32px 9px 12px;
  font-family: inherit; font-size: 13.5px; color: #1f2c45; background: #fff;
  min-width: 148px; cursor: pointer;
}
.pa-filter__field select:focus { outline: none; border-color: #1868db; }
.pa-filter__check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d4a5e; cursor: pointer; }
.pa-filter__check input { width: 17px; height: 17px; accent-color: #1868db; cursor: pointer; }
.pa-filter__btn {
  margin-left: auto; border: 0; border-radius: 9px; background: #1868db; color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 30px; cursor: pointer;
  transition: background .16s ease;
}
.pa-filter__btn:hover { background: #0f4fae; }

.pa-found { font-size: 13.5px; color: #7d8798; margin: 0 0 14px; }

@media (max-width: 640px) {
  .pa-filter { padding: 2px 14px; }
  .pa-filter__row { padding: 12px 0; gap: 10px; }
  /* Chip tran ra het be ngang the roi cuon ngang, khong xuong dong lung tung */
  .pa-filter__chips {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px;
    scrollbar-width: none;
  }
  .pa-filter__chips::-webkit-scrollbar { display: none; }
  .pa-filter__field { flex: 1 1 100%; justify-content: space-between; }
  .pa-filter__field select { flex: 1; min-width: 0; max-width: 62%; }
  .pa-filter__btn { margin-left: 0; flex: 1 1 100%; padding: 12px 20px; }
}

/* Nut chon phuong thuc thanh toan: KHONG dat padding-left, Woo dung no de chua
   nut radio dat tuyet doi - ghi de se lam nut radio de len chu. */
.wc-block-components-radio-control__option {
  border: 1px solid #e5e9f0; border-radius: 9px; margin-bottom: 8px;
  padding-top: 14px; padding-bottom: 14px; padding-right: 14px;
}
.wc-block-components-radio-control__option:hover { border-color: #c9d6ec; }
.wc-block-components-radio-control__label { font-weight: 600; color: #1a2740; }
.wc-block-components-radio-control__description { color: #6b7789; font-size: 13px; }
.pa-from { font-size: 15px; font-weight: 600; color: #6b7789; margin-right: 2px; }

/* ---- Phan tom tat san pham theo mau tham chieu ---- */
.pa-chip {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: 6px;
  background: #eef3fd; color: #1868db; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
}
.pa-chip:hover { background: #e0eafb; }

/* Gia: do dam, gia goc gach ngang, chip % giam ben canh */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  color: #e0202b; font-size: 30px; font-weight: 800; margin: 0 0 8px; padding-bottom: 0; border-bottom: 0;
}
.woocommerce div.product .summary p.price del,
.woocommerce div.product .summary span.price del {
  color: #a3abb9; font-size: 17px; font-weight: 500; opacity: 1;
}
.woocommerce div.product .summary p.price ins,
.woocommerce div.product .summary span.price ins { text-decoration: none; color: #e0202b; }
.pa-saving { font-size: 13.5px; font-weight: 600; color: #0f7a4a; margin-bottom: 16px; }
.pa-saving .woocommerce-Price-amount { color: #0f7a4a; }

/* Diem noi bat */
.pa-features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-features li {
  position: relative; padding-left: 28px; font-size: 14px; line-height: 1.65; color: #3d4a5e;
}
.pa-features li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hai nut: Them vao gio (vien) va Mua ngay (dac) */
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: #fff !important; color: #1868db !important; border: 1.6px solid #1868db !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(.disabled) { background: #eef3fd !important; }
.woocommerce div.product form.cart .pa-buynow {
  flex: 1; min-width: 170px; background: #1868db !important; color: #fff !important;
  border: 1.6px solid #1868db !important; padding: 14px 26px; font-size: 15px; font-weight: 700; border-radius: 9px; cursor: pointer;
}
.woocommerce div.product form.cart .pa-buynow:hover { background: #0f4fae !important; border-color: #0f4fae !important; }
.woocommerce div.product form.cart .single_add_to_cart_button.disabled ~ .pa-buynow {
  background: #e3e8f0 !important; color: #939fb2 !important; border-color: #e3e8f0 !important; cursor: not-allowed;
}
.woocommerce div.product .woocommerce-variation-add-to-cart { gap: 12px; }

/* ---- Icon truoc chu tren cac nut mua ----
   Dung mask + currentColor thay vi background-image de icon tu doi mau theo
   chu: nut "Them vao gio" o trang chi tiet chu xanh, cac nut con lai chu
   trang, va tat ca deu doi mau khi di chuot qua hoac khi bi khoa. Boc trong
   @supports de trinh duyet khong ho tro mask khong ve ra mot o vuong dac. */
:root {
  --pa-ico-cart: 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='M2.5 3.6h2.7l2.3 10.6h9.4l2.1-7.8H6.1'/%3E%3Ccircle cx='9.6' cy='19' r='1.7'/%3E%3Ccircle cx='16.8' cy='19' r='1.7'/%3E%3C/svg%3E");
  --pa-ico-bolt: 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='M13.4 2.6L4.6 13.4h5.9l-.8 8 8.7-11h-6.1z'/%3E%3C/svg%3E");
}
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .woocommerce div.product form.cart .single_add_to_cart_button,
  .woocommerce div.product form.cart .pa-buynow,
  .woocommerce ul.products li.product .button,
  a.pa-homebtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button::before,
  .woocommerce div.product form.cart .pa-buynow::before,
  .woocommerce ul.products li.product .button::before,
  a.pa-homebtn::before {
    content: ""; width: 18px; height: 18px; flex: none;
    background-color: currentColor;
    -webkit-mask: var(--pa-btn-ico, var(--pa-ico-cart)) center / contain no-repeat;
    mask: var(--pa-btn-ico, var(--pa-ico-cart)) center / contain no-repeat;
  }
  /* Nut trong luoi san pham nho hon nut o trang chi tiet nen icon cung nho theo */
  .woocommerce ul.products li.product .button::before,
  a.pa-homebtn::before { width: 16px; height: 16px; }
  .woocommerce ul.products li.product .button,
  a.pa-homebtn { gap: 8px; }

  .woocommerce div.product form.cart .pa-buynow { --pa-btn-ico: var(--pa-ico-bolt); }

  /* Woo doi chu nut thanh "Xem gio hang" sau khi them xong - luc do icon gio
     hang khong con dung nghia nua. */
  .woocommerce ul.products li.product a.added_to_cart::before { display: none; }
}
/* Dai cam ket */
.pa-trust { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef1f7; display: flex; flex-direction: column; gap: 12px; }
.pa-trust-row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #46536a; }
.pa-trust-row svg { flex: none; }

/* ---- Gio hang: tong tien noi bat, phi giao hang mien phi mau xanh ---- */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #e0202b; }
.wc-block-components-totals-shipping .wc-block-components-totals-item__value { color: #0f7a4a; font-weight: 700; }
.wc-block-cart__submit-container { position: relative; }

/* Trang thai khoa cua hai nut mua: phai xam ro rang, khong de trong nhu dang bat */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  background: #f4f6f9 !important; color: #a3abb9 !important; border-color: #e3e8f0 !important;
}

/* ---- Gio hang: dua ve dang "Tom tat don" nhu mau ---- */
.wc-block-components-totals-item__label { font-size: 14px; }
.wc-block-cart__sidebar .wc-block-components-panel__button { font-size: 14px; }
.pa-continue {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; width: 100%;
  justify-content: center; font-size: 14px; font-weight: 600; color: #1868db;
}
.pa-continue:hover { color: #0f4fae; }

/* ================= Thanh toan: cac khoi dang the co icon ================= */
.wc-block-checkout__form .wc-block-components-checkout-step {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px;
}
.wc-block-components-checkout-step__heading { display: flex; align-items: center; gap: 11px; margin: 0 0 4px; }
.wc-block-components-checkout-step__title { font-size: 17px; font-weight: 700; color: #17263f; }
.wc-block-components-checkout-step__description { color: #7b879b; font-size: 13.5px; }

/* Icon dau moi khoi, gan theo class cua tung buoc */
.wc-block-components-checkout-step__heading::before {
  content: ""; width: 22px; height: 22px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.wc-block-checkout__contact-fields .wc-block-components-checkout-step__heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}
.wc-block-checkout__shipping-fields .wc-block-components-checkout-step__heading::before,
.wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10.3' r='2.6'/%3E%3C/svg%3E");
}
.wc-block-checkout__payment-method .wc-block-components-checkout-step__heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");
}
.wc-block-checkout__order-notes .wc-block-components-checkout-step__heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

/* Phuong thuc thanh toan dang the xep ngang */
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
  margin: 0; border: 1.5px solid #e5e9f0; border-radius: 11px; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option { padding: 0; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 0; border-radius: 11px;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover { border-color: #c9d6ec; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: #1868db; background: #f4f8fe;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__label { font-size: 14.5px; }
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
  padding: 0 16px 14px; font-size: 13px; color: #46536a; line-height: 1.65;
}

/* Cot phai: the "Don hang cua ban" */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 14px; padding: 22px;
}
.wc-block-components-order-summary__content { border: 0; }
.wc-block-components-order-summary-item__total-price { color: #e0202b; font-weight: 800; font-size: 15.5px; }
.wc-block-components-order-summary-item__individual-prices { color: #8b95a6; font-size: 12.5px; }

/* Nut dat hang + duong quay lai */
.wc-block-checkout__actions_row { flex-direction: column; align-items: stretch; gap: 0; }
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { display: none; }

/* Icon rieng cho tung phuong thuc thanh toan. Woo dat id dang
   radio-control-wc-payment-method-options-<gateway> nen khop bang [for*=]. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label { display: flex; align-items: center; gap: 11px; }
.wc-block-checkout__payment-method .wc-block-components-radio-control__label::before {
  content: ""; width: 34px; height: 34px; flex: none; border-radius: 9px;
  background-color: #eef3fd; background-repeat: no-repeat; background-position: center; background-size: 19px 19px;
}
.wc-block-checkout__payment-method label[for*="-cod"] .wc-block-components-radio-control__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5h11v9H2z'/%3E%3Cpath d='M13 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.7'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.7'/%3E%3C/svg%3E");
}
.wc-block-checkout__payment-method label[for*="-bacs"] .wc-block-components-radio-control__label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l9-5.5 9 5.5'/%3E%3Cpath d='M5 9.5v9M9.5 9.5v9M14.5 9.5v9M19 9.5v9'/%3E%3Cpath d='M2.5 19.5h19'/%3E%3C/svg%3E");
}
/* O dang chon: icon dao mau cho noi bat */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__label::before {
  background-color: #1868db;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) label[for*="-cod"] .wc-block-components-radio-control__label::before,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) label[for*="-bacs"] .wc-block-components-radio-control__label::before {
  filter: brightness(0) invert(1);
}

/* ================= Thanh toan ban co dien ================= */
.pa-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.pa-checkout__side { position: sticky; top: 16px; }

.pa-cocard { background: #fff; border: 1px solid #e5e9f0; border-radius: 14px; padding: 24px; margin-bottom: 20px; }
.pa-cocard__title {
  display: flex; align-items: center; gap: 11px; margin: 0 0 18px;
  font-size: 17.5px; font-weight: 700; color: #17263f;
}
.pa-cocard__title svg { flex: none; }

/* Luoi truong nhap */
.pa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.pa-grid .pa-col-12 { grid-column: 1 / -1; }
.pa-grid .pa-col-6 { grid-column: span 1; }
.pa-grid .pa-hidden { display: none; }
.woocommerce form .pa-grid .form-row { margin: 0; padding: 0; }
.woocommerce form .pa-grid label {
  display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: #24334d;
}
.woocommerce form .pa-grid label .required { color: #e0202b; text-decoration: none; border: 0; }
.woocommerce form .pa-grid .input-text,
.woocommerce form .pa-grid select,
.woocommerce form .pa-grid textarea,
.pa-grid .select2-container .select2-selection--single {
  width: 100%; border: 1px solid #dfe5ef; border-radius: 9px; padding: 12px 14px;
  font-family: inherit; font-size: 14.5px; color: #1f2c45; background: #fff; height: auto; line-height: 1.5;
}
.woocommerce form .pa-grid textarea { min-height: 96px; resize: vertical; }
.woocommerce form .pa-grid .input-text:focus,
.woocommerce form .pa-grid select:focus,
.woocommerce form .pa-grid textarea:focus { border-color: #1868db; outline: none; }
.woocommerce form .pa-grid ::placeholder { color: #a3abb9; }

/* O chon hinh thuc thanh toan */
.pa-paylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pa-paytile { margin: 0; background: transparent; }
.pa-paytile input { position: absolute; opacity: 0; pointer-events: none; }
.pa-paytile label {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.6px solid #e5e9f0; border-radius: 12px; padding: 14px 16px;
  font-size: 14.5px; font-weight: 600; color: #1a2740; transition: border-color .15s ease, background .15s ease;
}
.pa-paytile label:hover { border-color: #c9d6ec; }
.pa-paytile input:checked + label { border-color: #1868db; background: #f4f8fe; }
.pa-paytile__ico {
  width: 36px; height: 36px; flex: none; border-radius: 10px; background: #eef3fd;
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.payment_method_cod .pa-paytile__ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5h11v9H2z'/%3E%3Cpath d='M13 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.7'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.7'/%3E%3C/svg%3E");
}
.payment_method_bacs .pa-paytile__ico {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l9-5.5 9 5.5'/%3E%3Cpath d='M5 9.5v9M9.5 9.5v9M14.5 9.5v9M19 9.5v9'/%3E%3Cpath d='M2.5 19.5h19'/%3E%3C/svg%3E");
}
.pa-paytile input:checked + label .pa-paytile__ico { background-color: #1868db; filter: none; }
.pa-paytile input:checked + label .pa-paytile__ico { background-image: none; }
.pa-paytile input:checked + label .pa-paytile__ico::after {
  content: ""; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.payment_method_cod input:checked + label .pa-paytile__ico::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5h11v9H2z'/%3E%3Cpath d='M13 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.7'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.7'/%3E%3C/svg%3E");
}
.payment_method_bacs input:checked + label .pa-paytile__ico::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l9-5.5 9 5.5'/%3E%3Cpath d='M5 9.5v9M9.5 9.5v9M14.5 9.5v9M19 9.5v9'/%3E%3Cpath d='M2.5 19.5h19'/%3E%3C/svg%3E");
}
.pa-paytile__check { display: none; }
.pa-paytile input:checked + label .pa-paytile__check {
  display: block; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23ffffff'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pa-paybox {
  margin-top: 14px; background: #f4f8fe; border: 1px solid #e0eafb; border-radius: 11px;
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: #33415a; line-height: 1.7;
}
.pa-paybox p { margin: 0; }
.pa-paybox__ico {
  width: 19px; height: 19px; flex: none; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231868db' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11v5.5M12 7.8v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Khoi tom tat don */
.pa-cosummary { position: sticky; top: 16px; }
.pa-cocard__title--plain { margin-bottom: 16px; }
.pa-corev__items { list-style: none; margin: 0 0 4px; padding: 0; }
.pa-corev__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid #eef1f7; }
.pa-corev__thumb img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f7f9fc; display: block; }
.pa-corev__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pa-corev__name { font-size: 14px; font-weight: 600; color: #1a2740; line-height: 1.4; }
.pa-corev__unit { font-size: 12.5px; color: #8b95a6; }
.pa-corev__qty { font-size: 12.5px; color: #8b95a6; white-space: nowrap; }
.pa-corev__line { font-size: 15px; font-weight: 800; color: #e0202b; white-space: nowrap; }
.pa-corev__line .woocommerce-Price-amount { color: #e0202b; }

.pa-coupon { display: flex; gap: 10px; padding: 16px 0; border-bottom: 1px solid #eef1f7; }
.pa-coupon__input { flex: 1; min-width: 0; border: 1px solid #dfe5ef; border-radius: 9px; padding: 11px 13px; font-family: inherit; font-size: 14px; }
.pa-coupon__input:focus { border-color: #1868db; outline: none; }
.pa-coupon__btn {
  flex: none; border: 1.5px solid #1868db; background: #fff; color: #1868db; border-radius: 9px;
  padding: 11px 18px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.pa-coupon__btn:hover { background: #eef3fd; }

.pa-corev__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eef1f7; font-size: 14.5px; color: #46536a; }
.pa-corev__ship .woocommerce-Price-amount, .pa-corev__ship { color: #0f7a4a; font-weight: 700; }
.pa-corev__row--total { border-bottom: 0; padding: 16px 0 4px; }
.pa-corev__row--total > span:first-child { font-size: 16px; font-weight: 700; color: #17263f; }
.pa-corev__total, .pa-corev__total .woocommerce-Price-amount { font-size: 23px; font-weight: 800; color: #e0202b; }

.pa-place { margin: 14px 0 0; padding: 0; }
.woocommerce .pa-placebtn, .woocommerce #place_order.pa-placebtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #1868db; color: #fff; border: 0; border-radius: 10px;
  padding: 16px 20px; font-size: 15.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
}
.woocommerce .pa-placebtn::before {
  content: ""; width: 19px; height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce .pa-placebtn:hover { background: #0f4fae; }
.pa-corev .pa-continue { margin-top: 14px; }

@media (max-width: 980px) {
  .pa-checkout { grid-template-columns: 1fr; }
  .pa-checkout__side, .pa-cosummary { position: static; }
}
@media (max-width: 560px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pa-grid .pa-col-6 { grid-column: 1 / -1; }
}

/* Woo tu them "(tuy chon)" sau nhan cua truong khong bat buoc; nhan cua minh da
   ghi ro roi nen an di, tranh "Email (khong bat buoc) (tuy chon)". */
.pa-grid label .optional { display: none; }
/* Thong bao chinh sach rieng tu trong khoi tom tat: thu nho cho do chiem cho */
.pa-corev .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.65; color: #8b95a6; margin: 14px 0 0; }
.pa-corev .woocommerce-terms-and-conditions-wrapper { margin-bottom: 0; }

/* WooCommerce dat clearfix ::before/::after tren ul.payment_methods. Trong mot
   grid container, hai pseudo-element do la GRID ITEM -> chung chiem mat o dau va
   day cac o chon sang cot sau (do duoc: luoi ra 3 cot cho 2 o, o dau nam o cot 2).
   Cung phai ep lai padding vi rule cua Woo co do uu tien cao hon. */
.woocommerce ul.pa-paylist::before,
.woocommerce ul.pa-paylist::after { content: none !important; display: none !important; }
.woocommerce ul.pa-paylist { padding: 0 !important; margin: 0 !important; }

/* Ten goi hang cua Woo va danh sach phuong thuc trong khoi tom tat */
.pa-corev__ship ul { list-style: none; margin: 0; padding: 0; text-align: right; }
.pa-corev__ship li { margin: 0 0 4px; }
.pa-corev__ship label { font-weight: 600; color: #0f7a4a; font-size: 13.5px; }
.pa-corev__ship input[type="radio"] { margin-right: 6px; }
.pa-corev__row .pa-shipname { display: block; font-size: 12px; color: #8b95a6; font-weight: 500; }

/* O chon Xa/Phuong khi chua chon tinh */
.pa-grid select:disabled { background: #f6f8fb; color: #a3abb9; cursor: not-allowed; }

/* ================= Mobile ================= */

/* Safari tren iOS tu phong to trang khi bam vao o nhap co font-size duoi 16px.
   Bat buoc 16px cho moi o nhap tren man hinh nho de khong bi zoom nhay layout. */
@media (max-width: 820px) {
  .woocommerce form .pa-grid .input-text,
  .woocommerce form .pa-grid select,
  .woocommerce form .pa-grid textarea,
  .pa-coupon__input,
  .woocommerce .woocommerce-ordering select,
  .wc-block-components-text-input input,
  .wc-block-components-address-form input,
  .wc-block-components-quantity-selector__input,
  [data-r="search"] input[type="search"],
  .woocommerce div.product form.cart div.quantity input.qty,
  /* O email nhan tin o footer va form dang nhap tren trang thanh toan cung duoi
     16px - quet lai toan site moi phat hien, ca hai deu lam iOS phong to trang. */
  footer input[type="email"],
  .woocommerce form.login input.input-text,
  #username, #password {
    font-size: 16px !important;
  }
}

/* Woo van render khoi thue o gio hang du cua hang khong tinh thue -> mot hang
   trong co vien. An di khi khong co thue; bat lai thue thi hang nay tu hien. */
body.pa-no-tax .wp-block-woocommerce-cart-order-summary-taxes-block,
body.pa-no-tax .wp-block-woocommerce-checkout-order-summary-taxes-block { display: none; }

/* Gio hang cung chi hien so tien phi giao hang, khong hien ten phuong thuc
   ("Giao hang tieu chuan") - khop voi o don hang ben trang thanh toan. */
.wc-block-components-totals-shipping__via { display: none; }

@media (max-width: 780px) {
  /* Gio hang dang block tren mobile */
  .wp-block-woocommerce-cart .wc-block-cart-items__row { padding: 14px 0; }
  .wc-block-cart-item__image { width: 72px; padding-right: 12px; }
  .wc-block-cart-item__image img { width: 72px; height: 72px; object-fit: contain; }
  .wc-block-components-product-name { font-size: 14.5px; line-height: 1.45; }
  .wc-block-cart-item__total { text-align: right; }
  .wc-block-cart-item__total .wc-block-components-product-price { font-size: 15px; font-weight: 800; }
  .wc-block-components-product-metadata { font-size: 12.5px; }
  .wc-block-components-totals-item { padding: 12px 0; }
  .wc-block-components-totals-item__label { font-size: 14px; }
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; }
  .wc-block-components-sidebar, .wc-block-checkout__form { padding: 16px; }

  /* Trang thanh toan ban co dien */
  .pa-cocard { padding: 18px 16px; border-radius: 12px; }
  .pa-cocard__title { font-size: 16px; }
  .pa-corev__item { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 4px; }
  .pa-corev__thumb img { width: 48px; height: 48px; }
  .pa-corev__qty { grid-column: 3; }
  .pa-corev__line { grid-column: 2 / -1; text-align: right; }
  .pa-coupon { flex-wrap: wrap; }
  .pa-coupon__input { flex: 1 1 100%; }
  .pa-coupon__btn { flex: 1 1 100%; }
}

/* WooCommerce nang cap o chon Tinh/Thanh pho bang selectWoo (ban select2 cua Woo).
   No tu sinh MOT O TIM KIEM RIENG khi mo dropdown - o do nam ngoai .pa-grid va
   duoc select2 dat font-size nho, nen iOS van tu phong to trang du cac o nhap
   khac da 16px. Dropdown duoc gan thang vao <body> nen bo chon phai o cap goc. */
@media (max-width: 820px) {
  .select2-container .select2-search__field,
  .select2-search--dropdown .select2-search__field,
  .select2-container .select2-results__option,
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-container--default .select2-selection--single {
    font-size: 16px !important;
  }
}

/* Cho o chon cua select2 trong khop voi cac o nhap con lai */
.pa-grid .select2-container--default .select2-selection--single {
  height: auto; border: 1px solid #dfe5ef; border-radius: 9px; padding: 6px 4px;
}
.pa-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1f2c45; line-height: 1.5; padding-left: 10px;
}
.pa-grid .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 6px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #1868db; }
/* ================= Gio hang tren mobile: thiet ke lai =================
   Duoi 781px Woo doi moi hang gio hang thanh CSS grid voi khuon
   "80px 132px 0 auto" cong khe 16px = 335px, trong khi cot chua no chi rong
   326px -> bang bi day tran ra ngoai. Dong thoi Woo chi cap padding cho bang
   san pham va the tom tat tu 782px tro len, duoi nguong do padding ve 0 nen
   anh, nhan va so tien deu dinh sat vien the, nhin nhu bi cat mat.
   Ban thiet ke lai: bo the trang bao ngoai cua page.php de lay lai 20px be
   ngang, dung hai the trang rieng (danh sach san pham / tom tat don) tren nen
   xam, dat lai khuon grid cho vua va ep moi dong tong tien ve dang
   "nhan trai / so phai" khong bao gio de len nhau.
   KHONG dung table-layout: fixed - Woo an <thead> tren mobile nen hang dau
   rong 0, thuat toan fixed lay chinh hang do lam chuan va moi o deu tran ra. */
@media (max-width: 780px) {

  /* The trang cua page.php bao them mot lop nua quanh hai the ben trong va an
     mat 32px be ngang. Tren trang gio hang bo han di. */
  body.woocommerce-cart main.pa-wrap > article {
    background: transparent !important; padding: 0 !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  body.woocommerce-cart main.pa-wrap > article > h1 { font-size: 21px; margin-bottom: 12px; }

  /* ---- The 1: danh sach san pham ---- */
  /* Woo dat "background: none !important" cho chinh bang nay va khuon grid cua
     hang o do uu tien (0,3,1) ngang voi bo chon cua theme, nen phan ghi de o
     day bat buoc phai dung !important. */
  .wp-block-woocommerce-cart .wc-block-cart-items {
    width: 100%; max-width: 100%; border-spacing: 0;
    background: #fff !important; border: 1px solid #e5e9f0 !important; border-radius: 12px;
  }
  /* Khuon goc cua Woo la "80px 132px" + khe 16px, cot 2 co do rong CO DINH nen
     hang khong the co lai vua cot chua no. Doi cot 2 sang minmax(0, 1fr). */
  .wp-block-woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 60px minmax(0, 1fr) 0 minmax(0, 82px) !important;
    column-gap: 10px !important; padding: 18px 16px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__image { width: 60px; padding: 0 !important; }
  .wp-block-woocommerce-cart .wc-block-cart-item__image img { width: 60px; height: 60px; object-fit: contain; }
  .wp-block-woocommerce-cart .wc-block-cart-item__product { min-width: 0; padding: 0 !important; }
  .wp-block-woocommerce-cart .wc-block-cart-item__total { padding: 0 !important; text-align: right; }
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector { min-width: 92px; max-width: 100px; }
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input { min-width: 28px; }
  .wp-block-woocommerce-cart .wc-block-components-sale-badge {
    white-space: normal; font-size: 10.5px; line-height: 1.35; padding: 3px 7px; margin-top: 4px;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price { font-size: 14.5px; }
  .wp-block-woocommerce-cart .wc-block-components-product-name { overflow-wrap: anywhere; }
  .wp-block-woocommerce-cart .wc-block-components-product-metadata { overflow-wrap: anywhere; }

  /* ---- The 2: tom tat don ---- */
  .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    padding: 6px 18px 18px !important; border-radius: 12px;
  }
  /* Woo an tieu de nay duoi 782px. Bat lai de the co diem tua thay vi mo dau
     bang o ma giam gia. */
  .wp-block-woocommerce-cart .wc-block-cart__totals-title {
    display: block !important; margin: 0; padding: 16px 0 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #8b95a6;
  }

  /* Moi dong tong tien: nhan co the co lai, so tien luon nguyen dong va sat le
     phai; dong mo ta ("Giao hang tieu chuan") xuong dong rieng. */
  .wp-block-woocommerce-cart .wc-block-components-totals-item {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 10px; padding: 0; margin: 0;
  }
  .wp-block-woocommerce-cart .wc-block-components-totals-item__label { flex: 1 1 auto; min-width: 0; }
  .wp-block-woocommerce-cart .wc-block-components-totals-item__value {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap; text-align: right;
  }
  .wp-block-woocommerce-cart .wc-block-components-totals-item__description { flex: 1 0 100%; margin-top: 3px; }

  /* Thu gon khoang trong doc giua cac dong */
  .wp-block-woocommerce-cart .wc-block-components-totals-wrapper { padding: 13px 0; }
  /* Khoang trong 16px truoc dong Tong cong den tu padding-bottom cua khoi nay */
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block { margin: 0; padding-bottom: 0; }
  /* Vien tren cua o bao ngoai da la duong ke roi - bo vien cua chinh dong Tong
     cong di, khong se thanh hai duong ke sat nhau. */
  .wp-block-woocommerce-cart .wc-block-components-totals-footer-item { border-top: 0; padding-top: 0; }
  .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 15px; }
  .wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; }

  /* Nut thanh toan chiem tron be ngang the */
  .wp-block-woocommerce-cart .wc-block-cart__submit-container { padding: 0; }
  .wp-block-woocommerce-cart .wc-block-cart__submit-button { width: 100%; padding: 14px 18px; font-size: 15px; }
  .wp-block-woocommerce-cart .pa-continue { margin-top: 12px; }

  /* Thanh thong bao noi cua Woo dat vi tri co dinh, tu tran 8px ra khoi man hinh */
  .wc-block-components-notices__snackbar {
    left: 12px !important; right: 12px !important; width: auto !important;
    max-width: none !important; box-sizing: border-box;
  }
}

/* Woo gan cac lop .is-mobile / .is-small / .is-medium cho khoi gio hang theo
   BE RONG CUA CHINH KHOI, khong theo be rong man hinh, va chi tra padding cho
   the tom tat tu 782px man hinh tro len. Chi dua vao @media thi van con mot
   khe o giua (vi du khung gio hang 700px nam tren man 820px): the xep doc
   nhung khong duoc cap padding. Neo them theo chinh cac lop do de the luon co
   le trong khi gio hang xep doc, o bat ky be rong nao. */
.wc-block-cart.is-mobile .wc-block-cart__sidebar,
.wc-block-cart.is-small .wc-block-cart__sidebar,
.wc-block-cart.is-medium .wc-block-cart__sidebar {
  padding: 6px 18px 18px !important; border-radius: 12px;
}
.wc-block-cart.is-mobile .wc-block-cart__totals-title,
.wc-block-cart.is-small .wc-block-cart__totals-title,
.wc-block-cart.is-medium .wc-block-cart__totals-title {
  display: block !important; margin: 0; padding: 16px 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8b95a6;
}

/* Trang dang page (gio hang, thanh toan, tai khoan) duoc page.php boc trong mot
   <article> co padding 26px moi ben - an mat 52px tren man hinh 390px, chi con
   306px cho noi dung. Do la ly do that su khien bang gio hang tran. Thu padding
   xuong tren mobile de noi dung co du cho. */
@media (max-width: 780px) {
  main.pa-wrap > article { padding: 16px !important; }
}

/* Luoi san pham o trang chu: cac the cao bang nhau de nut thang hang.
   Grid item mac dinh da stretch, nhung the phai la flex column va khoi nut phai
   co margin-top:auto thi nut moi bi day xuong day. */
[data-r="prods"] > div { height: 100%; }

/* ---- Nut "Xem them N san pham" tren mobile ----
   JS chen nut vao lam con cuoi cua luoi, nen no chiem tron mot hang. Quy tac
   an chi dua tren lop .is-collapsed do JS gan - tat JS thi luoi hien day du. */
.pa-morewrap { display: none; }
@media (max-width: 640px) {
  .pa-morewrap { display: block; grid-column: 1 / -1; margin-top: 2px; }
  /* :not(.pa-morewrap) vi chinh nut cung la con thu N cua luoi */
  /* The o luoi trang chu mang "display: flex" viet thang trong thuoc tinh
     style, ma style noi tuyen thang moi quy tac thuong - phai !important. */
  [data-r="prods"].is-collapsed > *:nth-child(n+5):not(.pa-morewrap),
  .woocommerce ul.products.is-collapsed > *:nth-child(n+5):not(.pa-morewrap) { display: none !important; }
  /* Luoi san pham cua Woo dat kieu the cho <li>, nut khong duoc an theo */
  .woocommerce ul.products li.pa-morewrap {
    background: none; border: 0; box-shadow: none; padding: 0; transform: none;
  }
  .pa-morebtn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: #fff; border: 1px solid #dde4ef; border-radius: 10px; padding: 13px 18px;
    font-family: inherit; font-size: 14px; font-weight: 650; color: #1868db; cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
  }
  .pa-morebtn:hover { border-color: #1868db; background: #f6f9ff; }
  .pa-morebtn::after {
    content: ""; width: 8px; height: 8px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
  }
}
.pa-homebtn { transition: background .18s ease; }
a.pa-homebtn:hover { background: #0f4fae !important; color: #fff !important; }

/* Man 375px tro xuong: o cua dai cam ket chi con ~142px, thu them icon va khe
   thi tieu de moi ve duoc mot dong. Khoi rieng chu khong long vao khoi 640px
   o tren - long vao se dong som media query do va day moi quy tac con lai
   sang nguong 375px. */
@media (max-width: 375px) {
  [data-r="trust"] > div { gap: 8px !important; }
  [data-r="trust"] > div > span:first-child { width: 30px !important; height: 30px !important; }
  [data-r="trust"] > div > span:last-child > span:first-child { font-size: 11.5px !important; }
}

/* ================= Trang "Da nhan don hang" ================= */
.pa-thanks__head {
  display: flex; align-items: flex-start; gap: 14px;
  background: #f3f9f4; border: 1px solid #d6ecd9; border-radius: 12px; padding: 18px;
}
.pa-thanks__head--fail { background: #fdf4f4; border-color: #f0d6d6; }
.pa-thanks__icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%; background: #189a4c;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.pa-thanks__head--fail .pa-thanks__icon { background: #d6323c; }
.pa-thanks__icon::before {
  content: ""; width: 15px; height: 8px; margin-top: -4px;
  border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff; transform: rotate(-45deg);
}
.pa-thanks__head--fail .pa-thanks__icon::before {
  width: 16px; height: 0; margin: 0; border-left: 0; border-bottom: 2.6px solid #fff; transform: none;
}
.pa-thanks__title { margin: 0; font-size: 19px; font-weight: 800; color: #14243f; }
.pa-thanks__lead { margin: 5px 0 0; font-size: 13.5px; line-height: 1.65; color: #46536a; }

/* O thong tin don. Woo in ra <ul> gach dau dong - doi thanh luoi the. */
/* auto-fit chu khong phai repeat(4): o "Thanh toan" chi hien khi don co cong
   thanh toan, nen so o thay doi - co dinh 4 cot thi khi con 3 o se ho mot
   khoang trong o cuoi hang. */
/* Chon phai du ba lop: Woo dat .woocommerce ul.order_details { margin: 0 0 3em }
   nen neu chi .pa-thanks__meta thi luoi khong co le tren (dinh vao the xac
   nhan) ma lai thua 3em ben duoi. */
.pa-thanks ul.pa-thanks__meta {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}
/* Woo dat clearfix ::before/::after cho ul.order_details va cho khoi dia chi.
   Trong mot grid, hai pseudo-element do TRO THANH O CUA LUOI: chung chiem hai
   o dau nen the dau tien bi day sang giua va the cuoi bi day xuong hang duoi.
   Bo chon cua Woo co do uu tien cao hon nen phai !important. */
.pa-thanks ul.pa-thanks__meta::before, .pa-thanks ul.pa-thanks__meta::after,
.pa-thanks .woocommerce-columns--addresses::before,
.pa-thanks .woocommerce-columns--addresses::after { content: none !important; display: none !important; }
/* Woo cho moi <li> float trai, co vien dut ben phai va co chu rieng - go het
   de chung la o cua luoi binh thuong. */
.pa-thanks ul.pa-thanks__meta li {
  margin: 0 !important; padding: 12px 14px !important; float: none !important;
  width: auto !important; border: 1px solid #e7eaf1 !important; border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; line-height: 1.5; text-transform: none;
}
/* Chi nhan o dau tien. "li span" khop ca <span> ky hieu tien ma Woo boc quanh
   so tien, bien "149.000d" thanh "149.000D" viet hoa co gian chu. */
.pa-thanks__meta li > span:first-child { font-size: 11.5px; color: #8b95a6; text-transform: uppercase; letter-spacing: .04em; }
/* Woo cho gia tri 1.4em (~19.6px). O be nhat trong luoi la ~199px o man 1024,
   ma "Chuyen khoan ngan hang" o co do rong ~230px nen o do cao gap ruoi cac o
   ben canh. 16px van dam net ma nam gon mot dong tu 1024px tro len. Chon cua
   Woo (.woocommerce ul.order_details li strong) can ba lop moi thang. */
.pa-thanks ul.pa-thanks__meta li strong { font-size: 16px; font-weight: 700; color: #17263f; }
.pa-thanks__meta li strong .amount { color: #e0202b; }

/* Khoi chuyen khoan */
.pa-bank {
  margin-top: 22px; border: 1px solid #d9e3f5; border-radius: 12px;
  background: #f7faff; padding: 18px;
}
.pa-bank__title { margin: 0; font-size: 16px; font-weight: 800; color: #14243f; }
.pa-bank__lead { margin: 6px 0 14px; font-size: 13px; line-height: 1.65; color: #46536a; }
.pa-bank__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* So o le thi o cuoi bi lung lung mot nua hang - cho no keo het chieu ngang */
.pa-bank__row--wide { grid-column: 1 / -1; }
/* Mot dong moi o: nhan trai - gia tri - nut sao chep phai.
   ⚠️ Truoc day nhan nam TREN gia tri va nut Sao chep dat tuyet doi o goc phai, nen
   moi o cao ~90px va nam o dong tien cao 5 o phai keo dai 460px - dai gap doi ca ma
   QR dung canh, nhin ra la mot cot chu lenh khenh ben mot o vuong. Xep mot dong thi
   con ~44px moi o.
   ⚠️ align-items: baseline chu khong center: o "So tien" co co chu lon hon han (19px
   so voi 15px), can giua thi chan chu cua no lech han so voi bon o kia. */
.pa-bank__row {
  background: #fff; border: 1px solid #e2e9f5; border-radius: 10px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
/* ⚠️ 168px la so DO duoc, khong phai so chon cho tron: nhan dai nhat cua khoi nay -
   "NỘI DUNG CHUYỂN KHOẢN" - rong 164px o co chu 11,5px hoa kem letter-spacing .04em.
   De 132px thi rieng no xuong hai dong va o cuoi cao hon bon o kia, nhin ra la mot
   hang le. Doi chu nhan hay co chu thi phai do lai. */
.pa-bank__k {
  flex: none; width: 168px; font-size: 11.5px; color: #8b95a6;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.5;
}
.pa-bank__v { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: #17263f; overflow-wrap: anywhere; }
.pa-bank__v--big { font-size: 19px; color: #e0202b; }
.pa-bank__v--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
/* ⚠️ Nut nam TRONG dong (flex item) chu khong dat tuyet doi nua. Dat tuyet doi thi
   o hep di mot chut la no de len chinh dong chu no dung canh - da vap dung the o
   kho dien thoai khi them ma QR. Trong luong dong thi khong bao gio de nhau. */
.pa-copy {
  /* ⚠️ margin-left: auto de nut luon o le PHAI - ke ca khi dong chat qua va no tut
     xuong hang rieng. Thieu no thi o kho 360px, nut cua dong "Noi dung chuyen khoan"
     roi xuong va nam sat le trai, trong nhu mot cai nut lac cho. */
  flex: none; align-self: center; margin-left: auto;
  border: 1px solid #cfdcf2; background: #fff; color: #1868db; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 650; border-radius: 7px; padding: 5px 10px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pa-copy:hover { background: #eef4ff; border-color: #1868db; }
.pa-copy.is-done { background: #e8f6ec; border-color: #b7dfc2; color: #14803f; }
.pa-bank__warn { margin: 14px 0 0; font-size: 13.5px; color: #46536a; }
.pa-bank__admin {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 9px;
  background: #fff6e5; border: 1px solid #f0dcb4; font-size: 12.5px; color: #6b5423;
}

/* Doan huong dan them chu cua hang tu viet trong Cai dat cong thanh toan */
.pa-bank__note { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #46536a; }
.pa-bank__note p { margin: 0 0 6px; }
.pa-bank__note p:last-child { margin-bottom: 0; }
/* Luoi so tai khoan la do inc/checkout.php in ra, khoi rieng cua Woo da duoc go
   khoi hook. Dong nay chi la chot chan: neu ban WooCommerce nao doi ten ham nen
   go hook truot, khoi cua Woo se lai hien ra va lap lai y nguyen nhung so ta da
   in o tren. */
.pa-thanks .woocommerce-bacs-bank-details { display: none; }

/* Bang chi tiet don + dia chi do woocommerce_thankyou in ra.

   Hai khoi dung canh nhau tren man rong. Dung flex chu khong phai grid vi hai
   le: neu don khong co khoi dia chi thi bang tu chiem het chieu ngang thay vi
   bo trong mot cot, va khi khong con du cho hai cot thi chung tu xuong hang -
   khong can breakpoint rieng. Con nhung gi plugin khac chen vao hook nay thi
   nam tron mot hang cua no. */
.pa-thanks__cols {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px;
}
.pa-thanks .pa-thanks__cols > * { flex: 1 1 100%; margin-top: 0; }
/* Dong the giong the "Thong tin chuyen khoan". align-items de mac dinh
   (stretch) cho hai the cao bang nhau, khong so le tren duoi. */
.pa-thanks .pa-thanks__cols > .woocommerce-order-details,
.pa-thanks .pa-thanks__cols > .woocommerce-customer-details {
  border: 1px solid #d9e3f5; border-radius: 12px; background: #f7faff; padding: 22px 26px;
}
.pa-thanks .pa-thanks__cols > .woocommerce-order-details { flex: 2 1 420px; }
.pa-thanks .pa-thanks__cols > .woocommerce-customer-details { flex: 1 1 260px; }
.pa-thanks .woocommerce-order-details__title, .pa-thanks .woocommerce-column__title {
  font-size: 16px; font-weight: 800; color: #14243f; margin: 0 0 12px;
}
/* Hai cot nay de tran - khong khung, khong nen. Chi con nhung duong ke ngang
   mong de tach dong. Padding ngang bang 0 de chu thang hang voi tieu de cot
   ("Chi tiet don hang") thay vi thut vao mot doan. */
/* Bang nay cung mang lop shop_table nen an theo kieu cua bang gio hang: nen
   trang, vien va bo goc rieng. Trong the thi phai trong suot, khong thi giua
   the hien ra mot mang trang le loi. */
.pa-thanks table.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; background: transparent; border: 0;
}
.pa-thanks table.woocommerce-table--order-details th,
.pa-thanks table.woocommerce-table--order-details td {
  padding: 12px 0; font-size: 13.5px; border-bottom: 1px solid #e4ebf7; text-align: left; vertical-align: top;
}
/* Cot cuoi phai sat le phai de so tien thang hang, con cac cot truoc no can mot
   khoang tho - khong thi nhan "Luu y:" dinh luon vao loi nhan cua khach. */
.pa-thanks table.woocommerce-table--order-details th:not(:last-child) { padding-right: 14px; }
.pa-thanks table.woocommerce-table--order-details thead th {
  background: transparent; font-size: 12.5px; color: #58657c; font-weight: 700; white-space: nowrap;
}
.pa-thanks table.woocommerce-table--order-details td:last-child,
.pa-thanks table.woocommerce-table--order-details th:last-child { text-align: right; }
/* Chi cam xuong dong trong so tien. Truoc day cot phai la nowrap ca cot, ma
   Woo cung nhet loi nhan cua khach vao chinh cot do - mot cau dai khong duoc
   xuong dong keo bang rong 409px trong khung 326px, ca trang truot ngang. */
.pa-thanks table.woocommerce-table--order-details .amount { white-space: nowrap; }
/* Dong loi nhan: <th> cua no khong co scope="row" nhu cac dong tong. */
.pa-thanks table.woocommerce-table--order-details tfoot th:not([scope]) + td {
  text-align: left; font-weight: 400; color: #46536a;
}
/* Cot nhan chiem 2/3 bang, nen nhan can trai thi no cach so tien mot khoang
   rong hoac - vi Woo to nen cho o <th> - thanh mot mang mau lon. Can phai cho
   nhan di sat so tien, va chi to nen o dong tong cuoi. */
.pa-thanks table.woocommerce-table--order-details tfoot th {
  font-weight: 600; color: #46536a; text-align: right; background: transparent;
}
/* Dong tong cuoi KHONG phai lúc nao cung la dong cuoi bang: khach ghi loi nhan
   thi Woo them mot dong "Luu y:" phia sau. inc/checkout.php danh dau gia tri
   tong bang .pa-grandtotal de bat dung dong. */
.pa-thanks table.woocommerce-table--order-details tfoot .pa-grandtotal { font-size: 15px; font-weight: 800; }
.pa-thanks table.woocommerce-table--order-details tfoot .pa-grandtotal .amount { color: #e0202b; }
/* To nen ca dong. Trinh duyet cu khong hieu :has() se bo qua khoi nay - dong
   tong van dam va do nho hai dong tren, chi la khong co nen. */
.pa-thanks table.woocommerce-table--order-details tfoot tr:has(.pa-grandtotal) th,
.pa-thanks table.woocommerce-table--order-details tfoot tr:has(.pa-grandtotal) td {
  font-size: 15px; font-weight: 800; color: #17263f;
  border-top: 1px solid #cfdcf2; border-bottom: 0;
}
/* Dong cuoi bang khong can duong ke - duoi no la day the roi */
.pa-thanks table.woocommerce-table--order-details tfoot tr:last-child th,
.pa-thanks table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; }
/* Neu cua hang bat hoi ca dia chi thanh toan lan dia chi giao hang thi Woo in
   ra hai cot - de tran nhu phan con lai. */
.pa-thanks .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Woo dong san mot cai khung cho <address> (vien 2px o duoi/phai, bo goc,
   padding) - go het cho khop voi bang ben canh. */
.pa-thanks .woocommerce-customer-details address {
  display: block; border: 0; border-radius: 0; padding: 0; background: transparent;
}
.pa-thanks address { font-style: normal; font-size: 13.5px; line-height: 1.75; color: #3d4a5e; }
/* Woo thut dong dien thoai vao 1.5em de lay cho cho icon ::before - giu nguyen,
   chi noi khoang cach voi dia chi ben tren ra. */
.pa-thanks .woocommerce-customer-details--phone { margin: 8px 0 0; }
.pa-thanks__back { margin: 24px 0 0; text-align: center; }
.pa-thanks__back a { font-size: 14px; font-weight: 650; color: #1868db; }

@media (max-width: 780px) {
  /* Tren dien thoai moi the chi rong ~158px: "Chuyen khoan ngan hang" xuong ba
     dong, ngay dat xuong hai dong, hai the canh nhau cao thap khac nhau. Doi
     thanh mot danh sach nhan-trai gia-tri-phai: gon hon, thang hang, khong
     con chu nao phai xuong dong. */
  .pa-thanks__meta {
    grid-template-columns: 1fr; gap: 0;
    background: #fff; border: 1px solid #e7eaf1; border-radius: 12px; overflow: hidden;
  }
  .pa-thanks ul.pa-thanks__meta li {
    border: 0 !important; border-bottom: 1px solid #eef1f7 !important; border-radius: 0;
    padding: 11px 14px !important;
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .pa-thanks ul.pa-thanks__meta li:last-child { border-bottom: 0 !important; }
  .pa-thanks__meta li > span:first-child { flex: none; }
  /* Woo cho gia tri 1.4em - tren dien thoai thi "Chuyen khoan ngan hang" xuong
     hai dong. Chon cua Woo la .woocommerce ul.order_details li strong nen phai
     du ba lop de thang. */
  .pa-thanks ul.pa-thanks__meta li strong { font-size: 14px; text-align: right; }

  .pa-bank__grid, .pa-thanks .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  /* ⚠️ Tren dien thoai BO be rong co dinh cua nhan va cho dong tu xuong hang khi
     khong du cho - KHONG ep san thanh hai dong. Do that o kho 414px voi du lieu
     that: nhan + gia tri + nut van vua mot dong (312/356px), ep hai dong la khoi
     chu CAO HON ca ban cu (431px so voi 374px) - tuc la sua cho gon lai thanh dai
     ra. Chi khi gia tri that su dai thi no moi tu tut xuong. */
  .pa-bank__k { width: auto; flex: 0 1 auto; }
  .pa-thanks .pa-thanks__cols > .woocommerce-order-details,
  .pa-thanks .pa-thanks__cols > .woocommerce-customer-details { padding: 18px 20px; }
  .pa-bank__row { padding: 10px 14px; }
  .pa-thanks__head { padding: 16px; }
  .pa-thanks__title { font-size: 17.5px; }
  .pa-bank { padding: 16px; }
  .pa-thanks table.woocommerce-table--order-details th,
  .pa-thanks table.woocommerce-table--order-details td { padding: 11px 0; font-size: 13px; }
}

/* ================= Slider anh hero =================
   Cac lop anh chong len nhau trong mot khung tuyet doi, chuyen canh bang
   opacity. Lop nam duoi mang mau ("heroveil") va duoi noi dung, nen z-index
   giu nguyen thu tu tu nhien cua DOM - khong can dat gi them. */
.pa-heroslides { position: absolute; inset: 0; overflow: hidden; }
.pa-heroslide {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity .7s ease;
}
.pa-heroslide.is-on { opacity: 1; }

/* Ba cham dieu huong - truoc day chi la <span> trang tri, gio la nut bam that */
.pa-herodots { margin-top: 34px; display: flex; gap: 7px; align-items: center; }
.pa-herodot {
  width: 14px; height: 5px; padding: 0; border: 0; border-radius: 3px;
  background: #b9c8e4; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: width .25s ease, background .25s ease;
}
.pa-herodot:hover { background: #8fa8d6; }
.pa-herodot.is-on { width: 24px; background: #1868db; }
.pa-herodot:focus-visible { outline: 2px solid #1868db; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pa-heroslide { transition: none; }
  .pa-herodot { transition: none; }
}

/* Form tra cuu don hang cua WooCommerce tren trang landing */
.pa-tracker {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 26px;
}
.pa-tracker form.track_order { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pa-tracker form.track_order::before, .pa-tracker form.track_order::after { content: none !important; display: none !important; }
.pa-tracker form.track_order p { margin: 0; float: none !important; width: auto !important; }
.pa-tracker form.track_order p.form-row-first, .pa-tracker form.track_order p.form-row-last { width: auto !important; }
.pa-tracker form.track_order label { display: block; font-size: 13px; font-weight: 600; color: #46536a; margin-bottom: 6px; }
.pa-tracker form.track_order input.input-text {
  width: 100%; box-sizing: border-box; border: 1px solid #dfe5ef; border-radius: 9px;
  padding: 12px 13px; font-family: inherit; font-size: 16px; color: #1f2c45; background: #fff;
}
.pa-tracker form.track_order input.input-text:focus { outline: none; border-color: #1868db; }
/* Doan huong dan (p dau) va hang nut (p cuoi) chiem tron be ngang; chi hai o
   nhap moi dung chung mot hang. */
.pa-tracker form.track_order > p:first-child,
.pa-tracker form.track_order > p:last-child { grid-column: 1 / -1; }
.pa-tracker form.track_order > p:first-child { margin-bottom: 4px; font-size: 14px; line-height: 1.75; color: #46536a; }
.pa-tracker form.track_order button {
  border: 0; border-radius: 9px; background: #1868db; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 13px 30px;
}
.pa-tracker form.track_order button:hover { background: #0f4fae; }
@media (max-width: 640px) {
  .pa-tracker { padding: 18px; }
  .pa-tracker form.track_order { grid-template-columns: 1fr; }
  .pa-tracker form.track_order button { width: 100%; }
}

/* ---- Dai 641-720px: dau trang chua vua ----
   Cac quy tac thu gon dau trang dung o 640px, nhung bo cuc desktop phai toi
   khoang 720px moi du cho -> trong khe do o tim kiem, hop tai khoan va gio
   hang day nhau tran ra ngoai man, keo ca trang truot ngang 25px.
   Chi lap lai phan DAU TRANG cho khe nay, khong dung toi cac luoi ben duoi. */
@media (min-width: 641px) and (max-width: 720px) {
  [data-r="topbar"] > span:nth-child(1), [data-r="topbar"] > span:nth-child(2) { display: none !important; }
  [data-r="headrow"] { flex-wrap: wrap !important; gap: 12px !important; }
  [data-r="search"] { order: 3 !important; flex-basis: 100% !important; max-width: none !important; }
  [data-r="userbox"] { margin-left: auto !important; gap: 14px !important; order: 1 !important; }
  [data-r="userbox"] a > span:last-child { display: none !important; }
}

/* ================================================================ Danh gia cua khach
   Khoi "DANH GIA CUA KHACH" o trang san pham: bang tong diem hai cot, dai chip loc,
   thanh phan bo 5→1, danh sach danh gia va popup gui danh gia. Xem inc/reviews.php. */

.pa-stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
/* Ngoi sao ve bang SVG (xem pa_star_svg trong inc/reviews.php). Co da nam trong
   thuoc tinh width/height cua chinh the svg, o day chi lo cho dung. */
.pa-star { display: inline-block; flex: none; vertical-align: middle; }

/* ⚠️ grid-column: 1 / -1 la BAT BUOC, khong phai trang tri. Khoi nay in ben trong
   div.product - ma div.product la mot luoi 46fr/54fr (xem phan "Chi tiet san pham"
   o tren). Thieu dong nay thi ca khoi danh gia co vao cot trai 46%, chip xuong dong
   het va thanh phan bo be bang mot ngon tay. Cung ly do voi .woocommerce-tabs va
   .related.products ngay tren. */
.pa-rvsec { grid-column: 1 / -1; margin-top: 30px; padding-top: 26px; border-top: 1px solid #eef1f7; }
.pa-rvsec__h { margin: 0 0 16px; font-size: 17.5px; font-weight: 700; letter-spacing: .01em; color: #14243f; }
.pa-rv-flash {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 9px;
  background: #eefaf3; border: 1px solid #c9ecd9; color: #0f7a4a; font-size: 13px;
}

/* ---- Bang tong: diem ben trai, chip loc + thanh phan bo ben phai ---- */
/* ⚠️ Nen #f8fafd chu khong #fff nhu ban goc: o day khung bao quanh (div.product) DA
   la mot the trang, nen mot khung trang nua chi con vien mong phan biet - nhin ra la
   bang tong bi "chim". Ban goc dat khoi nay tren nen xam cua trang nen trang la dung. */
.pa-rv-panel {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
  background: #f8fafd; border: 1px solid #e7ecf5; border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.pa-rv-score { flex: none; width: 214px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pa-rv-score strong { display: block; font-size: 40px; font-weight: 800; color: #14243f; line-height: 1; }
.pa-rv-score strong small { font-size: 16px; font-weight: 700; color: #8b95a6; margin-left: 4px; }
.pa-rv-score > span { font-size: 12.5px; color: #8b95a6; }
/* Chua co danh gia: diem ve 0,0 va sao xam, con chip + thanh phan bo van hien du.
   Loi moi nam NGOAI khung, ngay duoi. */
.pa-rv-score.is-zero strong { color: #97a1b2; }
/* Nut mo popup. Nen dam de noi han tren khung - day la hanh dong chinh cua ca khoi,
   de no thanh nut vien manh la khong ai thay. */
.pa-rv-open {
  align-self: stretch; margin-top: 11px; border: 0; border-radius: 999px; padding: 11px 24px;
  background: #1868db; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700;
  text-align: center; cursor: pointer; transition: background .15s ease;
}
.pa-rv-open:hover { background: #0f4fae; }
.pa-rv-right { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pa-rv-empty { margin: -6px 0 18px; font-size: 13.5px; color: #8b95a6; }

/* ---- Chip loc ---- */
.pa-rvchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-rvchip {
  border: 1px solid #dfe5ef; border-radius: 999px; padding: 7px 15px; background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #3d4a5e; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pa-rvchip:hover { border-color: #b9d0f4; }
.pa-rvchip.is-on { border-color: #1868db; background: #eef4fd; color: #1868db; }
/* Chip 0 luot: mo va KHONG bam duoc. Cho bam thi danh sach trong tron va khach tuong
   trang hong - so 0 in ngay tren chip da noi du roi. */
.pa-rvchip.is-off { opacity: .45; cursor: default; background: #f4f7fb; }
.pa-rvchip.is-off:hover { border-color: #dfe5ef; }

/* ---- Thanh phan bo 5→1 ---- */
.pa-rv-bars { display: flex; flex-direction: column; gap: 6px; }
.pa-rv-bar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #6b7789; }
.pa-rv-bs { flex: none; display: inline-flex; align-items: center; gap: 2px; width: 26px; font-weight: 700; color: #3d4a5e; }
.pa-rv-bar i { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 4px; background: #e8edf5; overflow: hidden; }
.pa-rv-bar b { display: block; height: 100%; background: #f5a623; border-radius: 4px; }
.pa-rv-bp { flex: none; width: 34px; text-align: right; font-weight: 700; color: #3d4a5e; }
.pa-rv-bn { flex: none; width: 74px; text-align: right; }

/* ---- Danh sach danh gia ---- */
.pa-rv-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pa-rv-list li { background: #fff; border: 1px solid #e7ecf5; border-radius: 12px; padding: 15px 17px; }
.pa-rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 7px; }
/* Icon nguoi truoc ten. flex:none de vong tron khong bi bop meo thanh bau duc khi ten
   dai day hang. */
.pa-rv-ava {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #eaf1fd; color: #1868db;
}
.pa-rv-head b { font-size: 13.5px; color: #14243f; }
.pa-rv-date { font-size: 12px; color: #9aa5b6; }
.pa-rv-buy {
  display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: 2px 9px;
  background: #eefaf3; color: #0f7a4a; font-size: 11.5px; font-weight: 700;
}
.pa-rv-list p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #3d4a5e; white-space: pre-line; }
.pa-rv-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pa-rv-media img, .pa-rv-media video {
  width: 84px; height: 84px; object-fit: cover; display: block;
  border: 1px solid #e7ecf5; border-radius: 9px; background: #f6f8fc;
}
.pa-rv-media video { width: 150px; }
/* Phan hoi cua cua hang. Thut vao + vach trai de phan biet han voi loi khach - cung
   mot khung trang thi doc luot khong biet ai dang noi. */
.pa-rv-reply {
  margin-top: 11px; padding: 10px 13px; border-left: 3px solid #1868db;
  border-radius: 0 9px 9px 0; background: #f6f8fc;
}
.pa-rv-reply b { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #1868db; }
.pa-rv-reply > span { margin-left: 8px; font-size: 11.5px; color: #9aa5b6; }
.pa-rv-reply p { margin-top: 4px; font-size: 13px; }
.pa-rv-none { margin: 0 0 18px; font-size: 13.5px; color: #8b95a6; }
.pa-rv-more { margin: -8px 0 18px; font-size: 12.5px; color: #9aa5b6; }

/* ---- Popup gui danh gia ---- */
body.pa-noscroll { overflow: hidden; }
.pa-rvmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pa-rvmodal[hidden] { display: none; }
.pa-rvmodal-bd { position: absolute; inset: 0; background: rgba(16, 32, 60, .55); }
.pa-rvmodal-box {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 36px); overflow: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(16, 32, 60, .28); padding: 20px 22px 22px;
}
.pa-rvmodal-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pa-rvmodal-hd h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 800; color: #14243f; line-height: 1.35; }
.pa-rvmodal-x {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: #f1f5fa;
  color: #6b7789; font-size: 21px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pa-rvmodal-x:hover { background: #e5ecf5; color: #14243f; }
.pa-rvmodal textarea, .pa-rvmodal input[type=text], .pa-rvmodal input[type=email], .pa-rvmodal input[type=tel] {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid #dfe5ef; border-radius: 9px;
  padding: 11px 13px; font-family: inherit; font-size: 14px; color: #1f2c45; background: #fff;
}
.pa-rvmodal textarea { resize: vertical; line-height: 1.6; }
.pa-rvmodal textarea:focus, .pa-rvmodal input:focus { outline: 0; border-color: #1868db; box-shadow: 0 0 0 3px rgba(24, 104, 219, .14); }

/* Khoi gui anh/video */
.pa-rvup { margin-top: 10px; }
.pa-rvup-btns { display: flex; flex-wrap: wrap; gap: 9px; }
.pa-rvup-b {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dfe5ef; border-radius: 9px;
  padding: 8px 14px; background: #fff; font-size: 12.5px; font-weight: 600; color: #1868db; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pa-rvup-b:hover { border-color: #b9d0f4; background: #eef4fd; }
/* O tep that nam TRONG nhan nen bam nhan la mo hop chon tep - an bang width/height 0
   chu khong display:none de Tab van toi duoc. */
.pa-rvup-b input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pa-rvup-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 11.5px; color: #9aa5b6; }
.pa-rvup-foot .is-short { color: #e0202b; }
.pa-rvup-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pa-rvup-list:empty { margin-top: 0; }
.pa-rvup-i { font-size: 12px; color: #6b7789; }
.pa-rvup-i.is-bad { color: #e0202b; }
.pa-rvup-w { font-size: 12px; color: #a9754a; }

/* Bo chon sao trong popup: sao to, nhan chu duoi moi sao. Lop .is-on do JS gan (to tu
   sao 1 toi sao dang chon - CSS khong co bo chon "dung truoc"); .is-hv la luot re
   chuot. Tat JS thi radio van chay, chi mat phan to mau. */
.pa-rvpick { margin-top: 16px; border-top: 1px solid #eef1f7; padding-top: 14px; }
.pa-rvpick-t { display: block; font-size: 13px; font-weight: 700; color: #14243f; margin-bottom: 9px; }
.pa-rvpick-t em { font-weight: 600; font-style: normal; color: #9aa5b6; }
.pa-rvpick-s { display: flex; gap: 6px; }
.pa-rvpick-s label {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px; border-radius: 10px; color: #d8dfe8; cursor: pointer; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.pa-rvpick-s label:hover { background: #f6f8fc; }
.pa-rvpick-s label span { font-size: 11px; font-weight: 600; color: #9aa5b6; line-height: 1.25; }
.pa-rvpick-s label.is-on, .pa-rvpick-s label.is-hv { color: #f5a623; }
.pa-rvpick-s label.is-on span { color: #3d4a5e; }
/* Du phong cho luc JS chua chay: it nhat sao DANG CHON phai vang, bang khong khach
   bam xong khong thay gi doi va bam tiep sao khac. */
.pa-rvpick-s label:has(input:checked) { color: #f5a623; }
.pa-rvpick-s input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-rvpick-s input:focus-visible ~ span { outline: 2px solid #1868db; outline-offset: 2px; border-radius: 3px; }

.pa-rvfull { margin-top: 14px; }
.pa-rvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
/* ⚠️ display:flex chu khong de mac dinh: o tick va dong chu hai dong phai thang dau
   nhau, khong thi tick tut xuong giua doan van. */
.pa-rvremember { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; font-size: 12px; line-height: 1.5; color: #6b7789; cursor: pointer; }
.pa-rvremember input { flex: none; margin: 2px 0 0; }
.pa-rv-send {
  margin-top: 16px; width: 100%; border: 0; border-radius: 10px; padding: 13px; background: #1868db;
  color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.pa-rv-send:hover { background: #0f4fae; }
/* O bay bot - day khoi man hinh chu KHONG display:none: vai bot bo qua o an han,
   nhung van dien o chi bi day di. */
.pa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 820px) {
  .pa-rv-panel { gap: 16px; padding: 16px; }
  .pa-rv-score { width: 100%; }
  .pa-rv-bn { display: none; }
  .pa-rvgrid { grid-template-columns: minmax(0, 1fr); }
  .pa-rvpick-s label span { font-size: 10px; }
  /* Popup dan xuong day man hinh: tren dien thoai mot hop can giua co the cao hon
     khung nhin va phan dau bi cat mat, ke ca nut Dong. */
  .pa-rvmodal { padding: 0; align-items: flex-end; }
  .pa-rvmodal-box { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; }
}

/* ⚠️ iOS Safari TU PHONG ca trang khi cham vao mot o nhap co co chu DUOI 16px, va
   khong co cach nao tat bang JS. Popup nay toan o nhap nen dinh tron - chi nang o
   may cam ung, ban desktop giu nguyen 14px cho gon. */
@media (pointer: coarse) {
  .pa-rvmodal textarea, .pa-rvmodal input[type=text], .pa-rvmodal input[type=email], .pa-rvmodal input[type=tel] { font-size: 16px; }
}

/* ============================================================== Nut lien he noi
   Nut tron o goc man hinh, bam vao bung ra Goi dien / Zalo / Messenger.
   Xem inc/contact-fab.php. */

/* ⚠️ align-items:center de cac nut kenh (44px) va nut chinh (52px) chung MOT truc doc.
   De flex-end thi chung thang mep phai ma lech tam 4px - nhin ra ngay la mot cot
   xoc xech. */
/* ⚠️ Cho dung cua CA HAI dang nut khai o MOT cho, va .pa-fab--left phai dung NGAY
   SAU. Bo cuc cu tach lam hai: .pa-fab--left ngoi truoc .pa-fab-solo, ma hai lop deu
   (0,1,0) nen cai dung sau thang - nut don mang ca `left:18px` lan `right:18px`, va
   no chi tinh co ve dung goc trai vi trinh duyet bo qua `right` khi bi rang buoc
   thua. Doi mot dong o dau la nut nhay sang goc kia, khong loi nao bao. */
.pa-fab, .pa-fab-solo { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.pa-fab--left { right: auto; left: 18px; }
.pa-fab { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pa-fab-list { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Nut don khi chu cua hang chua khai kenh nao: mot lien ket thang sang trang Lien he. */
.pa-fab-solo {
  width: 52px; height: 52px; border-radius: 50%;
  background: #1868db; box-shadow: 0 8px 24px rgba(24, 104, 219, .42); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pa-fab-solo:hover { background: #0f4fae; color: #fff; }

.pa-fab-item { display: flex; text-decoration: none; }
.pa-fab-ico {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(20, 40, 80, .22); overflow: hidden; color: #fff;
}
/* Logo thuong hieu tu mang mau cua no, nen ngoi tren nen trang chu khong nen mau. */
.pa-fab-ico--img { background: #fff; }
.pa-fab-ico--img img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* Nut chinh. Hai icon chong len nhau, chi mot cai hien - xem chu thich trong
   inc/contact-fab.php ve viec vi sao khong doi noi dung the bang JS. */
.pa-fab-btn {
  position: relative; width: 52px; height: 52px; border: 0; border-radius: 50%; padding: 0;
  background: #1868db; box-shadow: 0 8px 24px rgba(24, 104, 219, .42); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.pa-fab-btn:hover { background: #0f4fae; }
.pa-fab-btn .pa-ico { position: absolute; transition: opacity .18s ease, transform .22s ease; }
.pa-fab-btn .pa-ico:last-of-type { opacity: 0; transform: rotate(-90deg); }
.pa-fab.is-open .pa-fab-btn .pa-ico:first-of-type { opacity: 0; transform: rotate(90deg); }
.pa-fab.is-open .pa-fab-btn .pa-ico:last-of-type { opacity: 1; transform: rotate(0); }

/* ---- Hieu ung ---- */
/* Nhip dap moi bam. ⚠️ Ve bang ::after chu khong animate box-shadow cua chinh nut:
   box-shadow doi moi khung hinh bat trinh duyet ve lai, con transform/opacity thi
   chay tren GPU - tren dien thoai yeu, cach kia lam giat ca trang khi cuon. */
.pa-fab-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #1868db; opacity: .5; z-index: -1; animation: pafabping 2.4s ease-out infinite;
}
.pa-fab.is-open .pa-fab-btn::after { animation: none; opacity: 0; }
@keyframes pafabping { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.55); opacity: 0; } 100% { opacity: 0; } }

/* Bung ra: tung nut truot len va hien dan, lech nhau mot nhip cho co lop lang. */
.pa-fab-item { opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .2s ease, transform .2s ease; }
.pa-fab.is-open .pa-fab-item { opacity: 1; transform: none; }
.pa-fab.is-open .pa-fab-item:nth-child(1) { transition-delay: .03s; }
.pa-fab.is-open .pa-fab-item:nth-child(2) { transition-delay: .08s; }
.pa-fab.is-open .pa-fab-item:nth-child(3) { transition-delay: .13s; }
.pa-fab.is-open .pa-fab-item:nth-child(4) { transition-delay: .18s; }
.pa-fab-ico { transition: transform .15s ease; }
.pa-fab-item:hover .pa-fab-ico { transform: scale(1.08); }

/* ⚠️ Nguoi bat "giam chuyen dong" trong he dieu hanh thuong bat vi chuyen dong gay
   chong mat hoac buon non - mot cai nut dap lien tuc o goc man hinh la dung thu ho
   tat. Tat hieu ung chu KHONG tat nut. */
@media (prefers-reduced-motion: reduce) {
  .pa-fab-btn::after { animation: none; opacity: 0; }
  .pa-fab-item, .pa-fab-btn .pa-ico, .pa-fab-ico { transition: none; }
  .pa-fab.is-open .pa-fab-item { transition-delay: 0s; }
}

/* ---- "Phí giao hàng 0đ" bi WooCommerce viet hoa thanh "0Đ" ----
   Ban thân bo khoi gio hang co luat nay trong cart.css cua no:

     .wc-block-components-totals-shipping .wc-block-components-totals-item strong
     { text-transform: uppercase }

   No sinh ra de chu "free" thanh "FREE" trong ban tieng Anh. Tren cua hang tieng
   Viet thi gia tri mien phi la "0đ", va chinh luat ay bien chu đ thanh Đ - mot ky
   hieu tien te khong ai dung, ngay canh nhung dong khac van in "70.000đ".

   ⚠️ Da do chu khong doan: Store API tra ve currency_suffix "đ" (chu thuong), va
   mot mang markup chi mang style.css cua theme thi ra dung "0đ". Nghia la du lieu
   dung, CSS cua Woo moi la thu doi no.

   ⚠️ Chon bo chon DAI HON luat cua Woo (0,3,1 so voi 0,2,1) chu khong dua vao thu
   tu nap. Hom nay style.css cua theme nap SAU cart.css nen bo chon bang nhau cung
   thang, nhung mot plugin gop/nen CSS doi thu tu la chu Đ lang le quay lai. */
.wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item strong,
.wp-block-woocommerce-checkout .wc-block-components-totals-shipping .wc-block-components-totals-item strong {
  text-transform: none;
}

/* ================================================================ Ma VietQR
   Ma QR chuyen khoan mang san so tien va noi dung, dat canh bang thong tin chuyen
   khoan o trang cam on. Xem inc/vietqr.php. */

/* Khi co ma QR thi bang chu thu con MOT cot va dung canh ma. Duoi 720px thi xep
   chong: ma QR truoc (dien thoai co san app ngan hang), bang chu sau. */
.pa-bank__body { display: grid; gap: 20px; align-items: start; }
.pa-bank__body--qr { grid-template-columns: minmax(0, 1fr) auto; }
.pa-bank__body--qr .pa-bank__grid { grid-template-columns: minmax(0, 1fr); }

.pa-vqr { text-align: center; }
/* ⚠️ Nen TRANG + vien quanh ma la bat buoc chu khong phai trang tri: may quet do ba
   o dinh vi bang tuong phan, ma the chuyen khoan co the nam tren nen mau. */
.pa-vqr .pa-qr {
  display: block; margin: 0 auto; background: #fff;
  border: 1px solid #e5e9f0; border-radius: 10px; padding: 8px;
}
.pa-vqr__cap { margin: 8px auto 0; max-width: 216px; font-size: 12px; line-height: 1.55; color: #6b7789; }

@media (max-width: 720px) {
  .pa-bank__body--qr { grid-template-columns: minmax(0, 1fr); }
  /* Ma QR len TREN bang chu tren dien thoai: day la may co san app ngan hang, quet
     duoc thi khong phai doc bang chu nua.
     ⚠️ `order` chu KHONG doi sang `display: flex`. Luoi CSS cung hieu `order`, con
     doi sang flex thi `align-items: start` o luat goc doi nghia: trong mot cot flex
     no can theo TRUC NGANG, nen bang chu co lai vua du chu (do that: 194px trong
     khung 414px) thay vi keo het hang - va nut "Sao chep" dat tuyet doi o goc phai
     thi de len chinh dong chu no dung canh. */
  .pa-bank__body--qr .pa-vqr { order: -1; }
}


/* ---------- Tai tre khoi duoi man hinh ---------- */
/* content-visibility: auto - trinh duyet bo qua ve (va KHONG tai anh nen) cua khoi
   con nam ngoai man hinh, toi khi cuon gan toi. Do bang Chromium 141: anh nen trong
   khoi nay khong duoc tai luc mo trang, cuon toi moi tai. contain-intrinsic-size giu
   cho san de thanh cuon khong nhay.
   ⚠️ content-visibility keo theo paint containment: moi thu tran ra ngoai hop bi cat.
   The san pham/combo/danh gia khi hover co bong 0 12px 26px va nhac len 3px, nen khoi
   phai co dem duoi 44px cho bong - bu lai bang margin am cung so de bo cuc khong
   xe dich mot pixel. Chan trang khong can dem: hieu ung o do chi nhac LEN. */
.pa-cv { content-visibility: auto; contain-intrinsic-size: auto 400px; padding-bottom: 44px; margin-bottom: -44px; }
.pa-cv-foot { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* ================= Trang bai viet ================= */
/* Hai cot: noi dung trai, thong tin phai. Dung grid voi cot phai co dinh de
   khi bai dai ngan khac nhau cot phai van giu nguyen be ngang. */
.pa-single { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.pa-single__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pa-single__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

.pa-post {
  background: #fff; border-radius: 14px; padding: 28px 30px;
  box-shadow: 0 1px 6px rgba(20,40,80,.05);
}
.pa-post__title { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; color: #14243f; }
.pa-post__meta { margin-top: 10px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: #8b95a6; }
.pa-post__cat { color: #58657c; font-weight: 600; }
.pa-post__cat:hover { color: #1868db; }
.pa-post__cover { margin: 20px 0 0; border-radius: 12px; overflow: hidden; background: #f5f8fd; }
.pa-post__cover img { display: block; width: 100%; height: auto; }

/* Muc luc */
.pa-toc {
  margin-top: 22px; background: #f7f9fc; border-radius: 12px;
  border-left: 4px solid #f5b301; padding: 16px 20px;
}
.pa-toc__head { display: flex; align-items: center; gap: 9px; color: #f5b301; }
.pa-toc__title { font-size: 13.5px; font-weight: 800; letter-spacing: .05em; color: #14243f; }
.pa-toc__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pa-toc__list a {
  position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: #3d4a5e;
}
.pa-toc__list a::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: #b3bcca;
}
.pa-toc__list a:hover { color: #1868db; }
.pa-toc__list a:hover::before { background: #1868db; }

/* Than bai */
.pa-post__body { margin-top: 22px; font-size: 15px; line-height: 1.85; color: #3d4a5e; }
.pa-post__body > *:first-child { margin-top: 0; }
.pa-post__body h2 {
  margin: 30px 0 10px; font-size: 19px; line-height: 1.4; font-weight: 800; color: #14243f;
  scroll-margin-top: 20px;
}
.pa-post__body h3 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 700; color: #17263f; }
.pa-post__body p { margin: 0 0 14px; }
.pa-post__body ul, .pa-post__body ol { margin: 0 0 14px; padding-left: 22px; }
.pa-post__body li { margin-bottom: 7px; }
.pa-post__body a { color: #1868db; text-decoration: underline; text-underline-offset: 2px; }
.pa-post__body img { max-width: 100%; height: auto; border-radius: 10px; }
.pa-post__body blockquote {
  margin: 18px 0; padding: 12px 18px; border-left: 3px solid #cfdcf2;
  background: #f7f9fc; border-radius: 0 10px 10px 0; color: #46536a;
}

/* Sao danh gia */
.pa-rate {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid #eef1f7;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
}
.pa-rate__stars { display: flex; align-items: center; gap: 2px; }
.pa-rate__star {
  padding: 2px; border: 0; background: none; cursor: pointer; line-height: 0;
  color: #dfe4ee; transition: color .15s ease, transform .12s ease;
}
.pa-rate__star svg { fill: currentColor; }
.pa-rate__star.is-on { color: #f5a623; }
.pa-rate__stars:hover .pa-rate__star:not(:disabled) { color: #dfe4ee; }
.pa-rate__star:not(:disabled):hover, .pa-rate__star:not(:disabled):hover ~ .pa-rate__star { color: #dfe4ee; }
/* Ro chuot tu sao 1 den sao dang tro: dung selector nguoc vi CSS khong co
   "cac phan tu truoc", nen to mau bang cach doi thu tu duyet. */
.pa-rate__stars:hover .pa-rate__star:hover { color: #f5a623; }
.pa-rate__star:not(:disabled):hover { transform: scale(1.12); }
.pa-rate.is-done .pa-rate__star { cursor: default; }
.pa-rate__text { font-size: 14px; color: #8b95a6; }
.pa-rate__avg { font-size: 15px; font-weight: 800; color: #17263f; }

/* Chia se */
.pa-share { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f7; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-share__label { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: #58657c; }
.pa-share__btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e2e9f5; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #58657c; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.pa-share__btn:hover { border-color: #1868db; color: #1868db; background: #f4f8ff; }
.pa-share__btn.is-done { border-color: #b7dfc2; color: #14803f; background: #e8f6ec; }

/* Tac gia */
.pa-author {
  margin-top: 22px; display: flex; align-items: flex-start; gap: 18px;
  border: 1px solid #e7ecf5; border-left: 4px solid #f5b301; border-radius: 12px; padding: 20px 22px;
}
.pa-author__avatar { flex: none; }
.pa-author__avatar img { display: block; width: 76px; height: 76px; border-radius: 10px; background: #eef1f6; }
.pa-author__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-author__label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #9aa4b5; }
.pa-author__name { font-size: 18px; font-weight: 800; color: #14243f; }
.pa-author__role { font-size: 13.5px; font-weight: 600; color: #f5a623; }
.pa-author__bio { margin: 4px 0 0; font-size: 13.5px; line-height: 1.7; color: #58657c; }
.pa-author__chip {
  align-self: flex-start; margin-top: 6px; padding: 5px 12px; border-radius: 6px;
  background: #fdf5e2; color: #8a6a12; font-size: 12.5px; font-weight: 600;
}
.pa-author__link { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: #c8912a; }
.pa-author__link:hover { color: #1868db; }

/* ---- Cot phai ---- */
.pa-side { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 1px 6px rgba(20,40,80,.05); }
.pa-side__title { margin: 0 0 4px; font-size: 14px; font-weight: 800; letter-spacing: .04em; color: #14243f; padding-bottom: 12px; border-bottom: 1px solid #eef1f7; }

.pa-side--call { background: linear-gradient(160deg, #1560d0 0%, #0c3b8d 100%); text-align: center; color: #dce6f8; padding: 22px 20px; }
.pa-side__ico { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center; }
.pa-side__calltitle { margin: 12px 0 0; font-size: 17px; font-weight: 800; color: #fff; }
.pa-side__calltext { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #c3d5f2; }
.pa-side__phone { display: block; margin-top: 12px; font-size: 26px; font-weight: 800; letter-spacing: .01em; color: #ffc63d; }
.pa-side__hours { display: block; margin-top: 4px; font-size: 12.5px; color: #c3d5f2; }
.pa-side__cta {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #ffc63d; color: #3d2d00; border-radius: 9px; padding: 12px; font-size: 14px; font-weight: 800;
  transition: background .16s ease;
}
.pa-side__cta:hover { background: #ffd469; color: #3d2d00; }
.pa-side__alt { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 650; color: #fff; }
.pa-side__alt:hover { color: #ffc63d; }

.pa-side__cats { list-style: none; margin: 0; padding: 0; }
.pa-side__cats li + li { border-top: 1px solid #f2f5fa; }
.pa-side__cats a { display: flex; align-items: center; gap: 11px; padding: 11px 0; font-size: 14px; color: #3d4a5e; }
.pa-side__cats a > span { flex: 1; min-width: 0; }
.pa-side__cats a:hover { color: #1868db; }
.pa-side__chev { flex: none; color: #c3cbd8; }
.pa-side__cats a:hover .pa-side__chev { color: #1868db; }

.pa-side__posts { list-style: none; margin: 0; padding: 0; }
.pa-side__posts li + li { border-top: 1px solid #f2f5fa; }
.pa-side__posts a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; }
.pa-side__thumb {
  width: 64px; height: 48px; flex: none; border-radius: 8px;
  background: #f5f8fd center / cover no-repeat;
}
.pa-side__pbody { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-side__pname { font-size: 13.5px; font-weight: 650; line-height: 1.45; color: #1e2b41; }
.pa-side__posts a:hover .pa-side__pname { color: #1868db; }
.pa-side__pdate { font-size: 12px; color: #9aa4b5; }
.pa-side__price { font-size: 14px; font-weight: 700; color: #e0202b; }
.pa-side__all { display: block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #1868db; }

/* ---- Binh luan ---- */
.pa-cmt { background: #fff; border-radius: 14px; padding: 26px 30px; box-shadow: 0 1px 6px rgba(20,40,80,.05); }
.pa-cmt__title, .pa-cmt .comment-reply-title {
  margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #14243f;
}
.pa-cmt__note { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #8b95a6; }
.pa-cmt__req { color: #e0202b; }
/* WP mac dinh cho nhan nam ben trai o nhap va khong dat be ngang, nen o textarea
   bi day sang phai va cac o input dai ngan lung tung. Ep tat ca thanh nhan tren
   - o duoi, rong het khung. */
.pa-cmt__field { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.pa-cmt__field label { font-size: 13px; font-weight: 650; color: #46536a; }
.pa-cmt__form input[type="text"], .pa-cmt__form input[type="email"],
.pa-cmt__form input[type="url"], .pa-cmt__form textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: #17263f;
  border: 1px solid #dfe5ef; border-radius: 9px; padding: 11px 13px; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pa-cmt__form textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.pa-cmt__form input:focus, .pa-cmt__form textarea:focus {
  outline: none; border-color: #1868db; box-shadow: 0 0 0 3px rgba(24,104,219,.12);
}
.pa-cmt__form input::placeholder, .pa-cmt__form textarea::placeholder { color: #aab4c4; }
/* Ba o Ho ten / Email / Trang web nam mot hang cho do dai. Phai boc trong mot
   the flex that: neu chi dat width cho tung o thi khoang trang giua cac the
   inline lam o thu ba rot xuong hang duoi. */
.pa-cmt__row { display: flex; gap: 12px; }
.pa-cmt__row > .pa-cmt__field { flex: 1; min-width: 0; }
.pa-cmt .comment-form-cookies-consent {
  display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 16px; font-size: 13px; color: #58657c;
}
.pa-cmt .comment-form-cookies-consent input { margin: 3px 0 0; flex: none; }
.pa-cmt .comment-form-cookies-consent label { margin: 0; line-height: 1.6; }
.pa-cmt .form-submit { margin: 0; }
.pa-cmt__submit, .pa-cmt .form-submit input[type="submit"] {
  border: 0; border-radius: 9px; background: #1868db; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; padding: 12px 28px;
  transition: background .16s ease;
}
.pa-cmt__submit:hover, .pa-cmt .form-submit input[type="submit"]:hover { background: #0f4fae; }
.pa-cmt .logged-in-as { margin: 0 0 16px; font-size: 13px; color: #8b95a6; }
.pa-cmt .logged-in-as a { color: #1868db; }

.pa-cmt__list { list-style: none; margin: 0 0 26px; padding: 0; }
.pa-cmt__list .children { list-style: none; margin: 14px 0 0 22px; padding: 0 0 0 18px; border-left: 2px solid #eef1f7; }
.pa-cmt__list li.comment { margin-bottom: 16px; }
.pa-cmt__list .comment-body { border: 1px solid #eef1f7; border-radius: 12px; padding: 16px 18px; }
.pa-cmt__list .comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #17263f; }
.pa-cmt__list .comment-author img { border-radius: 50%; }
.pa-cmt__list .comment-author .says { display: none; }
.pa-cmt__list .comment-meta { margin: 4px 0 8px; font-size: 12px; color: #9aa4b5; }
.pa-cmt__list .comment-meta a { color: #9aa4b5; }
.pa-cmt__list .comment-content { font-size: 14px; line-height: 1.75; color: #3d4a5e; }
.pa-cmt__list .comment-content p { margin: 0 0 8px; }
.pa-cmt__list .reply { margin-top: 8px; font-size: 13px; font-weight: 650; }
.pa-cmt__closed { margin: 0 0 16px; font-size: 13.5px; color: #8b95a6; }

@media (max-width: 1024px) {
  .pa-single { grid-template-columns: minmax(0, 1fr); }
  .pa-single__side { position: static; }
}
@media (max-width: 640px) {
  .pa-post, .pa-cmt { padding: 18px; }
  .pa-post__title { font-size: 21px; }
  .pa-post__body { font-size: 14.5px; }
  .pa-post__body h2 { font-size: 17.5px; }
  .pa-toc { padding: 14px 16px; }
  .pa-author { flex-direction: column; gap: 12px; padding: 16px 18px; }
  .pa-author__avatar img { width: 60px; height: 60px; }
  .pa-rate { justify-content: flex-start; }
  .pa-cmt__row { flex-direction: column; gap: 0; }
}

/* Nut "Xem them san pham" duoi luoi trang chu */
.pa-loadmore { margin-top: 18px; display: flex; justify-content: center; }
/* Moi tab mot nut, cac tab khong mo mang thuoc tinh hidden. Nhung dat display
   cho phan tu la de bep luon hidden - phai tra lai display:none. */
.pa-loadmore[hidden] { display: none; }
/* Tren dien thoai luoi bi gap lai va da co nut "Xem them N san pham" cua rieng
   no; hai nut chong nhau thi khong biet bam cai nao. Giau nut nap them di,
   mo luoi ra roi moi hien. */
.pa-loadmore.is-stacked { display: none; }
.pa-loadmore__btn {
  border: 1px solid #cfdcf2; background: #fff; color: #1868db; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 12px 34px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pa-loadmore__btn:hover { background: #1868db; border-color: #1868db; color: #fff; }
.pa-loadmore__btn:disabled { opacity: .6; cursor: default; }
.pa-loadmore__btn.is-loading:hover { background: #fff; border-color: #cfdcf2; color: #1868db; }

/* ================= Danh sach bai viet ================= */
/* The tieu de dung lai .pa-pagehead cua trang danh muc, chi bo icon di. */
.pa-pagehead--plain { display: block; }
.pa-blog__grid {
  margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.pa-card {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(20,40,80,.05); display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.pa-card:hover { box-shadow: 0 6px 18px rgba(20,40,80,.10); transform: translateY(-2px); }
.pa-card__img {
  display: block; aspect-ratio: 16 / 10; background: #f5f8fd; overflow: hidden;
}
.pa-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pa-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pa-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #9aa4b5; }
.pa-card__cat {
  padding: 3px 10px; border-radius: 6px; background: #eef4ff; color: #1868db;
  font-size: 11.5px; font-weight: 650;
}
.pa-card__title { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 700; }
.pa-card__title a { color: #14243f; }
.pa-card__title a:hover { color: #1868db; }
.pa-card__excerpt { margin: 0; font-size: 13px; line-height: 1.7; color: #8b95a6; }
.pa-blog__empty { font-size: 14px; color: #58657c; }

/* Phan trang */
.pa-blog .navigation.pagination { margin-top: 22px; display: flex; justify-content: center; }
.pa-blog .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-blog .nav-links .page-numbers {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px;
  border: 1px solid #e2e9f5; background: #fff; color: #3d4a5e;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 650;
}
.pa-blog .nav-links .page-numbers:hover { border-color: #1868db; color: #1868db; }
.pa-blog .nav-links .page-numbers.current { background: #1868db; border-color: #1868db; color: #fff; }
.pa-blog .nav-links .page-numbers.dots { border: 0; background: none; }
.pa-blog .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1024px) { .pa-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .pa-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .pa-blog__grid { grid-template-columns: 1fr; } }

/* So dien thoai bam-de-goi. Boc san trong the <a> de Safari tren iOS khong tu
   bat so va to mau lien ket he thong cua no - tren nen xanh dam thi mau do
   gan nhu doc khong ra. */
.pa-tel { color: inherit; font-weight: 700; }
.pa-tel:hover { text-decoration: underline; }
.pa-tel--bright { color: #ffc63d; }
.pa-tel--bright:hover { color: #ffd469; }

/* ---------------------------------------------------- Trang dung bang WM Builder

   Cac trang footer duoc dung bang trinh dung (noi dung la shortcode [ub_*]).
   Phan lon giao dien do CSS cua plugin lo; hai khoi duoi day la cua theme:
   [pa_contacts] va bang nhieu cot trong khoi "Ma HTML". */

.pa-contactgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pa-contactgrid__item { background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 20px 22px; }
.pa-contactgrid__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7b879b; }
.pa-contactgrid__val { margin-top: 7px; font-size: 15px; font-weight: 600; color: #1f2c45; line-height: 1.6; }
.pa-contactgrid__val--link { display: inline-block; font-size: 15.5px; font-weight: 700; color: #1868db; }

/* Bang 3-4 cot: khong co phan tu san nen giu bang that, cuon ngang trong khung
   rieng de trang khong bao gio truot ngang tren dien thoai. */
.ub-html:has(.pa-lptable) { overflow-x: auto; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; }
.pa-lptable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.pa-lptable th { text-align: left; padding: 14px 18px; background: #f5f8fd; font-size: 13px; font-weight: 700; color: #24334d; border-bottom: 1px solid #e5e9f0; white-space: nowrap; }
.pa-lptable td { padding: 13px 18px; border-bottom: 1px solid #eef1f7; color: #4a5872; line-height: 1.7; }
.pa-lptable td:first-child { color: #1f2c45; font-weight: 600; }
.pa-lptable tr:last-child td { border-bottom: 0; }

/* The trong luoi [ub_cards] khong dat icon: bo o trong de chu khong bi day xuong. */
.ub-card-ico:empty { display: none; }

@media (max-width: 640px) {
	.pa-contactgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Khoang thut hai ben cua [ub_section]. Bien --wrap va bo mau di kem nam o
   inc/perf.php: chung phai in SAU ub.css moi thang duoc bo mac dinh cua plugin,
   ma tep nay thi in truoc. */
:root { --ub-gutter: 16px; }

/* Trang dung bang trinh dung: cac ub_section tu lo be ngang, o day chi can
   khoang ho duoi cung (ban cu la padding-bottom cua .pa-wrap). */
.pa-lp { padding-bottom: 44px; }