/* Giao dien 3 - CSS rieng cho menu mobile offcanvas (thay the mmenu.css,
   vi thu vien mmenu.js khong duoc cung cap kem file mau tinh
   giaodien2/public_html - xem ghi chu trong js/home.js). Markup/class
   #mmenu, li, a, img, span giu nguyen tu file mau, chi bo sung phan
   dinh vi + hieu ung truot cho hop le voi hanh vi cu (mo/dong tu canh
   trai, nut dong o dau danh sach).
   Lam dep lai toan bo (yeu cau 30/08/2026) - dong bo phong cach den-vang
   + the/pill bo tron da dung xuyen suot session nay (dropdown "Xem cac
   chi nhanh", khoi showroom o footer...): tieu de nen den/vien vang,
   moi muc la 1 "the" bo goc rieng biet co khoang cach thay vi danh sach
   dac gach ngang don dieu nhu truoc, icon dat trong khung tron, cap 2
   co cham tron danh dau truoc moi dong. */

#mmenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  max-width: 85vw;
  background: var(--aw-the);
  z-index: 1060;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

#mmenu.is-open {
  transform: translateX(0);
}

/* Thanh cuon danh sach menu mobile - yeu cau 30/08/2026: thanh cuon mac
   dinh cua trinh duyet (day, mau xam dam, bo goc vuong) nhin "tho", pha
   vo cam giac "sang trong, tinh te" cua toan bo menu (nen trang + the bo
   tron + mau den-vang). Doi sang thanh cuon MONG, bo tron, mau xam nhat
   trong suot khi khong hover - chi dam len ro hon luc ruoc chuot vao
   (:hover) de nguoi dung van nhan biet duoc co the cuon. scrollbar-width
   + scrollbar-color cho Firefox, cac rule ::-webkit-scrollbar* cho
   Chrome/Edge/Safari (webkit). */
#mmenu {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

#mmenu::-webkit-scrollbar {
  width: 5px;
}

#mmenu::-webkit-scrollbar-track {
  background: transparent;
}

#mmenu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.16);
  border-radius: 10px;
}

#mmenu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

/* Lop nen toi rieng (xem #gd3-mmenu-backdrop trong inc/header.php) - THAY
   THE cho ::before cu cua chinh #mmenu: ban truoc bi CAT MAT vi #mmenu co
   overflow-y:auto (de cuon danh sach dai), pseudo-element la "con" cua no
   nen khong bao gio ve duoc ra ngoai khung 300px, bam mo menu thi nen
   ngoai khong toi (loi 30/08/2026). La the <div> doc lap, khong nam trong
   #mmenu nen khong bi cat; phu KIN CA man hinh (inset:0, ke ca vung duoi
   panel trang 300px - panel tu ve de len tren, nguoi xem chi thay phan
   khong bi panel che bi toi, y het hieu ung cu). z-index 1059 (duoi
   #mmenu 1060 1 bac) de luon nam duoi panel nhung tren moi noi dung khac
   cua trang. pointer-events:none vi viec dong menu khi bam ra ngoai da co
   sap san tren document (xem js/home.js), khong can bat su kien rieng o
   day. */
#gd3-mmenu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1059;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

#gd3-mmenu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Yeu cau 30/08/2026: bo khoi tieu de nen den ".gd3-mmenu-head" (chu
   "DANH MUC" + icon) va nut dong tron "X" cu nam ben trong no
   (".gd3-mmenu-close") - da xoa het markup tuong ung trong inc/header.php.
   Thay bang nut "Dong Menu" rieng, dat BEN NGOAI khung panel (xem
   #gd3-mmenu-close-btn ngay ben duoi + ghi chu trong inc/header.php giai
   thich ly do phai tach rieng khoi #mmenu). */
#gd3-mmenu-close-btn {
  position: fixed;
  top: 14px;
  /* Bam SAT mep phai panel, KHONG duoc co khoang ho (yeu cau 30/08/2026 -
     ban dau co chu dinh chua 8px khoang cach, nhin nhu nut "troi lo lung"
     tach roi panel, bi phan hoi la xau). "min(300px, 85vw)" khop CHINH
     XAC be rong THUC TE cua #mmenu (width:300px; max-width:85vw) - vi tri
     nay la CO DINH, luon bang canh phai panel, khong con cong thuc clamp
     theo be rong man hinh nhu truoc (cach lam cu vo tinh keo nut LECH VAO
     TRONG panel tren man hinh ~375-390px, gay de len chu danh muc - sai
     huong khac). De tranh tran ra ngoai man hinh o cac man hinh rat hep,
     KHONG dich chuyen vi tri nay nua ma gioi han BE RONG cua chinh no
     (xem max-width ben duoi). Yeu cau 30/08/2026: rut gon chu con lai 1
     tu "Dong" (truoc la "Dong Menu" phai ngat dong) nen nut cang du
     khong gian, khong con sat nguong tran nhu truoc nua. */
  left: min(300px, 85vw);
  /* Luoi an toan cho man hinh cuc hep (hiem gap, vd duoi 360px): neu be
     rong con lai sau panel khong đủ cho nut, tu thu nho be rong nut lai
     (khong bao gio dich CHUYEN VI TRI, chi ep be rong) - "-2px" chua 1
     khoang tho tho o mep man hinh. */
  max-width: calc(100vw - min(300px, 85vw) - 2px);
  box-sizing: border-box;
  overflow: hidden;
  transform: translateX(10px);
  z-index: 1061;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px 8px 10px;
  background: var(--aw-chu);
  color: var(--aw-tren-chu);
  border: none;
  border-radius: 0 10px 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s, background-color 0.15s ease;
}

#gd3-mmenu-close-btn i {
  color: var(--aw-nhan);
  font-size: 13px;
  flex: 0 0 auto;
}

#gd3-mmenu-close-btn.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

#gd3-mmenu-close-btn:hover,
#gd3-mmenu-close-btn:active {
  background: var(--aw-chu);
}

/* O tim kiem danh muc (yeu cau 30/08/2026) - dat "sticky" o dinh #mmenu
   (khong phai "fixed" - "sticky" chi dinh trong pham vi vung cuon cua
   #mmenu, khong "troi" ra ngoai panel nhu #gd3-mmenu-close-btn) de van
   go tim duoc du dang cuon xuong giua danh sach dai. z-index cao hon noi
   dung danh sach ben duoi (mac dinh 0) de danh sach khong "de len" khi
   cuon toi. Nen trang + vien duoi mo giup tach biet ro voi danh sach ben
   duoi ma khong can mau den nhu tieu de cu da bo. */
.gd3-mmenu-search {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--aw-the);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* CHI nham icon kinh lup (con truc tiep cua .gd3-mmenu-search) - dung
   combinator ">" thay vi khoang trang (descendant) de KHONG vo tinh de
   luon len icon "x" cua nut xoa nam sau nay (.gd3-mmenu-search-clear i,
   nam sau trong .gd3-mmenu-search-input-wrap > button), 2 icon can mau
   sac/kich thuoc khac nhau ro ret (kinh lup = den, "x" xoa = xam nhat). */
.gd3-mmenu-search > i {
  flex: 0 0 auto;
  color: var(--aw-chu);
  font-size: 14px;
}

