/* ==========================================================================
   GenFarmer - gọn trang chủ trên mobile
   File: mobile-gon.css
   Dán vào: Appearance > Customize > Additional CSS, hoặc CSS của child theme.

   PHẠM VI: chỉ màn hình dưới 550px. Desktop và tablet giữ nguyên 100 phần trăm.
   Mục 1 tới 11 chỉ áp cho trang chủ (`body.home`).
   Mục 12 áp cho trang /contact-us/ (`body.page-id-349`), thêm ngày 07/09 vì
   user chỉ ra form ở trang đó khó điền và ảnh minh hoạ chiếm hết màn hình đầu.

   KHÔNG có khối gấp, KHÔNG có nút "xem thêm". Trang ngắn lại bằng hai cách:
   1. Chữ ngắn hơn, gõ thẳng vào UX Builder theo bảng trong 02-TRUOC-VA-SAU.html.
   2. Nén bố cục: cái gì đang xếp dọc mà xếp ngang được thì cho cuộn ngang,
      cái gì một cột mà vừa hai cột thì cho hai cột, và cắt khoảng trống chết.
   Không xoá section nào, không ẩn nội dung nào.

   Cặp với mobile-gon.js. Đo trên khung 393 x 851, Pixel 5, trình duyệt thật.
   ========================================================================== */

@media (max-width: 549px) {

/* --------------------------------------------------------------------------
   1. LỚP NỔI: từ 4 xuống 1
   Nặng nhất là #gfCampaignPopup: 393x851, z-index 2147483647, phủ trọn
   màn hình đầu tiên, đúng cái màn hình khách bấm từ Reels nhìn thấy trước nhất.
   Giữ lại duy nhất chat Pancake.
   -------------------------------------------------------------------------- */
body.home #gfCampaignPopup,
body.home #gfCampaignPopup.is-open,
body.home #gfGiftOpen,
body.home #gfGiftModal,
body.home .floating-contact {
  display: none !important;
}

/* Script của theme gắn class gf-campaign-popup-open vào body và class đó đặt
   overflow:hidden để khoá cuộn. Ẩn popup mà quên mở khoá này thì trang bị
   đóng băng với một popup vô hình. */
body.home.gf-campaign-popup-open,
body.home.gf-gift-modal-open {
  overflow: visible !important;
  position: static !important;
  height: auto !important;
}

body.home #pancake-chat-plugin-root {
  bottom: 16px !important;
}

/* --------------------------------------------------------------------------
   2. CẮT KHOẢNG TRỐNG CHẾT
   Theme để padding dọc của section theo cỡ desktop. Trên điện thoại nó thành
   những khoảng trắng dài phải cuộn qua mà không có gì để đọc.
   -------------------------------------------------------------------------- */
body.home .h-sec2,
body.home .h-sec3,
body.home .h-sec4,
body.home .h-sec5,
body.home .h-sec6,
body.home .h-sec7 {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}
body.home .h-sec2 .section-content > .row,
body.home .h-sec4 .section-content > .row,
body.home .h-sec6 .section-content > .row {
  margin-bottom: 0 !important;
}
body.home .h-sec2 .col,
body.home .h-sec3 .col,
body.home .h-sec4 .col,
body.home .h-sec6 .col,
body.home .h-sec7 .col {
  padding-bottom: 14px !important;
}
body.home .h-sec2 h2,
body.home .h-sec3 h2,
body.home .h-sec4 h2,
body.home .h-sec6 h2,
body.home .h-sec7 h2 {
  margin-bottom: 8px !important;
  text-wrap: balance;
}
body.home .h-sec2 .content-text > ul {
  margin: 8px 0 12px !important;
  padding-left: 1.15em;
}
body.home .h-sec2 .content-text > ul li {
  margin-bottom: 6px !important;
}

