
/* ============================================================================
   shop-mobile.css  -  chi ap cho genfarmer.com/box-phone-shop/ tren dien thoai
   Pham vi: body.term-box-phone-shop + @media (max-width: 549px). Desktop khong doi.
   Nguyen tac: KHONG doi mau, font, nen, chu. Moi gia tri mau/font duoi day
   deu lay tu chinh trang (do ngay 08/09/2026, xem du-lieu-do/token-san-pham.json):
     font    Inter, sans-serif           chu     rgb(34,34,34)
     tieu de rgb(17,17,17)               gia     rgb(119,119,119) 600
     vien    1px solid rgb(221,221,221)  bo goc  12px (the) / 8px (nut)
     nen phu rgb(240,244,252)            nen the #fff
   Viec cua file nay chi la: xep lai, phong to vung bam, va them khoi dieu huong.
   ========================================================================== */

@media (max-width: 549px) {

  /* --- 1. lop noi: giu Pancake chat va nut nhan qua, bo hai lop con lai ---
     Sua 19/09/2026. Truoc day muc nay an ca #gfGiftOpen. SAI: #gfGiftOpen la
     duong duy nhat mo form lay lead cua trang, an no di la ban mobile mat han
     mot duong lead, trong khi phan lon khach vao trang nay bang dien thoai.
     Nay giu lai, chi thu nho va ep sat mep phai cho no thoi che noi dung. */
  body.term-box-phone-shop #gfCampaignPopup,
  body.term-box-phone-shop .floating-contact { display: none !important; }
  /* GIU NGUYEN KIEU TAB DOC CUA BAN WEB, chi thu nho lai.
     Da thu bien no thanh nut tron chi co icon, bo: mot icon tron khong noi
     duoc chu "Receive Gift", nhin khong ra la cai gi. Nen giu nguyen hinh
     dang, chu va nen gradient cam cua chinh trang, chi thu tu 49x159 xuong
     34x111 bang transform, tuc khong dong vao mot gia tri nao ben trong.
     Dat o 42vh: duoi header, tren thanh dinh day va bong bong chat. */
  /* THU NHO BANG zoom, KHONG bang transform. Tab nay co animation ten
     "skew-x" chay 1s lap lai, va animation do dieu khien chinh thuoc tinh
     transform. Dat transform: scale(.82) !important len no la de bep ca
     animation: do 19/09 thay transform tren dien thoai la matrix(.82,0,0,.82)
     dung im, con ban web la matrix(1,0,.073,1) dang nghieng qua lai. Dung
     zoom thi transform con nguyen cho animation, nut van rung nhu ban web. */
  body.term-box-phone-shop #gfGiftOpen {
    display: block !important;
    top: 42vh !important; bottom: auto !important;
    z-index: 2147481500 !important;
    zoom: .78;
  }
  /* Dang mo catalog hoac dang mo form thi an tab di, khong thi no noi len
     tren ca hai lop do. */
  body.gf-cat-mo #gfGiftOpen,
  body.gf-modal-mo #gfGiftOpen,
  /* gf-lop-phu-mo do gio-hang-shop.js gan khi co bat ky lop phu nao mo:
     khay gio hang, khung xem anh, pop-up cua theme. */
  body.gf-lop-phu-mo #gfGiftOpen { display: none !important; }

  /* --- 2. breadcrumb gon lai, lay lai chieu cao cho noi dung ------------- */
  body.term-box-phone-shop .bc-sec { padding: 8px 0 !important; }

  /* --- 3. LUOI 2 COT thay cho carousel 1 san pham 1 khung --------------- */
  body.term-box-phone-shop .gf-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 12px;
    margin: 0 !important;
  }
  body.term-box-phone-shop .gf-grid > * {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    left: auto !important;
    position: static !important;
    transform: none !important;
  }
  /* the san pham: giu vien va bo goc cua theme, chi them nen trang va cat tran */
  body.term-box-phone-shop .gf-grid .product-small {
    background: #fff;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.term-box-phone-shop .gf-grid .product-small .box-image {
    width: 100% !important;
    background: #fff;
  }
  /* anh: thoi ep chieu cao de srcset tu chon ban to, het mo */
  body.term-box-phone-shop .gf-grid .product-small .box-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1.06;
    object-fit: contain;
  }
  body.term-box-phone-shop .gf-grid .product-small .box-text {
    padding: 8px 10px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }
  body.term-box-phone-shop .gf-grid .product-small .name a,
  body.term-box-phone-shop .gf-grid .product-small .name {
    font-size: 13px;
    line-height: 1.34;
    color: rgb(34, 34, 34);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.term-box-phone-shop .gf-grid .product-small .price,
  body.term-box-phone-shop .gf-grid .product-small .woocommerce-Price-amount {
    font-size: 14px;
    font-weight: 600;
    color: rgb(119, 119, 119);
  }
  /* bo chuoi "Price range:" bi lo ra ngoai */
  body.term-box-phone-shop .gf-grid .product-small .price .from,
  body.term-box-phone-shop .gf-grid .product-small .price ins,
  body.term-box-phone-shop .gf-grid .product-small .price del { font-size: inherit; }
  body.term-box-phone-shop .gf-price-range-an { display: none !important; }

  /* gia va nut nam duoi cung, xep doc de the nao cung cao bang nhau
     (gia dang khoang "1100$ - 1232$" xuong dong se lam nut lech neu de cung hang) */
  body.term-box-phone-shop .gf-grid .product-small .product-bottom-row {
    margin-top: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  body.term-box-phone-shop .gf-grid .product-small .price-wrapper { min-width: 0; }

  /* Apple va Ubiquiti khong dat nut rieng trong the, ca the la mot link.
     Nut BUY o day cung chi dieu huong sang trang san pham, nen an nut va cho
     bam ca the. Nhan chu BUY khong mat, no nam trong trang san pham. */
  body.term-box-phone-shop .gf-grid .product-small a.button,
  body.term-box-phone-shop .gf-grid .product-small button { display: none !important; }
  body.term-box-phone-shop .gf-grid .product-small { cursor: pointer; }
  body.term-box-phone-shop .gf-grid .product-small .box-text { padding-bottom: 12px !important; }
  /* het hang: giu nguyen nhan, chi lam mo anh cho de phan biet */
  body.term-box-phone-shop .gf-grid .product-small.gf-het .box-image img { opacity: .62; }
  body.term-box-phone-shop .gf-grid .product-small.gf-het a.button { opacity: .55; }

  /* nut mui va cham cua carousel khong con viec */
  body.term-box-phone-shop .gf-grid ~ .flickity-button,
  body.term-box-phone-shop .gf-grid .flickity-button,
  body.term-box-phone-shop .gf-grid .flickity-page-dots { display: none !important; }

  /* --- 4. thanh dieu huong he sinh thai + tim kiem ---------------------- */
  body.term-box-phone-shop .gf-bar { padding: 4px 12px 10px; }
  body.term-box-phone-shop .gf-find {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 46px; padding: 0 14px;
    border: 0; border-radius: 999px;
    background: rgb(240, 244, 252); color: rgb(119, 119, 119);
    font: 600 14px Inter, sans-serif; text-align: left;
    text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-find svg { flex: 0 0 auto; }
  body.term-box-phone-shop .gf-eco {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px;
  }
  body.term-box-phone-shop .gf-eco a {
    min-height: 52px; padding: 8px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid rgb(221, 221, 221); border-radius: 12px; background: #fff;
    font: 600 12.5px Inter, sans-serif; color: rgb(17, 17, 17); text-align: center;
    letter-spacing: .2px; text-transform: none !important;
  }
  body.term-box-phone-shop .gf-eco a small {
    font-weight: 400; font-size: 10.5px; color: rgb(119, 119, 119); line-height: 1.2;
  }

  /* --- 5. banner truoc day bam khong ra gi: cho bam ca banner, khong dan
     nhan nao len anh. Duong vao catalog nam o dau khoi va o thanh tim kiem. -- */
  body.term-box-phone-shop .gf-tap { cursor: pointer; }

  /* --- 6. CATALOG toan man hinh ----------------------------------------- */
  body.gf-cat-mo { overflow: hidden !important; }
  .gf-cat {
    position: fixed; inset: 0; z-index: 2147483000;
    background: #fff; display: none; flex-direction: column;
    font: 400 15px/1.5 Inter, sans-serif; color: rgb(34, 34, 34);
  }
  .gf-cat.mo { display: flex; }
  .gf-cat-top {
    position: sticky; top: 0; background: rgb(240, 244, 252);
    border-bottom: 1px solid rgb(221, 221, 221); padding: 10px 12px;
  }
  .gf-cat-hang { display: flex; align-items: center; gap: 8px; }
  .gf-cat-input {
    flex: 1; min-height: 44px; padding: 0 14px;
    border: 1px solid rgb(221, 221, 221); border-radius: 999px; background: #fff;
    font: 400 16px Inter, sans-serif; color: rgb(34, 34, 34);
  }
  .gf-cat-input::placeholder { color: rgb(119, 119, 119); }
  .gf-cat-dong {
    min-width: 44px; min-height: 44px; border: 0; background: transparent;
    font: 600 15px Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none !important;
  }
  .gf-cat-chip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; margin: 0; }
  .gf-cat-chip button {
    flex: 0 0 auto; min-height: 40px; padding: 0 14px;
    border: 1px solid rgb(221, 221, 221); border-radius: 999px; background: #fff;
    font: 600 13.5px Inter, sans-serif; color: rgb(34, 34, 34); white-space: nowrap;
    text-transform: none !important; letter-spacing: 0 !important;
  }
  .gf-cat-chip button[aria-pressed="true"] {
    background: rgb(17, 17, 17); border-color: rgb(17, 17, 17); color: #fff;
  }
  .gf-cat-dem { padding: 8px 12px 0; font-size: 13px; color: rgb(119, 119, 119); }
  .gf-cat-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px 28px; }
  .gf-cat-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .gf-cat-the {
    display: flex; flex-direction: column;
    border: 1px solid rgb(221, 221, 221); border-radius: 12px; background: #fff;
    overflow: hidden; color: rgb(34, 34, 34);
  }
  .gf-cat-the img { width: 100%; height: auto; aspect-ratio: 1 / 1.06; object-fit: contain; background: #fff; }
  .gf-cat-tt { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
  .gf-cat-ten {
    font-size: 13px; line-height: 1.34; color: rgb(34, 34, 34);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .gf-cat-gia { font-size: 14px; font-weight: 600; color: rgb(119, 119, 119); margin-top: auto; }
  .gf-cat-nhan {
    align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .3px;
    padding: 2px 8px; border-radius: 999px; border: 1px solid rgb(221, 221, 221); color: rgb(119, 119, 119);
  }
  .gf-cat-nhan.het { color: rgb(17, 17, 17); }
  .gf-cat-the.het img { opacity: .62; }
  .gf-cat-trong { padding: 40px 8px; text-align: center; color: rgb(119, 119, 119); }
  .gf-cat-eco { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0 4px; }
  .gf-cat-eco a {
    min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border: 1px solid rgb(221, 221, 221); border-radius: 12px; background: #fff;
    font: 600 12.5px Inter, sans-serif; color: rgb(17, 17, 17); text-align: center;
  }
  .gf-cat-eco a small { font-weight: 400; font-size: 10.5px; color: rgb(119, 119, 119); }

  /* --- 7. luoi thu gon: hien 6 the, phan con lai mo bang nut ------------ */
  body.term-box-phone-shop .gf-grid.gf-thu-gon > *:nth-child(n+5) { display: none !important; }
  /* Mau do tu Samsung: nut xem them la pill vien manh, rong theo chu, dat giua.
     Khong dung khoi vien full width vi nhin nhu mot the trong. */
  body.term-box-phone-shop .gf-more-boc { display: flex; justify-content: center; padding: 14px 12px 2px; }
  body.term-box-phone-shop .gf-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 24px; width: auto;
    border: 1px solid rgb(221, 221, 221); border-radius: 999px; background: #fff;
    font: 600 14px Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none !important; letter-spacing: 0 !important;
  }

  /* --- 8. tieu de that cho tung khoi (trang dang co 0 H2) -------------- */
  body.term-box-phone-shop .gf-head { padding: 12px 12px 6px; }
  body.term-box-phone-shop .gf-head .gf-head-tren {
    display: flex; align-items: center; gap: 10px;
  }
  body.term-box-phone-shop .gf-head h2 {
    margin: 0; flex: 1 1 auto; min-width: 0;
    font: 700 19px/1.25 Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.term-box-phone-shop .gf-head span {
    display: block; margin-top: 2px;
    font: 400 12.5px Inter, sans-serif; color: rgb(119, 119, 119);
  }
  body.term-box-phone-shop .gf-head .gf-all {
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
    min-height: 44px; padding-left: 6px;
    font: 600 13.5px Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap;
  }
  body.term-box-phone-shop .gf-head .gf-all svg { flex: 0 0 auto; }

  /* --- 9. khoi he sinh thai: co nhan, lap lai o cuoi trang ------------- */
  body.term-box-phone-shop .gf-eco-nhan {
    padding: 0 2px 8px; font: 700 14px Inter, sans-serif; color: rgb(17, 17, 17);
  }
  body.term-box-phone-shop .gf-eco a { position: relative; }
  body.term-box-phone-shop .gf-eco a b {
    font: 700 13px Inter, sans-serif; color: rgb(17, 17, 17);
  }
  body.term-box-phone-shop .gf-eco a i { display: none; }
  body.term-box-phone-shop .gf-bar.gf-bar-cuoi {
    padding: 18px 12px 24px; background: rgb(240, 244, 252);
  }

  /* --- 10. nhan New / Sale: bo goc 12px cua the dang cat mat mot goc nhan,
     day nhan vao trong 6px la het ------------------------------------------ */
  body.term-box-phone-shop .gf-grid .product-small .badge-container,
  body.term-box-phone-shop .gf-grid .product-small .badge-container.absolute {
    left: 6px !important;
    top: 6px !important;
    right: auto !important;
    z-index: 22;
  }
  body.term-box-phone-shop .gf-grid .product-small .badge-container .badge {
    box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
  }

  /* --- 11. dai he sinh thai: 4 o mot hang, logo that, doc theo kieu dai
     danh muc cua store thiet bi (Ubiquiti, DJI) chu khong phai 4 the to ----- */
  body.term-box-phone-shop .gf-eco,
  .gf-cat .gf-eco {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px;
  }
  body.term-box-phone-shop .gf-eco a,
  .gf-cat .gf-eco a {
    min-height: 74px; padding: 10px 4px 8px; gap: 5px;
    justify-content: flex-start; border-color: rgb(230, 235, 245);
  }
  /* Vong tron co dinh, anh ben trong dung object-fit contain va cung mot cho
     26px, nen ba file logo co le trong khac nhau van hien to bang nhau. */
  body.term-box-phone-shop .gf-eco a .gf-ico,
  .gf-cat .gf-eco a .gf-ico {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 auto; flex: 0 0 auto;
    background: rgb(240, 244, 252); border-radius: 999px; overflow: hidden;
  }
  body.term-box-phone-shop .gf-eco a .gf-ico img,
  .gf-cat .gf-eco a .gf-ico img {
    width: 26px; height: 26px; object-fit: contain; display: block;
  }
  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco a .gf-ico {
    width: 40px; height: 40px;
  }
  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco a .gf-ico img {
    width: 24px; height: 24px;
  }
  body.term-box-phone-shop .gf-eco a b,
  .gf-cat .gf-eco a b {
    font: 600 11px/1.2 Inter, sans-serif; color: rgb(17, 17, 17); text-align: center;
  }
  body.term-box-phone-shop .gf-eco a small,
  .gf-cat .gf-eco a small { display: none; }

  /* --- 12. khoi lien he: mot dai nen nhat cua chinh trang, mot nut chinh,
     hai kenh con la link chu. Khong long them the vien nao. ------------------ */
  body.term-box-phone-shop .gf-cta {
    margin: 22px 0 6px; padding: 22px 16px 20px;
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    background: rgb(240, 244, 252); text-align: center;
  }
  body.term-box-phone-shop .gf-cta h2 {
    margin: 0 0 6px; font: 700 18px/1.3 Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none; letter-spacing: -.2px;
  }
  body.term-box-phone-shop .gf-cta p {
    margin: 0 auto 14px; max-width: 300px;
    font: 400 13.5px/1.5 Inter, sans-serif; color: rgb(119, 119, 119);
  }
  body.term-box-phone-shop .gf-cta a.chinh {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; border-radius: 999px;
    background: rgb(0, 0, 0); color: #fff;
    font: 600 15px Inter, sans-serif; text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-cta .gf-cta-kenh {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 12px; flex-wrap: wrap;
  }
  body.term-box-phone-shop .gf-cta .gf-cta-kenh a {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px;
    font: 600 14px Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-cta .gf-cta-kenh span { color: rgb(119, 119, 119); }
  body.term-box-phone-shop .gf-cta small {
    display: block; margin-top: 2px; font: 400 12.5px Inter, sans-serif; color: rgb(119, 119, 119);
  }

  /* --- 13. thanh lien he dinh day, hien sau khi cuon qua khoi dau ------- */
  body.term-box-phone-shop.gf-co-thanh { padding-bottom: 66px; }
  .gf-day {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000;
    display: none; grid-template-columns: 1.25fr 1fr; gap: 8px;
    padding: 9px 12px 9px;
    background: rgba(255, 255, 255, .97); border-top: 1px solid rgb(221, 221, 221);
    box-shadow: 0 -6px 20px rgba(17, 17, 17, .08);
  }
  .gf-day.hien { display: grid; }
  .gf-day a {
    min-height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; font: 600 14px Inter, sans-serif; text-decoration: none;
    text-transform: none; letter-spacing: 0;
    border: 1px solid rgb(221, 221, 221); background: #fff; color: rgb(17, 17, 17);
  }
  .gf-day a.chinh { background: rgb(0, 0, 0); border-color: rgb(0, 0, 0); color: #fff; }
  /* day bong bong chat len cho khoi che thanh day */

  /* --- 14. the chien dich: dai ebook goc chi cao 34px nen chu trong anh
     khong doc duoc, va anh do khong co link. Thay bang mot the that dung
     dung mau navy cua chinh anh (do duoc rgb(0,27,86) -> rgb(1,11,46)),
     chu lay nguyen van tren anh, nut bam mo dung #gfGiftModal cua trang. -- */
  body.term-box-phone-shop .mobile-static-gift-strip,
  body.term-box-phone-shop .gf-strip-an { display: none !important; }
  body.term-box-phone-shop .gf-camp {
    margin: 14px 12px 4px; padding: 16px 16px 18px;
    border-radius: 14px; color: #fff;
    background: linear-gradient(100deg, rgb(0, 27, 86), rgb(1, 11, 46));
  }
  body.term-box-phone-shop .gf-camp-nhan {
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 11px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
    color: rgb(120, 190, 255);
  }
  body.term-box-phone-shop .gf-camp h2 {
    margin: 6px 0 4px; font: 700 17px/1.3 Inter, sans-serif; color: #fff;
    text-transform: none; letter-spacing: -.2px;
  }
  body.term-box-phone-shop .gf-camp p {
    margin: 0 0 12px; font: 400 13px/1.5 Inter, sans-serif; color: rgba(255, 255, 255, .78);
  }
  body.term-box-phone-shop .gf-camp button {
    min-height: 46px; width: 100%; border: 0; border-radius: 999px;
    background: #fff; color: rgb(1, 22, 79);
    font: 600 14.5px Inter, sans-serif; text-transform: none !important; letter-spacing: 0 !important;
  }

  /* --- 15. the trong catalog: bo nhan con hang, anh co nen nhat --------- */
  .gf-cat-the { border-color: rgb(230, 235, 245); }
  .gf-cat-the img { background: rgb(247, 249, 253); padding: 6px; }
  .gf-cat-ten { -webkit-line-clamp: 2 !important; }
  .gf-cat-gia { font-size: 15px !important; font-weight: 700 !important; }
  .gf-cat-nhan { display: none; }
  .gf-cat-the.het .gf-cat-nhan {
    display: inline-block; border: 0; padding: 0; color: rgb(119, 119, 119);
    font: 600 11.5px Inter, sans-serif;
  }

  /* --- 16. banner hero: KHONG cat nua ------------------------------------
     Da thu hai cach: ep aspect-ratio len .flickity-viewport (Flickity tinh lai
     roi dat transform -56,63%, slide lech nua khung) va boc khung cat ben ngoai
     (slide van lech vi margin cua hang ben trong). Ket luan: khong cat carousel
     bang CSS. Banner tra ve dung 363x363 nhu thiet ke. Muon banner ngan hon thi
     design xuat ban ti le 2:1 cho mobile, viec nay da ghi trong tracker. ---- */
  body.term-box-phone-shop .pd-bp-sec1 { padding-top: 6px !important; padding-bottom: 6px !important; }
  body.term-box-phone-shop .pd-bp-sec2 { padding-top: 6px !important; }

  /* --- 17. dai he sinh thai o dinh: icon trong vong tron, chu o duoi, khong
     vien. Mau lay tu dai danh muc cua DJI va cac san: icon + nhan, khong dung
     pill vien, de khong lan voi hang chip loc ben duoi. ------------------- */
  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco-nhan { display: none; }
  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px; margin-top: 10px;
  }
  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco a {
    min-height: 0; padding: 0; gap: 6px; border: 0 !important; background: none !important;
    flex-direction: column; justify-content: flex-start;
  }

  body.term-box-phone-shop .gf-bar:not(.gf-bar-cuoi) .gf-eco a b {
    font: 600 11px/1.2 Inter, sans-serif; color: rgb(34, 34, 34); text-align: center;
  }

  /* --- 20. form trong popup qua tang: toi uu cho dien tren dien thoai ---
     Do duoc truoc khi sua: o "Full name" chu 14px, duoi 16px thi iOS tu zoom
     moi lan bam vao o va khong tra lai. Tat ca o cao 44px, khong co
     autocomplete hay inputmode. --------------------------------------- */
  #gfGiftModal.gf-mo-tay { display: flex !important; }
  #gfGiftModal input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]),
  #gfGiftModal select,
  #gfGiftModal textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid rgb(221, 221, 221) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: rgb(34, 34, 34) !important;
  }
  #gfGiftModal textarea { min-height: 88px !important; }
  #gfGiftModal .wpcf7-form label {
    display: block; margin-bottom: 4px;
    font: 600 13px Inter, sans-serif !important; color: rgb(119, 119, 119) !important;
  }
  #gfGiftModal .wpcf7-form p { margin-bottom: 12px !important; }
  #gfGiftModal input[type=submit],
  #gfGiftModal .wpcf7-submit {
    width: 100% !important; min-height: 50px !important;
    border-radius: 999px !important; border: 0 !important;
    background: rgb(0, 0, 0) !important; color: #fff !important;
    font: 600 15px Inter, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  #gfGiftModal .gf-dong-tay {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    min-width: 44px; min-height: 44px; border: 0; border-radius: 999px;
    background: rgba(17, 17, 17, .08); color: rgb(17, 17, 17);
    font: 600 15px Inter, sans-serif;
  }

  /* --- 21. hai loi do chinh CSS o muc 20 gay ra, sua lai ----------------
     a) Contact Form 7 co o honeypot chong spam ten _hs, phai luon an.
        Rule "moi input cao 48px" da lam no hien ra thanh mot o trong.
     b) Nut dong modal chi 32x32, duoi nguong 44px. -------------------- */
  #gfGiftModal input[name^="_hs"],
  #gfGiftModal .wpcf7-honeypot input,
  #gfGiftModal .wpcf7-honeypot { display: none !important; }
  #gfGiftModal .gf-gift-modal__close,
  #gfGiftModal button[class*="close"] {
    min-width: 44px !important; min-height: 44px !important; font-size: 22px !important;
  }

  /* --- 22. hai chi tiet trong modal ------------------------------------
     a) o quoc gia dung plugin co la co dat trong o, padding 14px cua toi lam
        chu de len la co. Chua cho la co 44px.
     b) thanh lien he dinh day che modal, an di khi modal dang mo. ------ */
  /* CHUOI :not PHAI LAP LAI, khong phai thua.
     Do 19/09/2026: luat nay tu 08/09 khong he chay. Luat o muc 20 ghi
     `padding: 12px 14px !important` voi bo chon
     `#gfGiftModal input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio])`,
     trong so rieng phan b la 4. Luat nay chi co 1, nen padding tat ca thang
     padding-left du ca hai deu !important. Ket qua: o quoc gia co
     padding-left 14px, con khoi la co rong 307px de len chu, khach nhin ra
     mot cai mui ten dam len chu U cua "United States". Them dung bo :not do
     vao la trong so 5, luc nay moi thang. */
  #gfGiftModal input[name^="countrytext"]:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]),
  #gfGiftModal .iti input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]) {
    padding-left: 48px !important;
  }
  /* Khoi la co phai co be rong co dinh. Khong ghim thi no an het chieu ngang
     cua o va cai mui ten xo doc len dau dong chu. */
  #gfGiftModal .country-select .flag-dropdown { width: 44px !important; }
  #gfGiftModal .country-select .selected-flag {
    width: 44px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 3px;
  }
  #gfGiftModal .country-select .selected-flag .arrow {
    position: static !important; margin: 0 !important;
  }
  body.gf-modal-mo .gf-day { display: none !important; }

  /* --- 22b. FORM NGAN LAI ------------------------------------------------
     Do 19/09/2026 o khung 393x851: form cao 1242px trong modal cao 851px,
     tuc khach phai cuon 1,5 man hinh moi het form. Nguyen nhan khong phai
     so cau hoi (9 cau, dung bang ban trang chu) ma la khoang cach: moi truong
     an 68px trong khi o nhap chi cao 48, va rieng hang chip nen tang an 238px.
     Khong bo cau hoi nao, chi siet lai khoang cach va co chu. */
  #gfGiftModal .gf-hoi-truong { margin: 0 0 8px !important; }
  #gfGiftModal .gf-hoi-khoi { margin: 0 !important; }
  #gfGiftModal .gf-hoi-nhan {
    margin: 0 0 3px !important; font-size: 13px !important; line-height: 1.3 !important;
  }
  #gfGiftModal .gf-hoi-goi { margin: -1px 0 5px !important; font-size: 12px !important; }
  #gfGiftModal input:not([type=hidden]):not([type=submit]):not([type=checkbox]):not([type=radio]),
  #gfGiftModal select,
  #gfGiftModal .gf-hoi-select {
    min-height: 44px !important; padding: 10px 14px !important;
  }
  #gfGiftModal textarea { min-height: 66px !important; padding: 10px 14px !important; }
  /* Khe giua cac o phai DEU. Do 19/09/2026 truoc khi sua: 32, 10, 24, 24, 42
     px. Nguyen nhan: khung form la flex co san `gap: 16px`, ma the p ben
     trong moi o LAI mang them le duoi, nen hai thu cong vao nhau; rieng cap
     quoc gia + dien thoai nam trong .gf-cf7-row co gap rieng 10px nen lai
     dinh sat nhau. Chua dung cach la BO le cua the p di va de cai gap san
     lo, chu khong phai them le moi. Da thu them le: khe phong len 58/44/62,
     xau hon truoc. */
  #gfGiftModal .wpcf7-form p { margin: 0 !important; }
  #gfGiftModal .gf-cf7-row { gap: 16px !important; }
  #gfGiftModal .country-select { margin: 0 !important; }
  #gfGiftModal .wpcf7-form label { margin-bottom: 2px !important; }
  /* Hang chip nen tang: 9 chip an 238px. Chip thap hon va chu nho hon thi
     con 3 hang nhung moi hang thap hon han. Van tu xuong dong, khong cuon ngang. */
  /* Doan quang cao dau modal: chu 18px dan 4 dong, an mot khoang bang ca ba o
     nhap. Khong xoa chu nao, chi thu co chu va khoang dong lai. */
  #gfGiftModal .wpcf7 > p:first-child,
  #gfGiftModal h2, #gfGiftModal h3, #gfGiftModal h4 {
    font-size: 16px !important; line-height: 1.32 !important; margin-bottom: 6px !important;
  }
  #gfGiftModal .gf-gift-modal__head p,
  #gfGiftModal .gf-gift-modal__desc,
  #gfGiftModal .gf-gift-modal__desc p {
    font-size: 13.5px !important; line-height: 1.38 !important; margin: 0 0 5px !important;
  }
  #gfGiftModal .gf-hoi-chip { gap: 6px !important; }
  #gfGiftModal .gf-hoi-chip-item {
    min-height: 36px !important; padding: 0 11px !important;
    font-size: 13px !important; gap: 6px !important;
  }

  /* --- 23. dai cuoi trang: mot khoi lien, chay sat footer ----------------
     Do 4 shop that: khoang trang truoc footer = 0 o ca gl-inet, anker,
     samsung va ubiquiti. Ubiquiti dung mot dai nen nhat, cac phan ngan nhau
     bang duong ke 1px, padding hai ben 16px. Lam theo mau do. ---------- */
  body.term-box-phone-shop .gf-cuoi {
    margin: 0; padding: 24px 16px 8px;
    background: rgb(240, 244, 252);
  }
  body.term-box-phone-shop .gf-cuoi .gf-cuoi-cta { text-align: center; }
  body.term-box-phone-shop .gf-cuoi h2 {
    margin: 0 0 6px; font: 700 18px/1.3 Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none; letter-spacing: -.2px;
  }
  body.term-box-phone-shop .gf-cuoi p {
    margin: 0 auto 16px; max-width: 300px;
    font: 400 13.5px/1.55 Inter, sans-serif; color: rgb(119, 119, 119);
  }
  body.term-box-phone-shop .gf-cuoi a.chinh {
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; border-radius: 999px; background: rgb(0, 0, 0); color: #fff;
    font: 600 15px Inter, sans-serif; text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-cuoi .gf-cta-kenh {
    display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px;
  }
  body.term-box-phone-shop .gf-cuoi .gf-cta-kenh a {
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px;
    font: 600 14px Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-cuoi .gf-cta-kenh span { color: rgb(119, 119, 119); }
  body.term-box-phone-shop .gf-cuoi small {
    display: block; text-align: center; margin-top: 2px;
    font: 400 12.5px Inter, sans-serif; color: rgb(119, 119, 119);
  }
  body.term-box-phone-shop .gf-cuoi .gf-vach {
    height: 1px; background: rgb(223, 230, 243); margin: 20px 0;
  }
  body.term-box-phone-shop .gf-cuoi .gf-eco-nhan { padding: 0 0 10px; }
  body.term-box-phone-shop .gf-cuoi .gf-eco { margin: 0; }
  body.term-box-phone-shop .gf-cuoi .gf-more-boc { padding: 16px 0 4px; }

  /* --- 24. don khoang trang khoi anh bi an de lai ---------------------- */
  body.term-box-phone-shop .gf-rong { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.term-box-phone-shop .gf-rong > .col-inner { min-height: 0 !important; }

  /* --- 25. nhip doc deu nhau ---------------------------------------------
     Theme dat padding 30px tren va 30px duoi cho moi section nen giua cac khoi
     co cho ho 60 tới 68px, cho khac lai sat nhau. Ep ve 10px cho deu. ---- */
  body.term-box-phone-shop .pd-bp-sec2,
  body.term-box-phone-shop .pd-bp-sec3 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  body.term-box-phone-shop .pd-bp-sec2 > .section-content > .row > .col,
  body.term-box-phone-shop .pd-bp-sec3 > .section-content > .row > .col {
    padding-bottom: 0 !important;
  }

  /* --- 26. hero: thao Flickity, dung scroll-snap thuan CSS ---------------
     Ba cach dua theo Flickity deu lech slide: ep aspect-ratio len viewport,
     boc khung cat ben ngoai, va thu nho chieu rong roi ban su kien resize.
     Nen o mobile bo han Flickity khoi banner: do phang cay DOM roi cho cac
     slide chay ngang bang scroll-snap. Khong con phep tinh transform nao. -- */
  body.term-box-phone-shop .gf-hero {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px 2px;
    margin: 0 !important;
  }
  body.term-box-phone-shop .gf-hero::-webkit-scrollbar { display: none; }
  body.term-box-phone-shop .gf-hero > * {
    flex: 0 0 68%;
    max-width: none !important;
    width: auto !important;
    scroll-snap-align: center;
    position: static !important;
    transform: none !important;
    left: auto !important;
  }
  body.term-box-phone-shop .gf-hero img {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    border-radius: 12px;
  }
  body.term-box-phone-shop .pd-bp-sec1 .flickity-button,
  body.term-box-phone-shop .pd-bp-sec1 .flickity-page-dots { display: none !important; }

  /* --- 27. hang chip loc, thay cho the "13 devices" va nut den to --------
     Chip vien manh chay ngang, bam la mo catalog da loc san. -------------- */
  body.term-box-phone-shop .gf-chip {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 10px 12px 2px; margin: 0;
  }
  body.term-box-phone-shop .gf-chip::-webkit-scrollbar { display: none; }
  body.term-box-phone-shop .gf-chip button {
    flex: 0 0 auto; min-height: 36px; padding: 0 13px;
    border: 0; border-radius: 999px; background: rgb(240, 244, 252);
    font: 600 12.5px Inter, sans-serif; color: rgb(34, 34, 34); white-space: nowrap;
    text-transform: none !important; letter-spacing: 0 !important;
  }
  body.term-box-phone-shop .gf-chip button b { font-weight: 500; color: rgb(140, 148, 166); margin-left: 2px; }
  body.term-box-phone-shop .gf-chip { padding: 12px 12px 4px; gap: 6px; }

  /* qua tang: mot dong chu trong dai cuoi */
  body.term-box-phone-shop .gf-cuoi .gf-qua {
    display: block; text-align: center; margin-top: 14px; min-height: 44px; line-height: 44px;
    font: 600 13px Inter, sans-serif; color: rgb(17, 17, 17);
  }
  body.term-box-phone-shop .gf-cuoi .gf-qua span { font-weight: 400; color: rgb(119, 119, 119); }

  /* --- 28. bong bong chat Pancake ---------------------------------------
     Do duoc: nut noi 60x60 che the san pham "Mini PC Router" va che mot link
     o banner. Thu an nut noi roi mo bang nut rieng thi khong duoc, Pancake
     khong nhan click khi nut dang an. Nen giu nut noi nhung thu con 43px va
     day len tren thanh day, dien che giam tu 3600px2 xuong 1850px2. */
  body.term-box-phone-shop .pkcp-button-wrapper {
    transform: scale(.72); transform-origin: bottom right;
  }
  body.term-box-phone-shop.gf-co-thanh #pancake-chat-plugin-root { bottom: 78px !important; }
  /* Con dung mot cho bong bong con che tam nut: hang icon lien he trong footer.
     Khi footer vao khung thi an bong bong, luc do khach da co san hang icon do. */
  body.term-box-phone-shop.gf-an-chat #pancake-chat-plugin-root { display: none !important; }

  /* --- 29. GIO HANG: da chuyen sang gio-hang-shop.css --------------------
     Phan nut mua, dai bao va nut gio truoc o day. Chuyen di 19/09/2026 vi ca
     file nay nam trong @media (max-width:549px), nen mo bang may tinh la
     khong co nut mua nao. Duoi day chi con nhung gi THAT SU rieng cua dien
     thoai. Khong dat huy hieu so mon len icon gio nua: theme da tu ve mot cai
     tu chinh data-icon-label, ve chong len thanh hai bong bong de nhau. */
  /* Tren dien thoai the hep, nut keo het be ngang the. Tren may tinh no giu
     be rong theo noi dung, dung cho cua nut BUY cu, xem gio-hang-shop.css. */
  body.term-box-phone-shop .gf-mua { min-height: 40px; font-size: 13px; }
  /* CHI luoi san pham moi ep width 100%. Dat cho .gf-mua noi chung thi
     the trong catalog cung dinh, ma the do co le 10px moi ben, 100% cong
     20px le la tran ra ngoai vien the, do duoc ca 26 the deu tran. */
  body.term-box-phone-shop .gf-grid .gf-mua { width: 100% !important; }
  body.term-box-phone-shop .gf-grid .product-small .gf-mua-boc { padding: 8px 0 2px; }
  body.term-box-phone-shop .gf-grid .product-small .box-text {
    display: flex; flex-direction: column; height: 100%;
  }

  /* 29c. catalog khong de len header nua.
     Truoc: .gf-cat { inset: 0 } -> phu kin man hinh, mat ca header lan link
     gio hang trong header. Nay catalog bat dau ngay duoi header, va header
     duoc ghim len dinh trong luc catalog mo. Chieu cao header do bang JS moi
     lan mo (bien --gf-header-cao), vi header nay co sticky-jump nen cao 70px
     luc dau trang va co lai khi da cuon. */
  body.gf-cat-mo #header {
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 2147483600 !important; background: #fff;
  }
  body.gf-cat-mo #header .header-wrapper { background: #fff; }
  .gf-cat { top: var(--gf-header-cao, 70px); }
  /* nut chat khong duoc nam de len catalog: trong catalog viec cua khach la
     chon may, khong phai mo khung chat */
  body.gf-cat-mo #pancake-chat-plugin-root { display: none !important; }
}