/* Boc rieng input + nut xoa (yeu cau 30/08/2026: "co ky tu thi co dau
   xuat hien o cuoi de xoa") - position:relative de nut "x" dat de len
   (position:absolute) dung mep phai BEN TRONG khung input, giong cac o
   tim kiem chuan (Google, thanh dia chi trinh duyet...). */
.gd3-mmenu-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.gd3-mmenu-search-input {
  width: 100%;
  /* padding-right chua san cho nut "x" (rong ~20px + khoang cach) de chu
     go vao khong bao gio bi nut xoa de len. */
  padding: 8px 30px 8px 14px;
  border: 1px solid var(--aw-ke-dam);
  border-radius: 999px;
  font-size: 13px;
  color: var(--aw-chu-2);
  background: var(--aw-nen-2);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gd3-mmenu-search-input:focus {
  border-color: var(--aw-nhan);
  background: var(--aw-the);
}

/* Nut xoa "x" - CHI hien khi o dang co noi dung (JS toggle class d-none
   trong js/home.js, xu ly su kien "input"). Dat giua theo chieu doc bang
   top:50%+translateY, khong phu thuoc chieu cao thuc te cua input (neu
   sau nay doi padding/font-size thi nut van tu can giua dung). */
.gd3-mmenu-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--aw-chu-phu);
  cursor: pointer;
  font-size: 15px;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.gd3-mmenu-search-clear:hover,
.gd3-mmenu-search-clear:focus-visible {
  color: var(--aw-tren-chu);
  background-color: rgba(0, 0, 0, 0.06);
}

/* Thong bao "khong tim thay" khi go tu khoa khong khop danh muc nao
   (xem xu ly loc trong js/home.js) - cung phong cach voi
   ".gd3-mega-search-empty" cua o tim nhanh dropdown mega tren desktop de
   dong bo trai nghiem tim kiem trong toan site. */
.gd3-mmenu-search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--aw-chu-phu);
  font-size: 13px;
}

#mmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mmenu > ul.gd3-mmenu-list {
  padding: 8px;
}

#mmenu > ul.gd3-mmenu-list > li {
  margin-bottom: 4px;
  border-radius: 10px;
  background-color: var(--aw-nen-2);
  overflow: hidden;
  transition: background-color 0.15s ease;
}

#mmenu > ul.gd3-mmenu-list > li:active,
#mmenu > ul.gd3-mmenu-list > li.gd3-mmenu-has-children.is-open {
  background-color: var(--aw-nhan-nhat);
}

#mmenu > ul.gd3-mmenu-list > li > a,
#mmenu > ul.gd3-mmenu-list > li > span {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  color: var(--aw-chu-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

#mmenu li img {
  width: 20px;
  padding-right: 10px;
}

/* Yeu cau 30/08/2026: icon danh muc cha dang nen trang + icon xanh
   (var(--aw-nhan)) - khong khop mau chu dao den-vang cua toan bo website (da
   dung xuyen suot: nut tim kiem, chip "Xem cac chi nhanh", cham danh dau
   muc con...). Doi sang nen den + icon vang (var(--aw-nhan)) - trung KHOP voi
   mau da dung san cho trang thai "active" ben duoi (i.gd3-menu-active,
   i.gd3-menu-parent-active), nen 2 rule do gio thanh THUA (khong doi mau
   gi them luc active nua) nhung van giu lai khong xoa, phong truong hop
   sau nay muon phan biet lai trang thai active/thuong. */
#mmenu li i.gd3-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin-right: 10px;
  padding-right: 0;
  font-size: 13px;
  text-align: center;
  color: var(--aw-nhan-sang);
  background-color: var(--aw-chu);
  border-radius: 50%;
}

/* Yeu cau 30/08/2026: danh sach muc con truoc day chi la nen trang tron,
   khong co gi phan tach tung dong -> nhin nhu "1 khoi chu" lien tiep, mat
   ca cam giac phan cap voi muc cha (nen ngay ben tren dang vang kem
   var(--aw-nhan-nhat) luc mo, roi doi dot ngot sang trang tinh - vong lap mau gay
   "cang" mat). Doi nen sang xam rat nhat (var(--aw-nen), gan nhu trang nhung
   du de tao cam giac "khay thut vao" so voi the trang cua muc cha) +
   them vien mo tren (inset shadow) de bao hieu day la vung noi dung phu,
   khong con canh sac net dot ngot giua 2 mau. */
#mmenu ul ul {
  background: var(--aw-nen);
  padding: 4px 0 6px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Duong ke mo giua tung muc con - truoc day khong co gi tach bach danh
   sach dai (co the vai chuc dong) thanh tung dong rieng, nhin roi mat/
   "xau" nhu 1 bang chu dac. Vien duoi rat nhat (4% den), bo o dong cuoi
   cung de khong bi thua 1 duong ngay truoc mep duoi khoi. */
#mmenu ul ul li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#mmenu ul ul li:last-child {
  border-bottom: none;
}

/* Yeu cau 30/08/2026: muc con (cap 2) qua dai truoc day tu xuong dong
   thanh 2 dong (display:flex mac dinh van cho phep text wrap binh
   thuong), nhin lom nhom, khong dong bo chieu cao voi cac muc con khac.
   Doi tu "display:flex" (chi de can giua theo chieu doc 1 dong text,
   khong thuc su can flex vi khong co phan tu con nao khac) sang
   "display:block" + white-space:nowrap + text-overflow:ellipsis de LUON
   gom vao dung 1 dong, dai qua thi cat bot va them "..." o cuoi thay vi
   troi xuong dong 2. */
#mmenu ul ul li a {
  display: block;
  position: relative;
  padding: 8px 15px 8px 54px;
  font-size: 13px;
  color: var(--aw-chu);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Cham tron danh dau dau dong - them "quang sang" mo (box-shadow lan
   rong mau vang nhat) quanh cham thay vi 1 cham dac tron tro trui, dong
   bo voi phong cach "vien vang mo" da dung o nhieu noi khac trong theme
   (yeu cau 30/08/2026 - lam sang trong/tinh te hon). Can giua theo
   chieu doc bang top:50%+translateY thay vi de trinh duyet tu dat vi
   tri (truoc day khong khai bao top, phu thuoc vao dong chay mac dinh -
   de bi lech khi doi padding dong). */
#mmenu ul ul li a::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--aw-nhan);
  box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.16);
  transform: translateY(-50%);
}

/* Trang thai "dang o day" (active) - class gd3-menu-active/gd3-menu-parent-active
   duoc JS (js/home.js: gd3MarkActiveMenu) tu dong gan vao dung <a> dang
   khop voi URL trang hien tai, SO SANH VOI menu ngang desktop truoc, roi
   gd3BuildMobileMenu() clone lai chinh cac <a> do sang menu mobile nen
   class active "di theo" tu nhien, khong can code rieng cho ban mobile
   (yeu cau 30/08/2026). Muc cap 1 (danh muc goc, co the la chinh trang
   dang xem HOAC la cha cua danh muc con dang xem) - to nen vang toan
   hang + doi icon tron sang nen den/chu vang, dong bo phong cach voi
   khoi "Dia chi cac showroom". */