/* --------------------------------------------------------------------------
   3. ẢNH: KHÔNG ép chiều cao ảnh có chữ đọc được
   Lần trước tôi ép mọi ảnh trong `.h-sec2` xuống 150px để bớt chiều cao trang.
   Đó là sai, và đo được là sai: ba ảnh đó không phải ảnh trang trí, chúng là
   bảng thông số có chữ đọc được.
     farmer-shop-en   phục vụ 600x302, hiển thị 363x182 -> bị ép còn 363x150
     real-cloud       phục vụ 600x359, hiển thị 363x217 -> bị ép còn 363x150
     no-coding        phục vụ 600x392, hiển thị 363x237 -> bị ép còn 363x150
   Ảnh real-cloud là bảng so máy Galaxy S8, Z Flip 4, Note 10 với dòng Model
   Code, RAM, Chip, Pricing. Ép 217 xuống 150 là co chữ đi 31 phần trăm, đọc
   không ra nữa. Bỏ hẳn cái ép đó.
   Giá phải trả: trang cao thêm 186px, tức 0,22 màn hình. Đổi lại ảnh đọc được.

   `.h-sec5` là dải logo đối tác, mỗi logo cao 50px do theme đặt, không phải do
   rule này, nên không đụng tới.
   -------------------------------------------------------------------------- */
body.home .h-sec2 .img img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   3b. ẢNH HERO: ĐÃ TRẢ VỀ, KHÔNG CÒN ẨN

   Trước đây tôi ẩn `hero-2-1.webp` cùng ba icon trang trí `.abs-img` với lý do:
   ảnh gốc 2207x1102 là ảnh chụp dashboard desktop, WordPress phục vụ bản crop
   600x300 và hiển thị ở 363x181px, nên mỗi máy trong lưới còn khoảng 15px,
   không đọc được gì.

   Bỏ cách đó, ngày 07/09. Ẩn một ảnh đang có trên trang là XOÁ NỘI DUNG, đúng
   cái mà cả bộ CSS này nói là không làm. Và đó là quyết định tôi tự đưa ra chứ
   không phải user duyệt. User đã chụp lại chính ảnh đó và nói bị mất.

   CÒN NỢ, không sửa được bằng CSS: muốn ảnh hero đọc được trên điện thoại thì
   phải cắt riêng một ảnh dọc, ví dụ chụp app trên một máy điện thoại chứ không
   phải cả dashboard. Việc của người giữ ảnh, đã ghi vào Task-tracker.
   Giá phải trả cho việc trả về: trang cao thêm khoảng 181px.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. BẢY ĐÁNH GIÁ: từ xếp dọc thành cuộn ngang
   Đo được khối đánh giá cao 1596px, gần 2 màn hình chỉ để đọc 7 lời khen.
   Cho cuộn ngang, giữ đủ 7, cao còn khoảng một phần tư.
   -------------------------------------------------------------------------- */
body.home .h-sec6 .tes-ct {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  gap: 10px;
  /* KHONG dung le am o day. Truoc do de margin 0 -15px voi padding bu 15px,
     nhung padding bi theme de len, nen the dau tien nam o x = -15 va bi cat
     mat mep trai, cong 68 phan tu tran qua mep phai. Do lai roi bo han le am. */
  margin: 0 !important;
  padding: 2px 0 14px !important;
  max-width: 100%;
}
body.home .h-sec6 .tes-ct > .col {
  flex: 0 0 88% !important;
  max-width: 88% !important;
  width: 88% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start;
}
body.home .h-sec6 .tes-ct > .col .col-inner {
  height: 100%;
  padding: 18px !important;
}
body.home .h-sec6 .tes-ct * {
  max-width: 100%;
}
body.home .h-sec6 .tes-ct::-webkit-scrollbar { height: 3px; }
body.home .h-sec6 .tes-ct::-webkit-scrollbar-thumb {
  background: #cfdcee; border-radius: 3px;
}

/* --------------------------------------------------------------------------
   5. ĐÃ BỎ: thử cho lưới hệ sinh thái thành 2 cột
   Rule cũ nhắm vào `.h-sec4 .row.align-center > .col`, nhưng row đó chỉ có 2 col
   trực tiếp và thẻ hệ sinh thái nằm SÂU BÊN TRONG col thứ hai. Ép col xuống 50%
   làm nó rộng 192px và cao 1176px, tức khối cao HƠN chứ không thấp đi.
   Đo được: sec4 giữ nguyên 2254px trong khi mục đích là giảm.
   Bỏ hẳn. Muốn nén khối này thì phải nhắm vào lưới thẻ bên trong, làm sau và
   phải đo lại từng bước.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5b. SÁU THẺ HỆ SINH THÁI: một cột thành hai cột
   Đo được: `.h-sec4 .row.row-small.align-equal` có đúng 6 con, mỗi con là
   `.col.medium-6.small-12.large-4` cao 85px, xếp dọc thành 508px.
   Mỗi thẻ chỉ có một icon và một dòng chữ, hai cột là vừa.

   Lần trước tôi nhắm nhầm vào `.row.align-center` là row cha, ép nó xuống 50%
   làm cột con rộng 192px và cao 1176px. Lần này nhắm đúng row có 6 con, và
   loại trừ `.ct-2` cùng `.align-center` để không đụng hai row kia.
   -------------------------------------------------------------------------- */