#mmenu > ul.gd3-mmenu-list > li > a.gd3-menu-active,
#mmenu > ul.gd3-mmenu-list > li > a.gd3-menu-parent-active {
  background-color: var(--aw-nhan-nhat);
  color: var(--aw-chu);
}

#mmenu > ul.gd3-mmenu-list > li > a.gd3-menu-active i.gd3-menu-icon,
#mmenu > ul.gd3-mmenu-list > li > a.gd3-menu-parent-active i.gd3-menu-icon {
  background-color: var(--aw-chu);
  color: var(--aw-nhan-sang);
}

/* Muc cap 2 (danh muc con) dang chinh xac la trang dang xem - dam hon
   trang thai :active binh thuong (bam giu) ben duoi vi day la trang thai
   THUONG TRUC chu khong phai luc cham. */
#mmenu ul ul li a.gd3-menu-active {
  color: var(--aw-chu);
  font-weight: 700;
  background-color: var(--aw-nhan-nhat);
}

#mmenu ul ul li a.gd3-menu-active::before {
  background-color: var(--aw-chu);
}

#mmenu ul ul li a:active {
  color: var(--aw-chu);
  background-color: var(--aw-nhan-nhat);
}

/* Muc menu mobile 2 cap (co danh sach con) - dau "+" o cuoi de bam
   xo/thu gon (xem gd3BuildMobileMenu() trong js/home.js). Chua danh
   muc con: .gd3-mmenu-has-children > a can them padding-right de chu
   khong de len nut "+" dat tuyet doi ben tren no. */
.gd3-mmenu-has-children {
  position: relative;
}

/* Sua loi 30/08/2026: selector chi co 1 class (".gd3-mmenu-has-children >
   a") co do uu tien (specificity) THAP HON rule chung phia tren
   ("#mmenu > ul.gd3-mmenu-list > li > a, li > span" - co ID #mmenu) nen
   "padding-right: 46px" o day TUNG KHONG BAO GIO duoc ap dung (bi
   "padding: 11px 12px" cua rule co ID de padding-right ve lai 12px),
   khien vung danh cho dau "+" khong duoc chua thuc su - danh muc cha dai
   van co the de chu tran vao duoi dau "+". Viet lai selector day du voi
   #mmenu + ul.gd3-mmenu-list (giong cach cac rule khac trong file nay da
   lam voi .gd3-mmenu-toggle) de chac chan thang duoc rule chung ben tren. */
#mmenu > ul.gd3-mmenu-list > li.gd3-mmenu-has-children > a {
  padding-right: 46px;
}

/* Yeu cau 30/08/2026: ten danh muc cha qua dai (danh muc khong co con
   cung ap dung luon cho dong bo) truoc day tu xuong dong 2, dong 2 co
   the lan sat/cham vao dau "+" dat tuyet doi o goc phai (nhin xau, mat
   khoang cach thoang can co). <span> boc ten danh muc (xem inc/header.php)
   duoc ep co dinh 1 dong, dai qua thi cat bot + "..." - flex:1 min-width:0
   de no CHIU NHUONG cho <i> icon 30px ben trai thay vi day icon lech
   (min-width:0 la bat buoc, khong co no flex item se khong chiu co lai
   duoi kich thuoc noi dung, ellipsis se khong bao gio kich hoat). */
#mmenu > ul.gd3-mmenu-list > li > a > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Ghi de rule chung "#mmenu > ul.gd3-mmenu-list > li > span" (dang ap
   dung flex + padding toan hang cho moi <span> con truc tiep cua <li>) -
   dau "+" chi la 1 nut tron nho, dat goc phai, khong chiem ca hang nhu
   <span> ten danh muc o cac muc khac. Selector o day co them class
   ".gd3-mmenu-list" de do specificity CAO HON rule chung ben tren (2
   class so voi 1 class), dam bao luon thang du element-count co it hon. */
#mmenu ul.gd3-mmenu-list li > span.gd3-mmenu-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--aw-chu-phu);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

#mmenu ul.gd3-mmenu-list li > span.gd3-mmenu-toggle:hover,
#mmenu ul.gd3-mmenu-list li > span.gd3-mmenu-toggle:focus-visible {
  background-color: var(--aw-nen-2);
  color: var(--aw-chu);
}

#mmenu ul.gd3-mmenu-list li > span.gd3-mmenu-toggle:focus-visible {
  outline: 2px solid var(--aw-nhan);
  outline-offset: -2px;
}

#mmenu ul.gd3-mmenu-list li > span.gd3-mmenu-toggle.is-open {
  transform: rotate(45deg);
  color: var(--aw-chu);
}

body.gd3-mmenu-locked {
  overflow: hidden;
}

.logo-head-text {
  font-weight: 800;
  font-size: 18px;
  color: var(--aw-tren-chu);
  white-space: nowrap;
}

/* Khoi "DANH MUC SAN PHAM" - thay anh danh muc (thuong thieu/dung chung 1
   anh mac dinh, nhin "xau") bang icon Font Awesome trong 1 o vuong nen
   den + icon vang (gd3_category_icon_fa(), dung chung voi mmenu/main
   menu) thay vi hinh, dong bo mau thuong hieu den-vang cua site. */
.gd3-category-icon-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--aw-chu);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.gd3-category-icon-box i {
  font-size: 40px;
  color: var(--aw-nhan);
  transition: transform 0.3s ease, color 0.3s ease;
}

.category-products-item:hover .gd3-category-icon-box {
  background: var(--aw-nhan);
}

.category-products-item:hover .gd3-category-icon-box i {
  color: var(--aw-chu);
  transform: scale(1.12);
}

@media (max-width: 767.98px) {
  .gd3-category-icon-box i {
    font-size: 28px;
  }
}

/* THANH SO SANH (.gd3-ssbar, 10/09/2026): khi thanh hien, js/so-sanh.js dat
   bien --gd3-ssbar-lech tren <html> = chieu cao that cua thanh (0px khi an /
   khong co thanh). MOI nut noi goc phai (len dau trang, Zalo, Messenger,
   Chat AI) cong them bien nay vao bottom de khong bi thanh so sanh de len -
   loi chu web bao tren mobile o trang chi tiet khi bam "so sanh". Tren
   mobile cong dong thoi voi khoang nhuong thanh cong cu day (gd3-cuon-xuong)
   vi thanh so sanh cung nam tren thanh do. */
/* Nut "Back to top" - icon Font Awesome, mac dinh an, JS them class
   .is-visible khi cuon qua 1 nguong. Chuyen sang requestAnimationFrame +
   window.scrollTo smooth native (xem js/home.js) vi $.animate({scrollTop})
   cua jQuery hay bi giat/tre tren trang chu nhieu san pham - rut ngan
   transition xuong 0.15s de nut hien/an tuc thi hon, khong con cam giac
   delay. */
.gd3-back-to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--gd3-ssbar-lech, 0px));
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--aw-chu);
  color: var(--aw-nhan-sang);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s, bottom 0.22s ease;
  z-index: 1050;
}

.gd3-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Re chuot vao: dao mau - nen vang chu den (thay vi giu nguyen nen den
   chu vang mac dinh) - yeu cau 29/08/2026. */
.gd3-back-to-top:hover {
  background: var(--aw-nhan);
  color: var(--aw-chu);
}

@media (max-width: 767.98px) {
  .gd3-back-to-top {
    right: 12px;
    /* bottom: xem khoi "An/hien theo chieu cuon" ben duoi (20px khi thanh
       day an, 76px khi thanh day hien). */
  }
}

/* ==========================================================================
   THANH CONG CU DINH DAY MAN HINH - CHI MOBILE (< 768px)       04/09/2026
   ==========================================================================
   Markup: nav.gd3-tbd trong inc/footer.php (Danh muc / Zalo / Messenger /
   Goi / Hoi dap) - cung y tuong nav.tbd cua giao dien 1
   (library/shopcart.php) nhung tong DEN - VANG: nen var(--aw-chu), vien tren vang,
   icon + chu vang (da thu ban nen trang icon den, chu web chon quay lai
   den-vang); o dang bam / o trang dang xem (.is-active) dao mau nen vang
   chu den. body chua 62px duoi de dong cuoi trang khong bi che;
   env(safe-area-inset-bottom) cho iPhone co thanh vuot. z-index 1040 thap
   hon menu truot (#mmenu 1060, backdrop 1059) de mo menu thi thanh nam
   duoi lop nen toi. */
.gd3-tbd {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--aw-chu);
  border-top: 2px solid var(--aw-nhan);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}
.gd3-tbd-muc {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  color: var(--aw-nhan);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.gd3-tbd-muc i { font-size: 21px; line-height: 1; }
.gd3-tbd-anh { width: 24px; height: 24px; display: block; object-fit: contain; }
.gd3-tbd-muc span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd3-tbd-muc:hover, .gd3-tbd-muc:focus { color: var(--aw-nhan); text-decoration: none; }
.gd3-tbd-muc:active, .gd3-tbd-muc.is-active { background: var(--aw-nhan); color: var(--aw-chu); }
/* Icon Zalo la anh vang -> dao thanh den khi o dao mau. */
.gd3-tbd-muc:active .gd3-tbd-anh, .gd3-tbd-muc.is-active .gd3-tbd-anh { filter: brightness(0); }
/* Nut goi: hanh dong quan trong nhat tren dien thoai - to hon mot chut. */
.gd3-tbd-goi i { font-size: 23px; }
@media (max-width: 767.98px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* An/hien theo chieu cuon (05/09/2026, xem js/home.js): mac dinh va khi
     cuon LEN -> header hien, thanh day truot xuong an; body.gd3-cuon-xuong
     (dang cuon XUONG) -> header truot len an, thanh day hien. Dung
     transform de header van giu position:sticky + cho chua cua no, khong
     lam noi dung nhay. */
  .header-fixed-top {
    transition: transform 0.25s ease, box-shadow 0.2s ease;
    will-change: transform;
  }
  body.gd3-cuon-xuong .header-fixed-top { transform: translateY(-100%); }
  .gd3-tbd {
    transform: translateY(110%);
    transition: transform 0.25s ease;
    will-change: transform;
  }
  body.gd3-cuon-xuong .gd3-tbd { transform: translateY(0); }
  /* Nut "len dau trang": thanh day an thi nut ve sat mep duoi. */
  .gd3-back-to-top { bottom: calc(20px + var(--gd3-ssbar-lech, 0px)); transition: bottom 0.25s ease, opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; }
  body.gd3-cuon-xuong .gd3-back-to-top { bottom: calc(76px + var(--gd3-ssbar-lech, 0px)); }

  /* ---- Bang 4 so cua nut "Goi ngay" (07/09/2026) ----
     Dinh ngay TREN thanh cong cu day (thanh cao 62px) chu khong ra giua man
     hinh: ngon tay dang o day man hinh, danh sach hien ngay tren dau ngon
     tay la voi toi duoc luon - hop thoai giua man hinh bat khach voi len.
     z-index 1002 de nam tren ca thanh cong cu (1001) lan lop nen (1000). */
  .gd3-tbd-goinen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
  }

  .gd3-tbd-goids {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 1002;
    padding: 6px;
    border-radius: 14px;
    background: var(--aw-chu);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
  }

  /* Hang tieu de: chu ben trai, nut tat ben phai (yeu cau 07/09/2026). */
  .gd3-tbd-goids-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 6px 10px;
    color: var(--aw-nhan);
    font-size: 12.5px;
    font-weight: 700;
  }

  .gd3-tbd-goids-tat {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--aw-nhan);
    color: var(--aw-chu);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .gd3-tbd-goids-tat:active { background: var(--aw-the); }

  .gd3-tbd-goids-o {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 10px;
    color: var(--aw-tren-chu);
    text-decoration: none;
  }

  .gd3-tbd-goids-o + .gd3-tbd-goids-o { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .gd3-tbd-goids-o:active { background: var(--aw-nhan); color: var(--aw-chu); text-decoration: none; }
  .gd3-tbd-goids-o i { flex: 0 0 auto; color: var(--aw-nhan); font-size: 15px; }
  .gd3-tbd-goids-o:active i { color: var(--aw-chu); }

  /* Ten bo phan an het cho trong, so day sang phai - mat quet mot duong
     doc theo cot so ben phai la thay ngay so nao la so nao. */
  .gd3-tbd-goids-ten { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
  .gd3-tbd-goids-so { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--aw-nhan); white-space: nowrap; }
  .gd3-tbd-goids-o:active .gd3-tbd-goids-so { color: var(--aw-chu); }

  /* Dang mo bang thi nut "Goi ngay" sang len cho khach biet cai bang do tu
     dau ra. */
  body.gd3-tbd-goi-mo .gd3-tbd-goi { background: var(--aw-nhan); color: var(--aw-chu); }

  /* An nut "len dau trang" trong luc bang dang mo (yeu cau 07/09/2026):
     no dung ngay canh goc phai duoi cua bang, tren nen mo, trong nhu mot
     cai cham den thua. Bang chi cao ~220px va co ba duong dong (nen mo /
     Esc / cuon) nen an di trong choc lat khong lam kho ai.

     Phai them .is-visible de thang duoc quy tac hien nut (cung 0,1,0 nhung
     dung sau trong tep - viet du hai lop cho chac, khong phai dem thu tu). */
  body.gd3-tbd-goi-mo .gd3-back-to-top,
  body.gd3-tbd-goi-mo .gd3-back-to-top.is-visible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-width: 360px) {
  .gd3-tbd-muc { font-size: 10px; }
}

/* Nut Zalo + Messenger noi - xem markup + ghi chu day du trong
   inc/footer.php. Xep chong len tren .gd3-back-to-top (bottom:20px, cao
   44px): moi nut cach nhau 56px (44px than nut + 12px khoang trong) de
   deu nhip voi nhau - Zalo ngay tren back-to-top (bottom:76px), Messenger
   tren cung (bottom:132px). An/hien qua Bootstrap d-none/d-md-flex (dat
   thang tren the <a>, xem inc/footer.php) nen o day KHONG dat display -
   de utility Bootstrap toan quyen quyet dinh, chi lo mau sac/vi tri/hover. */
.gd3-fab {
  position: fixed;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 1050;
  transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.22s ease;
}