body.home .h-sec4 .row.row-small.align-equal:not(.ct-2):not(.align-center) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px;
}
body.home .h-sec4 .row.row-small.align-equal:not(.ct-2):not(.align-center) > .col {
  flex: 0 0 calc(50% - 4px) !important;
  max-width: calc(50% - 4px) !important;
  width: calc(50% - 4px) !important;
  padding: 0 !important;
}
body.home .h-sec4 .row.row-small.align-equal:not(.ct-2):not(.align-center) .icon-box-text h4 {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   5c. KHỐI SỐ "3 years of development": chữ nhãn quá to nên vỡ dòng
   Đo được: `.stats-item` rộng 131px nhưng `p.stats-text` để font 18px
   line-height 27px, nên "users using products in the ecosystem" vỡ thành
   4 dòng và cao 81px. Khối thành ra lệch và trống.
   Chỉ hạ cỡ chữ nhãn, không đổi bố cục, không đổi con số.
   -------------------------------------------------------------------------- */
body.home .h-sec4 .stats-item .stats-number {
  font-size: 20px !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}
body.home .h-sec4 .stats-item .stats-text {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
body.home .h-sec4 .stats-item p:empty {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. BẢY GÓI SẢN PHẨM: giữ băng cuộn, chỉ cho bấm được
   -------------------------------------------------------------------------- */
body.home .h-sec2 .row-carousel a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
}
body.home .h-sec2 .flickity-prev-next-button {
  min-width: 44px !important;
  width: 44px !important;
}

/* --------------------------------------------------------------------------
   6b. BĂNG 7 GÓI: thẻ cao 562px vì ảnh sản phẩm là ô vuông 361x361
   Hạ chiều cao ảnh xuống để thẻ thấp lại. Không bỏ thẻ nào, vẫn đủ 7 gói.
   Băng rộng 383px trong khung cha 363px do lề âm 10px hai bên của theme,
   đó là bình thường, không sửa. Phần lệch là do flickity chưa tính lại kích
   thước sau khi CSS đổi, xử lý bằng một sự kiện resize trong mobile-gon.js.
   -------------------------------------------------------------------------- */
body.home .h-sec2 .row-carousel .flickity-viewport {
  max-width: 100% !important;
}
/* Lần trước tôi để `max-height: 210px` cộng `width: auto`. Hai cái đó cộng lại
   ra một cái bẫy: khung ảnh hẹp làm trình duyệt chọn ứng viên srcset nhỏ nhất,
   đo ra `naturalWidth` chỉ còn 210 trong khi WordPress có sẵn bản 600px. Ảnh
   vừa bé vừa không thể to lại được nữa.
   Đặt `width: 100%` để trình duyệt chọn bản 600px, và nới trần lên 280px.
   Ảnh to hơn 33 phần trăm mà vẫn nét hơn trước, vì trước đó nó bị kéo 210 lên
   361 tức phóng 1,72 lần. Thẻ cao thêm khoảng 70px, chỉ một thẻ hiện mỗi lúc
   nên trang cao thêm 0,08 màn hình. */
body.home .h-sec2 .row-carousel img {
  max-height: 280px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   6c. NÚT GỬI CỦA FORM: đo được 154x50 trong khi các ô nhập rộng 323px
   Nút không mất, nó có nền gradient và chữ trắng, nhưng nhỏ hơn ô nhập một
   nửa nên nhìn như lạc. Cho bằng chiều ngang với ô nhập.
   Ô bẫy spam `_hs` render ra 26x2px, ẩn luôn.
   -------------------------------------------------------------------------- */
body.home .wpcf7-form input[type="submit"],
body.home .wpcf7-form .wpcf7-submit {
  display: block !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.home .wpcf7-form input[name="_hs"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6d. FORM TRONG KHOI NEN XANH DAC
   Do duoc: nen khoi rgb(0,108,255), o nhap nen rgb(236,236,236) khong vien,
   nhan chu 18px. Xam duc tren xanh chuoi nhin bam va khong ro dau la o nhap.
   Cho o nhap nen trang co vien, chu dam, va ha nhan xuong 14px cho do choan.
   Chi doi mau va co chu, khong doi so o, khong doi thu tu.
   -------------------------------------------------------------------------- */
body.home .dark .wpcf7-form input:not([type="submit"]),
body.home .dark .wpcf7-form select,
body.home .dark .wpcf7-form textarea {
  background-color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 12px !important;
  color: #101828 !important;
  font-size: 15px !important;
  padding: 0 14px !important;
}
body.home .dark .wpcf7-form textarea {
  padding: 12px 14px !important;
}
body.home .dark .wpcf7-form input::placeholder,
body.home .dark .wpcf7-form textarea::placeholder {
  color: #7a8698 !important;
  opacity: 1;
}
body.home .dark .wpcf7-form input:focus,
body.home .dark .wpcf7-form select:focus {
  outline: 3px solid rgba(255, 255, 255, .6) !important;
  outline-offset: 1px;
}
/* Nhan truong: 18px qua to tren khung 393, ha xuong 14px va bot khoang cach */
body.home .dark .wpcf7-form label,
body.home .dark .wpcf7-form p > strong,
body.home .dark .wpcf7-form .dcf7-label {
  font-size: 14px !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
  display: block;
}
body.home .dark .wpcf7-form p {
  margin-bottom: 12px !important;
}
/* O ma vung dien thoai dinh sat o so, cho no ro la mot cum */
body.home .dark .wpcf7-form .wpcf7-phonetext-country-code,
body.home .dark .wpcf7-form .selected-flag,
body.home .dark .wpcf7-form .flag-container {
  background-color: #fff !important;
  border-radius: 12px 0 0 12px !important;
  border-right: 1px solid #e3e9f2 !important;
  color: #101828 !important;
}

/* Nút gửi nằm trong khối nền xanh đặc. Đo được: nền khối là rgb(0,108,255),
   nút là gradient bắt đầu rgb(49,65,216). Tương phản giữa nút và nền chỉ
   1,59:1, nên nút gần như tan vào nền, nhìn ra là mất nút.
   Đảo lại: nút trắng, chữ xanh đậm.
   Nút trắng so với nền khối: 4,58:1. Chữ rgb(14,63,168) trên trắng: 9,15:1.
   Chỉ áp trong khối tối, các nút khác giữ nguyên. */
body.home .col-inner.dark .wpcf7-form input[type="submit"],
body.home .dark .wpcf7-form input[type="submit"] {
  background-image: none !important;
  background-color: #fff !important;
  color: #0e3fa8 !important;
  box-shadow: 0 6px 18px rgba(0, 30, 90, .22) !important;
  /* Theme chay animation mo dan tren nut nay va de lai opacity 0,766.
     Nut trang o muc do trong do nhin ra thanh xanh nhat vi lo nen xanh phia sau.
     Ep opacity ve 1, va bo animation cho khoi nhap nhay. */
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}
body.home .wpcf7-form .wpcf7-form-control-wrap,
body.home .wpcf7-form input:not([type="submit"]),
body.home .wpcf7-form select,
body.home .wpcf7-form textarea {
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   7. TAB CỦA KHỐI "All the features you need"
   Sáu tab trên khung 393px bị đẩy ra ngoài, ba tab cuối không thấy.
   Giữ đúng hành vi tab, chỉ cho cuộn ngang và nâng mỗi tab lên 44px.
   -------------------------------------------------------------------------- */
body.home .h-sec3 ul.nav-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin: 0 -15px 12px !important;
  padding: 2px 15px 8px !important;
}
body.home .h-sec3 ul.nav-pills::-webkit-scrollbar { height: 3px; }
body.home .h-sec3 ul.nav-pills::-webkit-scrollbar-thumb {
  background: #cfdcee; border-radius: 3px;
}
body.home .h-sec3 ul.nav-pills > li.tab {
  flex: 0 0 auto !important;
  margin: 0 7px 0 0 !important;
  scroll-snap-align: start;
}
body.home .h-sec3 ul.nav-pills > li.tab > a {
  display: flex !important;
  align-items: center;
  min-height: 44px !important;
  padding: 0 14px !important;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. THANH CHỮ CHẠY Ở TRÊN CÙNG (.dc-marquee): ĐÃ BỎ HẲN CAN THIỆP

   Tôi từng dừng nó lại và giữ một câu, với lý do: track lặp 18 lần cùng một
   câu, và link "Join us now on WhatsApp" chỉ 83x20 lại đang chạy ngang nên
   không bấm được.

   Nhưng cách sửa đó làm hỏng nhìn thấy được, đo ngày 07/09:
     - Mỗi thẻ span trong track là CẢ câu, rộng 969px. Giữ một thẻ rồi cho
       wrap trong khung 393px thì nó vỡ nhiều dòng.
     - Rule `.dc-marquee a { min-height: 44px }` biến link thành inline-block
       cao 44px, nên MỖI DÒNG đã wrap cao 44px chứ không phải 15px.
     - Kết quả: dải cao từ 43px thành 126px. Một dải xanh to đùng ngay đầu
       trang, đúng cái user chỉ ra.
     - Ép trần 52px thì hết phồng nhưng CẮT mất chữ, cũng sai, vì nguyên tắc
       của cả bộ này là không xoá nội dung nào.

   Nên trả lại đúng hành vi của theme: 43px, một dòng, chạy ngang. Đây cũng là
   can thiệp ít nhất, khớp lệnh "không đổi trang chủ nhiều".

   CÒN NỢ, không sửa được bằng CSS: link 83x20 đang di chuyển thì vẫn khó bấm.
   Muốn sửa đúng thì trong UX Builder cho dừng chạy khi người ta chạm vào,
   hoặc bỏ link ra khỏi băng chạy và đặt thành một nút riêng. Việc của người
   dựng trang, không phải việc của file CSS này.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   9. NÚT: sửa độ tương phản và cho bằng nhau
   Đo trên trang thật: nút viền .btn-ol có chữ rgb(85,125,255) trên nền
   gradient rgb(224,236,255), tương phản 3,64:1. Nút xanh đặc .btn-bg có chữ
   trắng trên gradient bắt đầu rgb(0,164,240), tương phản 2,77:1.
   Ngưỡng WCAG AA cho chữ thường là 4,5:1, nên cả hai đang mờ thật.
   Sau khi sửa: 7,67:1 và 4,99:1. Chỉ đổi màu, không đổi hình dáng nút.
   -------------------------------------------------------------------------- */
body.home .btn-ol,
body.home .button.is-outline {
  color: #0e3fa8 !important;
  border-color: #0e3fa8 !important;
  border-width: 2px !important;
  font-weight: 700 !important;
}
/* SỬA LỖI 07/09: phải loại `.ol-btn` ra, nếu không nút "View Detail" trong
   băng 7 gói bị chìm nghỉm. Nút đó có class `button primary lowercase ol-btn`,
   không có `.is-outline`, nên rule cũ khớp và vẽ gradient xanh ĐÈ LÊN nền trắng
   mà theme đã đặt. Đo được: `background-color: rgb(255,255,255)` nhưng
   `background-image: linear-gradient(rgb(0,110,215), rgb(71,82,230))`, chữ
   `rgb(34,34,34)`. Tức chữ xám đậm nằm trên nền xanh.

   Đây cũng là lỗ hổng trong cách tôi đo tương phản: script cũ so màu chữ với
   `backgroundColor` nên ra 15,91:1 và báo ĐẠT, trong khi thực tế cái người ta
   nhìn thấy là `backgroundImage` phủ bên trên. Từ giờ phải đọc cả
   background-image trước khi kết luận. */
body.home .btn-bg,
body.home .grad-btn,
body.home .btn-1,
body.home .h-buttons .button.primary:not(.is-outline):not(.ol-btn),
body.home .h-sec2 a.button.primary:not(.is-outline):not(.ol-btn),
body.home .h-sec8 a.button.primary:not(.is-outline):not(.ol-btn) {
  background-image: linear-gradient(rgb(0, 110, 215), rgb(71, 82, 230)) !important;
}
/* Trả lại đúng kiểu nút viền của theme, và chốt bằng !important để lần sau
   không rule nào của tôi vẽ đè lên được nữa.
   Nền trắng, chữ rgb(34,34,34): tương phản 15,91:1. */
body.home .h-sec2 .row-carousel .btn-ct .ol-btn,
body.home .h-sec2 .btn-ct .ol-btn {
  background-image: none !important;
  background-color: #fff !important;
  color: #222 !important;
  border-color: rgb(255, 147, 21) !important;
}

/* Nút hero: 1 nút chính chiếm cả hàng, 2 nút phụ chia đôi hàng dưới.
   Trước khi sửa: 3 nút rộng 257, 296 và 115px nằm lệch nhau.
   Bản trước của file này: 3 nút full width 363x50 xếp dọc, chiếm 200px và
   nhìn thô vì ba khối bằng nhau không cho biết nút nào là chính.
   Bây giờ: 52px cho nút chính, 46px cho hàng nút phụ, tổng khoảng 106px. */
body.home .h-buttons .col-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
body.home .h-buttons a.button:first-child {
  grid-column: 1 / -1;
  min-height: 52px !important;
  font-size: 16px !important;
}
body.home .h-buttons a.button:not(:first-child) {
  min-height: 46px !important;
  font-size: 13.5px !important;
  padding: 8px 10px !important;
}
body.home .h-buttons a.button,
body.home .h-sec2 a.button.grad-btn,
body.home .h-sec7 a.button,
body.home .h-sec8 a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 0 8px !important;
  padding: 10px 16px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/* --------------------------------------------------------------------------
   12. TRANG /contact-us/ TRÊN ĐIỆN THOẠI
   Đây là trang KHÁC trang chủ, nên dùng hook riêng `body.page-id-349`.
   WordPress gắn class đó vào body, class do CMS sinh chứ không phải UX Builder
   sinh lại mỗi lần tải, nên dùng được.

   Đo được ngày 07/09 trên khung 393 x 851:
     - Khối trái cao 503px: H1 62px, ảnh minh hoạ 242x242, khối số điện thoại
       và email 59px. Ảnh là phần to nhất và nó đẩy form xuống y=658.
     - 7 ô nhập, mỗi ô 303x52, chữ 14px. Dưới 16px thì iOS TỰ ZOOM khi bấm vào
       ô, zoom xong không tự trả lại, đó là lý do chính "form khó điền".
     - Vẫn còn ô `your-contact-person` với 10 mục là handle nội bộ:
       jocelyn, stephen, johnny... Khách không biết chọn ai.
     - 4 lớp nổi cùng lúc: popup, rail Receive Gift, cột icon liên hệ bên trái,
       chat Pancake. Ba cái đầu đè lên đúng vùng form.

   Không đổi thứ tự khối nào, không xoá ô nào khỏi DOM.
   -------------------------------------------------------------------------- */

/* 12a. Lớp nổi: từ 4 xuống 1, giữ chat Pancake. Mở khoá cuộn kèm theo. */
body.page-id-349 #gfCampaignPopup,
body.page-id-349 #gfCampaignPopup.is-open,
body.page-id-349 #gfGiftOpen,
body.page-id-349 #gfGiftModal,
body.page-id-349 .floating-contact {
  display: none !important;
}
body.page-id-349.gf-campaign-popup-open,
body.page-id-349.gf-gift-modal-open {
  overflow: visible !important;
  position: static !important;
  height: auto !important;
}

/* 12b. Ảnh minh hoạ: 60% xuống 40% chiều ngang, tức 242px xuống khoảng 160px.
   Thu chứ KHÔNG ẩn: đây là ảnh đang có trên trang. Giữ đúng tỷ lệ. */
body.page-id-349 .contact-sec .col.left .img {
  width: 48% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 12c. Cắt khoảng đệm chết của hai khối, để form lên cao hơn nữa */
body.page-id-349 .contact-sec .col.left > .col-inner {
  padding-top: 18px !important;
  padding-bottom: 14px !important;
}
body.page-id-349 .contact-sec .col.left {
  padding-bottom: 8px !important;
}
body.page-id-349 .contact-sec .col.right {
  padding-top: 0 !important;
}
body.page-id-349 .contact-sec .col.left h1 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

/* 12d. Ô nhập: 16px là ngưỡng iOS ngừng tự zoom. Đây là cái sửa "khó điền".
   Chỉ đổi cỡ chữ và chiều cao, không đổi số ô, không đổi thứ tự. */
body.page-id-349 .wpcf7-form input:not([type="submit"]),
body.page-id-349 .wpcf7-form select,
body.page-id-349 .wpcf7-form textarea {
  font-size: 16px !important;
  min-height: 48px !important;
  border-width: 1px !important;
  border-radius: 10px !important;
  background-color: #fff !important;
}
body.page-id-349 .wpcf7-form label,
body.page-id-349 .wpcf7-form .dc-field > p,
body.page-id-349 .wpcf7-form p > strong {
  font-size: 14px !important;
  margin-bottom: 4px !important;
}
body.page-id-349 .wpcf7-form .dc-field {
  margin-bottom: 10px !important;
}

/* 12e. Ô bắt khách tự chọn nhân viên sale: ẩn bằng CSS, KHÔNG xoá khỏi DOM,
   nên Contact Form 7 vẫn nhận đủ số trường như cũ, chỉ là luôn nhận giá trị
   rỗng, đúng bằng mặc định hôm nay. Giống cách đã làm ở trang chủ. */
body.page-id-349 .wpcf7-form select[name="your-contact-person"],
body.page-id-349 .wpcf7-form .wpcf7-form-control-wrap[data-name="your-contact-person"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.page-id-349 .wpcf7-form .dc-field:has(select[name="your-contact-person"]) {
  display: none !important;
}

/* Ô bẫy spam `_hs`: rule 12d cho mọi input một `min-height: 48px` nên ô này
   từ 34x2 thành 303x48. Nó nằm ở x = -9954 nên người không nhìn thấy, nhưng
   ẩn hẳn cho chắc, giống cách đã làm ở trang chủ. */
body.page-id-349 .wpcf7-form input[name="_hs"] {
  display: none !important;
}

/* 12f. Nút gửi: cho bằng chiều ngang với ô nhập, và ép opacity 1 vì animation
   của theme để lại opacity 0,766 làm nút nhìn nhạt. */
body.page-id-349 .wpcf7-form input[type="submit"] {
  display: block !important;
  width: 100% !important;
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* 12g. Tap target 44px cho link số điện thoại và email trong khối trái */
body.page-id-349 .contact-sec .col.left a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
}

/* --------------------------------------------------------------------------
   10. TAP TARGET: tối thiểu 44px
   Đo được 35 nút điều khiển nhỏ hơn 44px. Nhỏ nhất và quan trọng nhất là
   nút mở menu 24x49 và nút giỏ hàng 32x52.
   -------------------------------------------------------------------------- */
body.home .header-main .off-canvas-toggle,
body.home .header-main .header-cart-link,
body.home .header-main .is-small,
body.home .custom-lang-current,
body.home .custom-lang-list a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px !important;
  min-height: 44px !important;
}
body.home .h-sec2 a,
body.home .h-sec3 a,
body.home .h-sec4 a,
body.home .h-sec6 a,
body.home .h-sec7 a,
body.home .footer-wrapper a,
body.home .absolute-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Hai banner ngang trong khối sản phẩm là link bọc ảnh, ảnh chỉ cao 35px theo
   đúng tỷ lệ gốc của nó nên vùng bấm quá mỏng. Nới vùng bấm chứ không kéo ảnh. */
body.home #content .img a {
  display: block;
  min-height: 44px;
  padding: 5px 0;
}

/* Link nằm trong đoạn văn thì để nguyên, ép 44px sẽ vỡ dòng */
body.home p a,
body.home li a,
body.home .content-text a {
  min-height: 0;
  display: inline;
}

/* --------------------------------------------------------------------------
   11. BỎ HIỆU ỨNG DÍNH SAU KHI CHẠM
   Giữ nguyên chữ H1 và giữ nguyên hiệu ứng gõ chữ.
   -------------------------------------------------------------------------- */
body.home .btn-zoom:active,
body.home .btn-bg:active,
body.home .btn-ol:active { transform: none !important; }

}

@media (max-width: 549px) and (prefers-reduced-motion: reduce) {
  body.home .dc-typed-text,
  body.home .dc-cursor,
  body.home .btn-zoom,
  body.home .fade-btn {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 549px) {
  /* 13. hang chu thay cho dai khuyen mai 373x35 khong doc duoc.
     Chu lay tu alt cua chinh anh, link lay tu chinh trang. */
  body.home .gf-camp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 8px 15px; padding: 0 14px; min-height: 52px;
    border: 1px solid rgb(223, 230, 243); border-radius: 12px;
    background: rgb(240, 244, 252);
    font: 600 13.5px/1.35 Inter, sans-serif; color: rgb(17, 17, 17);
    text-transform: none; letter-spacing: 0; text-decoration: none;
  }
  body.home .gf-camp-row span { flex: 1 1 auto; }
  body.home .gf-camp-list { padding: 4px 0 2px; }
  body.home .gf-camp-slider-an { display: none !important; }
  body.home .gf-camp-row svg { flex: 0 0 auto; color: rgb(0, 38, 255); }
}