.gd3-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* 04/09/2026: doi tu mau hang (Zalo xanh #0068ff, Messenger xanh #0084ff)
   sang NEN DEN - ICON VANG cho dong bo voi nut "len dau trang" va tong
   vang-den cua giao dien (yeu cau chu web): cung nen var(--aw-chu) / icon var(--aw-nhan)
   nhu .gd3-back-to-top. Re chuot: dao mau (nen vang, icon den)
   giong .gd3-back-to-top:hover. Icon Zalo la anh PNG trang tren nen trong
   (icon-zalo.png) -> dung ban to vang icon-zalo-vang.png (cung alpha, chi
   doi mau) thay vi loc CSS. */
.gd3-fab {
  background-color: var(--aw-chu);
  /* The <a>: Bootstrap dat a { text-decoration: underline; color: #0d6efd }
     - gach chan xanh ke thua xuong glyph Messenger (icon la CHU trong font
     FA) nen duoi icon lo mot vach xanh mong (phat hien 04/09/2026). Zalo
     la <img> nen khong bi. Bo han gach chan + ep mau vang o day. */
  color: var(--aw-nhan);
  text-decoration: none;
}
.gd3-fab:hover, .gd3-fab:focus {
  color: var(--aw-chu);
  text-decoration: none;
}
.gd3-fab:hover {
  background-color: var(--aw-nhan);
}

.gd3-fab-zalo {
  bottom: calc(76px + var(--gd3-ssbar-lech, 0px));
}

.gd3-fab-zalo img {
  width: 24px;
  height: 24px;
  transition: filter 0.15s ease;
}
/* Re chuot: nen vang thi icon phai thanh den - anh vang -> den bang brightness(0). */
.gd3-fab-zalo:hover img {
  filter: brightness(0);
}

.gd3-fab-messenger {
  bottom: calc(132px + var(--gd3-ssbar-lech, 0px));
}

.gd3-fab-messenger i {
  color: var(--aw-nhan);
  font-size: 21px;
  transition: color 0.15s ease;
}
.gd3-fab-messenger:hover i {
  color: var(--aw-chu);
}

/* Nut Chat AI (10/09/2026): nut tron thu 4, tren Messenger (188px = 132 + 56).
   Mobile (< 768px): Messenger/Zalo an (d-md-flex) nen nut chat la nut tron
   DUY NHAT ngoai "len dau trang" -> dat NGAY TREN nut do (cung cot right
   12px, cach 56px nhu nhip desktop): bottom 76px, va 132px khi thanh cong cu
   day dang hien (body.gd3-cuon-xuong day nut len dau len 76px). Nhan "Chat
   AI" ben trai AN HAN tren mobile (chu web khong muon chu canh nut). */
.gd3-fab-chat {
  bottom: calc(188px + var(--gd3-ssbar-lech, 0px));
}
@media (max-width: 767.98px) {
  .gd3-fab-chat {
    right: 12px;
    bottom: calc(76px + var(--gd3-ssbar-lech, 0px));
    transition: bottom 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, visibility 0.15s ease;
  }
  body.gd3-cuon-xuong .gd3-fab-chat { bottom: calc(132px + var(--gd3-ssbar-lech, 0px)); }
  /* Mobile KHONG hien nhan "Chat AI" (yeu cau 10/09 lan 2) - chi con nut tron. */
  .gd3-fab-chat .gd3-fab-chat-nhan { display: none; }
}

/* Khung chat tren mobile: toan man hinh (vi tri desktop o css/main.css),
   de len ca thanh cong cu day (.gd3-tbd z 1040) va nut len dau. */
@media (max-width: 767.98px) {
  .gd3-chat {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0;
    z-index: 1100;
  }
  .gd3-chat-nhap { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  body.gd3-chat-mo { overflow: hidden; }
}

/* ==========================================================================
   KHOI SO DIEN THOAI NOI - GOC TRAI DUOI, CHI PC          (07/09/2026)
   ==========================================================================
   Doi xung voi 3 nut tron o goc phai (Messenger / Zalo / len dau trang):
   cung `bottom: 20px`, cung nen den - icon vang, cung z-index 1050.
   Markup o inc/footer.php, chi in tu 992px tro len (d-none d-lg-flex).

   Co tinh lam NHO: mot the ~200px, moi so mot dong, chu so 15px. Day la
   khoi NOI DE LEN noi dung (giong 3 nut tron ben phai) - khong co be ngang
   man hinh nao du rong de no nam ngoai le trang: o 1200px thi Bootstrap
   container da rong 1140px, le chi con 30px moi ben. Vi vay phai giu that
   gon va dinh SAT DAY, cho no chi che mot goc nho. */
.gd3-goi {
  position: fixed;
  left: 0;              /* 07/09 lan 2: dinh SAT mep trai (yeu cau khach) */
  bottom: 20px;
  z-index: 1050;
  flex-direction: row;  /* [danh sach so] + [dai nut thu gon] */
  align-items: stretch;
  border-radius: 0 12px 12px 0;   /* chi bo goc phia TRONG man hinh */
  background: var(--aw-chu);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
/* Thanh so sanh noi (.gd3-ssbar) bam day man hinh va rong het be ngang -
   khi no hien (lop .gd3-ss-dang tren <html>, do js/so-sanh.js dat) thi day
   khoi nay len tren cho khoi bi che.
   Dung `~` (anh em phia sau): the .gd3-goi duoc dat NGAY SAU khoi .gd3-ssbar
   trong inc/footer.php co chu dich, de luat nay chi an KHI THANH DO CO MAT.
   Chinh trang /so-sanh-...html KHONG in thanh do ra (xem inc/footer.php),
   ma lop .gd3-ss-dang thi van co - neu chi viet `.gd3-ss-dang .gd3-goi` thi
   o trang do khoi so dien thoai bi day len 96px trong khi ben duoi khong co
   gi, nhin nhu bi treo lo lung. */
.gd3-ss-dang .gd3-ssbar ~ .gd3-goi {
  bottom: calc(20px + var(--gd3-ssbar-lech, 0px));   /* 10/09: theo chieu cao that cua thanh thay vi 96px cung */
}
.gd3-goi-ds {
  display: flex;
  flex-direction: column;
  padding: 4px 2px 4px 4px;
  min-width: 190px;
}
/* Thu gon: giau han danh sach so, chi con dai nut. Dung display chu KHONG
   dung transition/max-width - xem ly do o doan <script> trong inc/footer.php. */
.gd3-goi.is-gap .gd3-goi-ds {
  display: none;
}
.gd3-goi-dong {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--aw-nhan);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gd3-goi-dong + .gd3-goi-dong {
  /* Vach ngan mo giua hai dong - dung border tren the sau de khong tao vach
     thua khi chi co MOT so (hotline trung tong dai / thieu cot). */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 8px 8px;
}
.gd3-goi-dong:hover, .gd3-goi-dong:focus {
  background: var(--aw-nhan);
  color: var(--aw-chu);
  text-decoration: none;
}
.gd3-goi-dong i {
  width: 18px;
  font-size: 15px;
  text-align: center;
  color: inherit;
}
.gd3-goi-dong span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gd3-goi-dong small {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: color 0.15s ease;
}
.gd3-goi-dong:hover small, .gd3-goi-dong:focus small {
  color: rgba(17, 17, 17, 0.7);
}
.gd3-goi-dong b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  color: inherit;
}

/* --- Dai nut thu gon --- */
.gd3-goi-gap {
  flex: none;
  width: 24px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--aw-nhan);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gd3-goi-gap:hover, .gd3-goi-gap:focus {
  background: var(--aw-nhan);
  color: var(--aw-chu);
}
.gd3-goi-gap i {
  font-size: 13px;
  color: inherit;
}
/* Bieu tuong dien thoai CHI hien khi da thu gon - luc do dai nut la thu duy
   nhat con lai, phai tu noi duoc no la cho goi dien. */
.gd3-goi-ic {
  display: none;
}
.gd3-goi.is-gap .gd3-goi-ic {
  display: block;
  font-size: 15px;
}
.gd3-goi.is-gap .gd3-goi-gap {
  width: 34px;
  padding: 11px 0;
  border-left: 0;
  background: transparent;
}
/* ===== LOI DA VAP 07/09/2026 - DUNG XOA LUAT NAY =====
   Luat `.gd3-goi.is-gap .gd3-goi-gap` ngay tren (3 lop) dat
   `background: transparent`, DE BET luat `.gd3-goi-gap:hover` (2 lop) o
   phan NEN - nhung `:hover` van thang o phan MAU CHU vi luat tren khong
   dat `color`. Ket qua khi re chuot vao dai da thu gon:
       nen  -> trong suot (lo nen den cua the .gd3-goi)
       icon -> var(--aw-chu) (den)
   => DEN TREN DEN, bieu tuong bien mat, khach chi thay "mot cuc den thui".
   Va vi nut giu `:focus` sau khi bam chuot nen no ket o trang thai do ngay
   ca khi da roi chuot di.
   Phai co luat hover/focus RIENG cho trang thai thu gon, du lop de thang. */
.gd3-goi.is-gap .gd3-goi-gap:hover,
.gd3-goi.is-gap .gd3-goi-gap:focus {
  background: var(--aw-nhan);
  color: var(--aw-chu);
}
/* Mui ten quay nguoc: dang mo thi "<" (bam de dong), dang dong thi ">". */
.gd3-goi.is-gap .gd3-goi-mui {
  transform: rotate(180deg);
}

/* Khoi "thoi gian xu ly trang" - CHI hien khi co cookie tgx_admin_hint
   (dang co admin /1102 dang nhap con hieu luc - xem inc/footer.php).

   04/09/2026: chuyen tu goc trai DUOI len GIUA-TRAI man hinh, lep sat mep
   trai thanh mot "tab" doc, y het #tgx-perf-breakdown cua giao dien 1
   (library/thanh-do-admin.php):
     - DONG: chi <summary> - dai doc hep, chu xoay 90d nguoc kim (doc tu
       duoi len), gom tong ms (mau theo nguong xanh/cam/do) + nhan.
     - MO: details thanh flex hang ngang, dai doc giu ben trai, than
       (kich thuoc khung nhin + nut Copy + bang tung khoi) bung ra ben phai.
   Tong den + vien vang, bo goc chi phia trong (phai). */
.gd3-admin-elapsed {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1055;
  background: #0a0a0a;
  color: #3ddc84;
  font: 12px/1.4 Arial, sans-serif;
  border: 1px solid var(--aw-nhan);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  max-width: min(420px, 92vw);
  overflow: auto;
}
.gd3-admin-elapsed[open] {
  display: flex;
  align-items: flex-start;
}
.gd3-admin-elapsed > summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: stretch;
  padding: 10px 5px;
  white-space: nowrap;
  font-weight: 700;
  /* vertical-rl xoay chu 90d thuan kim; rotate(180) thanh 90d nguoc kim ->
     doc tu DUOI LEN, nga dau sang trai. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.gd3-admin-elapsed > summary::-webkit-details-marker { display: none; }
.gd3-admin-elapsed > summary::marker { content: ""; }
.gd3-admin-elapsed-nhan { color: var(--aw-nhan); font-weight: 700; font-size: 11px; }
.gd3-admin-elapsed-than { padding: 8px 12px 8px 8px; }
.gd3-admin-elapsed-congcu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.gd3-admin-elapsed-congcu i { color: var(--aw-nhan); font-size: 13px; }

/* Kich thuoc khung nhin (window.innerWidth x innerHeight) - mau xanh
   duong nhat, khac voi xanh la/cam/do cua so ms de khong bi hieu nham la
   chi so "tot/xau" - day chi la thong tin tham khao. */
.gd3-admin-viewport-size { color: #7ec8ff; }

/* Nut "Copy" - xem gd3CopyPerfReport() trong js/home.js. */
.gd3-perf-copy-btn {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--aw-nhan);
  border-radius: 4px;
  background: #1c1c1c;
  color: var(--aw-nhan);
  font: 10px/1.6 Arial, sans-serif;
  cursor: pointer;
}
.gd3-perf-copy-btn:hover { background: var(--aw-chu-2); }
.gd3-perf-copy-btn.is-copied {
  color: #3ddc84;
  background: rgba(61, 220, 132, 0.16);
  border-color: #3ddc84;
}

.gd3-admin-elapsed-detail table {
  border-collapse: collapse;
  font: 10px/1.5 monospace;
  white-space: nowrap;
  max-height: 60vh;
  display: block;
  overflow-y: auto;
}
.gd3-perf-label { padding-right: 10px; color: var(--aw-ke-dam); }
.gd3-perf-delta { text-align: right; }
.gd3-perf-total { text-align: right; color: #777; padding-left: 8px; }
/* 09/09/2026: bang SQL cham nhat (inc/footer.php) */
.gd3-perf-sql-dau { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--aw-chu-2); font-size: 10px; color: var(--aw-ke-dam); }
.gd3-perf-sql-dau b { color: #fff; }
.gd3-admin-elapsed-detail table.gd3-perf-sql { max-height: 40vh; }
.gd3-perf-sql-cau { color: #aaa; padding-left: 8px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767.98px) {
  .gd3-admin-elapsed { font-size: 11px; max-width: 92vw; }
  .gd3-admin-elapsed > summary { padding: 8px 4px; }
  .gd3-admin-elapsed-than { padding: 6px 10px 6px 6px; }
}

/* Menu chinh (desktop) bi tran khi nhieu danh muc - khung cuon ngang +
   2 nut prev/next dung canh nhau, gom ve phia phai (khong tach 2 dau nhu
   ban dau), chi hien khi menu thuc su tran (JS them class .is-overflowing
   tren .gd3-main-menu-wrap - xem js/home.js). Thanh cuon an scrollbar cho
   gon. */
.gd3-main-menu-wrap {
  display: flex;
  align-items: stretch;
}

.gd3-main-menu-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.gd3-main-menu-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
}

.gd3-main-menu-scroll .ul-main-menu {
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  width: max-content;
}

/* Gian khoang cach giua cac muc menu cho de nhin (truoc day chi dua vao
   padding cua the <li>, nhin bi dinh lien do khong con justify-content:
   space-between keo gian deu nhu ban goc). */
.gd3-main-menu-scroll .ul-main-menu > li {
  flex-shrink: 0;
  margin-right: 14px;
}

.gd3-main-menu-scroll .ul-main-menu > li:last-child {
  margin-right: 0;
}

/* Vi vung cuon ngang buoc trinh duyet clip luon chieu doc, mui ten tam
   giac nho duoi muc hover se bi cat xau - an di, submenu mega van hien
   day du vi JS chuyen no sang position:fixed (xem js/home.js). */
.gd3-main-menu-scroll .menu-item-dropdown > a::after,
.gd3-main-menu-scroll .menu-item-dropdown > a::before {
  display: none !important;
}

.gd3-main-menu-scroll .menu-item-dropdown .list-dropdown {
  position: fixed;
}

/* 2 kieu xo dropdown khac nhau tuy so danh muc con (xem inc/header.php:
   nguong <=10 con = compact, con lai = mega). Truoc day CHI 1 kieu duy
   nhat (luon 2 cot, keo dai het thanh menu) nen danh muc it con thi
   trong rong xau, danh muc nhieu con (co the 20-30+ dong) thi dropdown
   cao qua man hinh, nhin rat xau - gio tach lam 2. */

/* Compact (<=10 con): khung hep, chi rong theo noi dung, neo sat vao
   dung vi tri <li> cua no (JS tinh rieng - xem js/home.js), 1 cot danh
   sach gon nhu dropdown thong thuong. */
.list-dropdown.list-dropdown-compact {
  width: max-content;
  min-width: 220px;
  max-width: 300px;
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  background-image: none;
  background-color: var(--aw-the);
  box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
  /* Chi bo tron 2 goc duoi - 2 goc tren de vuong vi hop nam sat ngay
     duoi thanh menu (bo tron 2 goc tren nhin nhu bi ho/lech, xau). */
  border-radius: 0 0 8px 8px;
}

.list-dropdown-compact ul li a {
  padding: 4px 6px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.list-dropdown-compact ul li a:hover {
  background-color: var(--aw-nen-2);
  color: var(--aw-chu);
}

/* Mega (nhieu con): van keo dai het chieu rong thanh menu cuon nhu cu,
   nhung gioi han chieu cao + cho cuon doc rieng ben trong (khong con
   trang lan qua man hinh nhu truoc), so cot da lay tu PHP (col-3/col-4
   theo inc/header.php: >20 con = 4 cot, con lai = 3 cot). */
.list-dropdown.list-dropdown-mega {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Muc "Tin tuc" tach rieng khoi vung cuon (#gd3-main-menu-scroll) - luon
   dung yen mot cho, giua vung cuon danh muc va nhom nut prev/next, khong
   bi cuon/an theo danh muc san pham (xem inc/header.php). */
.gd3-main-menu-static {
  flex: 0 0 auto;
  list-style: none;
}

/* MEGA MENU "TIN TUC" (05/09/2026, giong giao dien 1): muc Tin tuc nam
   NGOAI vung cuon ngang nen dropdown dinh vi absolute binh thuong, neo mep
   PHAI cua .gd3-main-menu-wrap (khong keo dai het thanh menu nhu mega san
   pham), rong toi da 1000px, 4 cot (3 danh muc tin goc + Thong tin). Nen
   trang, vien vang tren, tieu de cot chu den gach vang. Khong dinh
   position:fixed (luat .gd3-main-menu-scroll ... o tren chi ap cho dropdown
   trong vung cuon). */
.gd3-main-menu-wrap { position: relative; }
/* Giu ::before (dai vo hinh cao 30px duoi chu "Tin tuc" - cau noi de chuot
   di tu chu xuong dropdown qua khoang padding cua <li> ma khong bi dong),
   chi bo mui ten tam giac ::after cho dong bo voi cac muc danh muc. */
.gd3-tin-menu > a::after { display: none !important; }
.gd3-tin-menu .list-dropdown.gd3-tin-mega {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  width: 1000px;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  padding: 18px 22px 20px;
  background-image: none;
  background-color: var(--aw-the);
  border-top: 3px solid var(--aw-nhan);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
  white-space: normal;
  z-index: 6;
}
.gd3-tin-mega-cot > .col { min-width: 0; }
.gd3-tin-mega-tit {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--aw-ke);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--aw-chu);
}
.gd3-tin-mega-tit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--aw-nhan);
}
.gd3-tin-menu .list-dropdown.gd3-tin-mega ul { margin-top: 0; list-style: none; }
.gd3-tin-menu .list-dropdown.gd3-tin-mega ul li { line-height: 1.4; }
.gd3-tin-menu .list-dropdown.gd3-tin-mega ul li a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--aw-chu-2);
  transition: background-color .15s ease, color .15s ease;
}
.gd3-tin-menu .list-dropdown.gd3-tin-mega ul li a:hover { background: var(--aw-nhan-nhat); color: var(--aw-chu); }
.gd3-tin-mega-thongtin ul li a i { width: 18px; margin-right: 4px; color: var(--aw-nhan-dam); text-align: center; }
/* Man hinh nho hon 1000px (tablet ngang): bam theo be rong container. */
@media (max-width: 1199.98px) {
  .gd3-tin-menu .list-dropdown.gd3-tin-mega { width: 100%; left: 0; right: auto; }
}

/* Dai mo dan (fade) ngay truoc "Tin tuc" - la 1 div rong nam NGOAI vung
   cuon (la sibling cua #gd3-main-menu-scroll trong .gd3-main-menu-wrap,
   khong phai o ben trong) nen luon dung yen 1 cho (khong bi cuon theo,
   khong dinh phai vat lon voi thu tu ve/z-index cua noi dung dang cuon
   ben trong - da thu qua cach dat position:sticky BEN TRONG vung cuon
   truoc do nhung bi cac the <a>/<span> position:relative cua danh muc de
   len tren, khong thay hieu ung). Dung margin-left am de no de len 1 phan
   ben phai cua vung cuon (#gd3-main-menu-scroll van giu nguyen kich thuoc,
   khong bi cong them 32px) - tao cam giac danh muc "mo dan" ngay truoc
   khi cham "Tin tuc", thay vi bi cat cut ngang. Chi hien khi thuc su co
   cuon (giong nhom nut prev/next). */
.gd3-main-menu-fade {
  flex: 0 0 32px;
  width: 32px;
  margin-left: -32px;
  align-self: stretch;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--aw-the) 90%);
  position: relative;
  z-index: 2;
  display: none;
}

.gd3-main-menu-wrap.is-overflowing .gd3-main-menu-fade {
  display: block;
}

/* Nhom 2 nut prev/next dung canh nhau, ben phai thanh menu - mac dinh an,
   JS chi hien khi #gd3-main-menu-scroll thuc su tran (is-overflowing). */
.gd3-main-menu-nav-group {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.gd3-main-menu-wrap.is-overflowing .gd3-main-menu-nav-group {
  display: flex;
}

.gd3-main-menu-nav {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgb(0 0 0 / 8%);
  border-radius: 5px;
  margin: 4px 0;
}

.gd3-main-menu-nav:hover {
  background: rgb(0 0 0 / 15%);
}

.gd3-main-menu-nav i {
  font-size: 13px;
  color: var(--aw-chu-2);
}

.gd3-main-menu-nav.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Cum "sub-category" (pill thuong hieu duoi "Xe dap dien"/"Xe may dien" o
   trang chu) - cung 1 kieu cuon ngang + nut prev/next nhu menu danh muc
   chinh o tren (xem inc/home.php, js/home.js). */
.gd3-section-head {
  gap: 14px;
}

.gd3-subcat-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.gd3-subcat-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.gd3-subcat-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
}

.gd3-subcat-scroll ul.sub-category {
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  margin-left: auto;
}

.gd3-subcat-nav-group {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.gd3-subcat-wrap.is-overflowing .gd3-subcat-nav-group {
  display: flex;
}

.gd3-subcat-nav {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgb(0 0 0 / 8%);
  border-radius: 5px;
}

.gd3-subcat-nav:hover {
  background: rgb(0 0 0 / 15%);
}

.gd3-subcat-nav i {
  font-size: 12px;
  color: var(--aw-chu-2);
}

.gd3-subcat-nav.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Icon Font Awesome kem nut "Xem them" duoi luoi san pham (truoc day
   khong co icon nao, CSS .btn-see-all-products img co san trong file mau
   nhung markup lai khong dung img/i nao ca). */
.gd3-see-more-icon {
  padding-left: 6px;
}

/* Han che dung hinh: cac icon PNG rieng le (mui ten, tim kiem, mang xa
   hoi, danh muc menu...) duoc thay bang icon Font Awesome <i> - CSS duoi
   day dinh kich thuoc/mau cho tung vi tri de thay dung vai tro cua anh
   cu (xem inc/header.php, inc/footer.php, inc/home.php, inc/functions.php). */

/* Icon danh muc trong menu ngang (desktop) + mmenu (mobile) */
.ul-main-menu li a .gd3-menu-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  margin-right: 5px;
  margin-bottom: 0;
}

/* Icon mui ten dropdown "Xem cac chi nhanh" */
.gd3-caret-icon {
  font-size: 11px;
  color: inherit;
}

/* Icon qua tang "Danh sach san pham dang khuyen mai" - rieng, to hon
   .gd3-menu-icon dung chung (15px) va mau den, khong dung chung class
   voi cac icon menu khac de khong lam to/doi mau nhung cho dang dung
   .gd3-menu-icon (mmenu, main menu...). Ca link (icon + chu) chuyen sang
   mau den, bo gach chan mac dinh cua the <a> (truoc day bi lo mau xanh
   link mac dinh vi khong co rule nao ghi de). */
.gd3-gift-icon {
  font-size: 26px;
  color: var(--aw-chu);
}

.gd3-promo-link,
.gd3-promo-link:hover,
.gd3-promo-link:visited {
  color: var(--aw-chu);
  text-decoration: none;
}

.gd3-promo-link:hover {
  background-color: rgb(255 255 255 / 85%);
}

/* Icon truoc "Gioi thieu / Tuyen dung / Hoi dap" o thanh tren cung +
   gian cach ro hon giua 3 muc (truoc chi dua vao padding-right 20px nen
   nhin bi "dinh lien", them duong ke doc mo nhe cho tach bach). */
.gd3-topnav-icon {
  font-size: 11px;
  margin-right: 5px;
  color: inherit;
}

.ul-menu-header li:not(:last-child) {
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid rgb(0 0 0 / 15%);
}

/* Icon kinh lup o nut tim kiem */
.input-group-text-search i {
  color: var(--aw-tren-chu);
  font-size: 15px;
}

/* Icon o khoi "KHUYEN MAI / TRA GOP / TUYEN DUNG" duoi slider - ban
   desktop (nam trong o den .item-hot-news-icon) va ban mobile (icon don,
   khong co khung nen). */
.item-hot-news-icon i {
  color: var(--aw-tren-chu);
  font-size: 26px;
  position: relative;
  z-index: 3;
}

.gd3-hotnews-icon-mb {
  font-size: 26px;
  color: var(--aw-chu);
}

/* Icon tieu de khoi "XE DAP DIEN" / "XE MAY DIEN" */
.gd3-section-title-icon {
  font-size: 22px;
  margin-right: 4px;
  color: inherit;
}

/* Sua loi do hoa o hang tieu de khoi thuong hieu (.d-flex
   justify-content-between align-items-center trong gd3_render_brand_section()
   - inc/home.php): tieu de "XE DAP DIEN"/"XE MAY DIEN" la the <a> nhung
   .block-sub-product-title (main.css) chi dinh font-size/font-weight,
   KHONG dat mau/gach chan nen bi lo mau xanh + gach chan mac dinh cua
   trinh duyet, dong thoi bi ep xuong dong (vo 2 dong) khi hang pill
   thuong hieu ben canh chiem het cho do la flex item co the co ngot.
   Fix: dat mau den + bo gach chan, khong cho tieu de co ngot/xuong dong,
   nhuong cho pill thuong hieu tu xuong dong khi thieu cho thay vi ep
   tieu de vo dong. */
.block-sub-product-title {
  color: var(--aw-chu);
}

a.block-sub-product-title,
a.block-sub-product-title:hover,
a.block-sub-product-title:visited {
  text-decoration: none;
  color: var(--aw-chu);
  white-space: nowrap;
  flex-shrink: 0;
}

ul.sub-category {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* Icon ngay dang / luot xem trong tin tuc */
.gd3-news-meta-icon {
  font-size: 11px;
  color: var(--aw-chu-phu);
  margin-right: 2px;
}

/* Icon mang xa hoi trong footer - to hon truoc (16px->22px) + mau dung
   thuong hieu tung mang (Facebook xanh duong, YouTube do, TikTok den) */
.gd3-social-link {
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.gd3-social-link:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.gd3-social-link .fa-facebook {
  color: #1877f2;
}

.gd3-social-link .fa-youtube {
  color: var(--aw-giam);
}

.gd3-social-link .fa-tiktok {
  color: var(--aw-chu);
}

/* Icon dia diem showroom trong footer */
.icon-map {
  width: 30px;
  font-size: 18px;
  color: var(--aw-chu);
  text-align: center;
}

/* Icon loi ich (mien phi van chuyen, thanh toan, doi tra, bao hanh) */
.benefit-item-icon {
  font-size: 30px;
  color: var(--aw-chu);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.5px) {
  .benefit-item-icon {
    font-size: 22px;
  }
}

/* Icon "Sale cuc dinh" tren the san pham */
.product-item .sale i {
  color: var(--aw-tren-chu);
  font-size: 13px;
  padding-left: 6px;
}

/* Icon thanh quick-fixed mobile: thanh da bo (04/09/2026), rule bo theo. */

/* Icon prev/next slide/swiper (carousel banner + 5 khoi swiper) - thay
   the anh pre-slide.png/next-slide.png bang mui ten Font Awesome, giu
   nguyen khung nen trang mo/tron goc co san. */
.carousel-control-prev-icon i,
.carousel-control-next-icon i {
  font-size: 16px;
  color: var(--aw-chu);
}

.swiper-button-prev i,
.swiper-button-next i {
  font-size: 16px;
  color: var(--aw-chu);
}