/* Khai bao font cua Roboto DA CHUYEN SANG PHP: includes/theme.php -> theme_css_inline().
Ly do: admin chon duoc font, nen chi font DANG CHON moi duoc khai bao — de trang khong
tai font no khong dung. URL font nay lay tu theme_asset() nen tu co ?v=filemtime, va
trung khit voi the preload vi ca hai goi chung mot ham. */
/* Cả theme chỉ đặt font ở ĐÚNG chỗ này. Dùng `*` chứ không phải `body` là cố ý:
input/button/select không thừa kế font từ cha, phải nhắm thẳng mới ăn.
Hệ quả cần nhớ: `*` đặt font cho MỌI phần tử nên nó CẮT luôn đường thừa kế —
muốn đổi font cho một khối thì phải nhắm cả con cháu (`X, X *`), xem khối
tiêu đề ở style.css. Giá trị lấy từ biến để admin đổi được, xem :root. */
* { font-family: var(--aw-font-than); }
.header-fixed-top {
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
transition: box-shadow 0.2s ease;
}
/* Chi hien shadow khi header dang thuc su "dinh" tren dau man hinh do
cuon trang (class toggle bang JS - xem js/home.js), giup tach bach voi
noi dung phia duoi thay vi bi "hoa" vao nen. */
.header-fixed-top.is-stuck {
box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}
.white-space-nowrap {
white-space: nowrap;
}
.text-727272 {
color: var(--aw-chu-phu);
}
.text-676767 {
color: var(--aw-chu-phu);
}
.text-E10034 {
color: #E10034;
}
.border-radius-10 {
border-radius: 10px;
}
.border-basic {
border: 1px solid var(--aw-chu);
}
.border-top-left-radius-0 {
border-top-left-radius: 0 !important;
}
.border-top-right-radius-0 {
border-top-right-radius: 0 !important;
}
.cursor-pointer {
cursor: pointer;
}
.bg-main {
background-color: var(--aw-nhan);
}
.height-max-content {
height: max-content;
}
.bg-white-opacity-03 {
background-color: rgb(255 255 255 / 62%);
}
.bg-gray {
background-color: var(--aw-nen);
}
.pl-20px {
padding-left: 20px;
}
.pl-7px {
padding-left: 7px;
}
.pr-7px {
padding-right: 7px;
}
.pr-10px {
padding-right: 10px;
}
.font-10 {
font-size: 10px;
}
.font-12 {
font-size: 12px;
}
.font-13 {
font-size: 13px;
}
.font-14 {
font-size: 14px;
}
.font-16 {
font-size: 16px;
}
.font-20 {
font-size: 20px;
}
.font-35 {
font-size: 35px;
}
.font-weight-800 {
font-weight: 800;
}
.ul-menu-header {
list-style: none;
}
.ul-menu-header li:not(:last-child) {
padding-right: 20px;
}
.ul-menu-header li a {
color: var(--aw-chu);
text-decoration: none;
}
.input-group-search input#input-search {
box-shadow: none;
}
.input-group-search .input-group-text-search {
background-color: var(--aw-chu);
}
/* Di chuot qua nut/icon kinh lup o tim kiem: chi doi mau ICON sang vang
thuong hieu (var(--aw-nhan)), GIU NGUYEN nen den (yeu cau 30/08/2026) - khac
voi kieu hover doi ca nen da dung o cac nut khac trong site. Dat
transition tren chinh icon de doi mau mem mai thay vi giat cuc. */
.input-group-search .input-group-text-search i {
transition: color 0.15s ease;
}
.input-group-search .input-group-text-search:hover i {
color: var(--aw-nhan);
}
.section-main-memu {
background-color: var(--aw-the);
}
.ul-main-menu {
list-style: none;
}
.ul-main-menu>li {
padding: 10px;
transition: 0.5s;
}
/* .ul-main-menu li:hover {
background-color: var(--aw-nhan);
} */
.ul-main-menu a:hover {
color: var(--aw-nhan);
}
.mm-listitem a:hover {
color: var(--aw-nhan);
}
.ul-main-menu li a {
font-size: 16px;
text-decoration: none;
color: var(--aw-chu);
}
/* Trang thai "dang o day" (active) tren menu ngang desktop - class
gd3-menu-active/gd3-menu-parent-active do JS tu dong gan (xem
gd3MarkActiveMenu() trong js/home.js), so sanh URL trang hien tai voi
href cua tung muc. gd3-menu-active = dung la trang dang xem (danh muc
goc HOAC danh muc con trong dropdown). gd3-menu-parent-active = danh
muc goc dang chua 1 danh muc con dang duoc xem (bam vao dropdown se
thay muc do). Gach chan vang - mau brand, khac voi mau xanh :hover de
khong nham voi hieu ung di chuot qua (yeu cau 30/08/2026). */
.ul-main-menu li > a.gd3-menu-active,
.ul-main-menu li > a.gd3-menu-parent-active {
color: var(--aw-chu);
font-weight: 800;
border-bottom: 3px solid var(--aw-nhan);
}
.menu-item-dropdown .list-dropdown ul li a.gd3-menu-active {
color: var(--aw-chu);
font-weight: 700;
background-color: var(--aw-nhan-nhat);
border-radius: 6px;
padding: 4px 8px;
margin: 0 -8px;
}
.ul-main-menu li a img {
margin-bottom: 3px;
padding-right: 3px;
}
#mmenu li img {
padding-right: 5px;
}
#mmenu {
width: 100%;
}
.mmenu-close-icon {
position: absolute;
right: 15px;
}
/* ===== HE BANNER MOI (09/09/2026) - lib/banner.php, quan tri progid=8 =====
.gd3-bn: khung anh + chu phu len. Anh da cat san dung ti le khung
(gd3.slider 1380x450 desktop / 750x493 mobile theo file mau; gd3.ngang
1220x122) nen chi can aspect-ratio (bien CSS tu DB) giu cho + object-fit. Chu dung font-size theo vw
(clamp) de dep tren moi be rong; mau .gd3-bn-toi cho anh nen sang. */
.gd3-bn { position: relative; display: block; overflow: hidden; color: var(--aw-tren-chu); text-decoration: none; background: var(--aw-chu); }
.gd3-bn img { display: block; width: 100%; height: auto; object-fit: cover; }
.gd3-bn-moi .carousel-item .gd3-bn { aspect-ratio: var(--bn-d, 1380 / 450); } /* ti le khung tu DB (inline --bn-d/--bn-m o inc/home.php) */
.gd3-bn-moi .carousel-item .gd3-bn img { height: 100%; }
.gd3-bn-ngang { aspect-ratio: var(--bn-d, 1220 / 122); border-radius: 10px; }
.gd3-bn-chu { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; gap: .35em; padding: 5% 5%; background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 65%); font-size: clamp(11px, 1.1vw, 18px); }
.gd3-bn-toi { color: var(--aw-chu); }
.gd3-bn-toi .gd3-bn-chu { background: linear-gradient(0deg, rgba(255,255,255,.78), rgba(255,255,255,0) 65%); }
.gd3-bn-giua .gd3-bn-chu { align-items: center; text-align: center; }
.gd3-bn-phai .gd3-bn-chu { align-items: flex-end; text-align: right; }
.gd3-bn-td { font-size: 2.1em; font-weight: 800; line-height: 1.15; margin: 0; max-width: 70%; color: inherit; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.gd3-bn-toi .gd3-bn-td { text-shadow: none; }
.gd3-bn-dp { font-size: 1.2em; line-height: 1.35; margin: 0; max-width: 70%; opacity: .95; }
.gd3-bn-nut { display: inline-block; background: var(--aw-nhan); color: var(--aw-chu); font-weight: 800; font-size: 1.1em; padding: .55em 1.4em; border-radius: 2em; margin-top: .35em; transition: transform .15s; }
.gd3-bn:hover .gd3-bn-nut { transform: translateY(-2px); }
.gd3-bn-phu { aspect-ratio: var(--bn-d, 604 / 250); border-radius: 8px; }
.gd3-bn-phu .gd3-bn-chu { padding: 5% 5%; font-size: clamp(9px, 1.1vw, 14px); }
.gd3-bn-phu .gd3-bn-td { font-size: 1.6em; max-width: 80%; }
.gd3-bn-ngang .gd3-bn-chu { justify-content: center; padding: 2% 3%; gap: .2em; font-size: clamp(9px, .85vw, 13px); } /* dai 10:1 rat mong -> chu nho, nut nho */
.gd3-bn-ngang .gd3-bn-td { max-width: 55%; font-size: 1.7em; }
.gd3-bn-ngang .gd3-bn-nut { padding: .35em 1.1em; margin-top: .1em; }
@media (max-width: 991.98px) {
.gd3-bn-moi .carousel-item .gd3-bn { aspect-ratio: var(--bn-m, 750 / 493); }
.gd3-bn-chu { font-size: clamp(12px, 3.2vw, 16px); padding: 6% 5%; }
.gd3-bn-td, .gd3-bn-dp { max-width: 100%; }
}
#carouselBanner .carousel-control-prev-icon,
#carouselBanner .carousel-control-next-icon {
background-image: none;
width: max-content;
height: max-content;
padding: 15px 7px;
background-color: rgb(255 255 255 / 100%);
border-radius: 5px;
}
.group-link-hot-news .item-hot-news {
background-color: var(--aw-nhan);
border-radius: 10px;
overflow: hidden;
width: calc(33.333% - 9px);
color: var(--aw-chu);
text-decoration: none;
}
.group-link-hot-news .item-hot-news .item-hot-news-icon {
width: 25%;
background-color: var(--aw-chu);
position: relative;
}
.group-link-hot-news .item-hot-news .item-hot-news-icon img {
position: relative;
z-index: 3;
}
.group-link-hot-news .item-hot-news .item-hot-news-icon::after {
content: '';
position: absolute;
width: 100%;
height: 130%;
top: -11px;
left: 11px;
-ms-transform: rotate(13deg);
transform: rotate(11deg);
background-color: var(--aw-chu);
z-index: 2;
}
.group-link-hot-news .item-hot-news .item-hot-news-title {
font-weight: 800;
line-height: 25px;
}
.block-products {
overflow: hidden;
border-radius: 15px;
margin-left: 13px;
margin-right: 13px;
background-size: cover;
background-repeat: no-repeat;
background-position: top left;
}
.block-products.block-top-products {
background-image: url('../images/bg-top-products.png');
}
.block-products.block-products-see-multiple {
background-image: url('../images/bg-product-see-multiple.png');
}
.block-product-title {
font-weight: 800;
text-align: center;
}
.block-product-title img {
transform: translateY(-5px);
flex-shrink: 0;
}
.block-product-title.block-tops-product-title {
color: var(--aw-giam);
}
.block-product-title.block-products-title-see-multiple {
color: var(--aw-tren-chu);
}
.block-sub-product-title {
font-size: 30px;
font-weight: 500;
}
.product-item {
background-color: var(--aw-the);
border-radius: 5px;
overflow: hidden;
display: block;
text-decoration: none;
color: var(--aw-chu);
}
.product-item:hover {
color: var(--aw-nhan);
}
.product-item img {
transition: 0.5s;
}
.product-item:hover img {
transform: scale(1.1);
}
.product-item.product-item-mb {
height: calc(100% - 16px);
}
.product-item .sale {
background-image: linear-gradient(to right, var(--aw-giam), var(--aw-giam-dam));
font-size: 13px;
color: var(--aw-tren-chu);
border-radius: 20px;
width: max-content;
}
.product-item .sale .title-sale {
transform: translateY(1px);
display: inline-block;
padding: 0 10px 0 5px;
}
/* ---- Huy hieu "co gi de xem them" tren the san pham (31/08/2026) ----
Bao nhanh san pham nao co video / album anh / bo anh xoay 360 / nhieu
mau, ngay tren luoi danh muc - khach khong phai bam vao tung xe moi
biet (yeu cau chu du an). Cac co nay duoc tinh san theo NHOM trong
gd3_products_by_ids() nen khong phat sinh them truy van cho tung the.
Dat DE LEN GOC DUOI BEN PHAI cua anh (yeu cau 31/08/2026 - da thu qua
goc duoi trai, va thu qua cach dua len cung hang voi nhan "Tra gop %").
Nam de len anh thi khong ton them chieu cao nao cua the; ben PHAI vi
goc trai duoi anh thuong la phan than xe, con goc phai da so la nen
trong. */
.gd3-card-imgwrap {
position: relative;
}
.gd3-card-badges {
position: absolute;
right: 6px;
bottom: 4px;
z-index: 2;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 4px;
/* Khong bat chuot: ca the san pham la 1 the , huy hieu chi de nhin
nen phai de cu bam "xuyen qua" xuong link san pham. */
pointer-events: none;
}
.gd3-card-badge {
display: inline-flex;
align-items: center;
gap: 3px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
/* Nen DEN mo + toan bo icon mau VANG thuong hieu (yeu cau 31/08/2026 -
ban thu sau khi da lam qua ban nen trang va ban icon 4 mau). Vi huy
hieu nam DE LEN ANH nen dung den MO (68%) chu khong den dac: van
thay lo mo phan anh ben duoi, nhin nhe hon la mot mieng den dac dan
vao goc anh. Vien mo trang de phong nhung anh co vung toi lan lon. */
background-color: rgb(0 0 0 / 68%);
color: var(--aw-tren-chu);
font-size: 10.5px;
line-height: 1;
box-shadow: 0 0 0 1px rgb(255 255 255 / 45%);
}
/* Anh trong the phong to khi ro chuot (.product-item:hover img) - huy hieu
KHONG phong theo, neu khong chu se nhoe va lech ra ngoai anh. Chi lam nen
dam hon de van doc duoc khi anh dang phong. */
.product-item:hover .gd3-card-badge {
background-color: rgb(0 0 0 / 82%);
}
.gd3-card-badge i {
font-size: 10.5px;
}
.gd3-card-badge b {
font-weight: 700;
}
/* MOT MAU VANG duy nhat cho ca 4 icon (yeu cau 31/08/2026 - ban thu sau
khi da xem qua ban 4 mau rieng va ban nen trang).
Vang var(--aw-nhan) la mau thuong hieu cua chinh giao dien (logo, nut, thanh
tim kiem...) nen hang huy hieu doc nhu MOT khoi thuoc ve giao dien chu
khong phai 4 nhan roi rac; tren nen den mo thi vang cung la mau noi bat
nhat. Doi lai, khac nhau giua 4 loai chi con nam o HINH icon.
Giu nguyen 4 lop is-video/is-album/is-360/is-mau (trong inc/functions.php)
du hien tai cung mau: can quay lai kieu 4 mau rieng thi chi sua dung
khoi CSS nay, khong phai dong vao PHP. */
.gd3-card-badge.is-video i,
.gd3-card-badge.is-album i,
.gd3-card-badge.is-360 i,
.gd3-card-badge.is-mau i {
color: var(--aw-nhan);
}
.gd3-card-badge .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 767.5px) {
/* Man hep, the be lai - thu huy hieu nho cho khoi che mat xe. */
.gd3-card-badges {
right: 4px;
bottom: 2px;
gap: 3px;
}
.gd3-card-badge {
height: 18px;
padding: 0 3px;
gap: 2px;
font-size: 9.5px;
}
.gd3-card-badge i {
font-size: 9.5px;
}
}
/* Ten san pham tren THE SAN PHAM: toi da 2 DONG, dai hon thi cat bot va
them dau "..." (yeu cau 01/09/2026 - vd "Xe điện chở khách tham quan,
hai tầng Smart S11 Plus" o do phan giai 1366px bi tran thanh 3 dong,
day gia xuong lam le hang the).
Dat o day (main.css, chon theo .product-item) nen ap dung cho MOI cho
dung the san pham: trang chu, trang danh muc, "San pham cung loai",
"San pham vua xem", "San pham moi" - khong phai sua rai rac tung noi.
min-height 3em = dung 2 dong (line-height 1.5 x 2): giu cho san 2 dong
ke ca khi ten chi co 1 dong, de GIA cua cac the trong cung 1 hang luon
thang nhau thay vi so le. line-height ghi ro 1.5 dung bang gia tri dang
thua ke - khong doi hinh thuc hien tai, chi de phep tinh 3em o tren
luon dung du sau nay co doi co chu. */
.product-item .product-item-name {
font-size: 15px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3em;
overflow-wrap: break-word;
}
.product-item .discount-price {
font-size: 13px;
color: var(--aw-giam);
font-weight: 800;
}
.product-item .old-price {
font-size: 11px;
color: var(--aw-chu-phu);
text-decoration: line-through;
}
.product-item .note-installment {
white-space: nowrap;
font-size: 9.5px;
font-style: italic;
padding: 2px 2px 2px 5px;
background-color: var(--aw-nhan);
position: relative;
width: max-content;
}
.product-item .note-installment:after {
content: '';
border-top: 9px solid transparent;
border-right: 10px solid transparent;
border-bottom: 9px solid transparent;
border-left: 10px solid var(--aw-nhan);
width: 0;
height: 0;
position: absolute;
top: 0;
left: 100%;
}
/* Rê chuột vao san pham: doi nen den + chu vang (thay vi ke thua mau
xanh var(--aw-nhan) tu .product-item:hover o tren, khien nen vang + chu xanh
nhu truoc - yeu cau 29/08/2026). Doi ca mau mui ten tam giac (:after)
cho khop voi nen moi. */
.product-item:hover .note-installment {
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
.product-item:hover .note-installment:after {
border-left-color: var(--aw-chu);
}
.btn-see-all-products {
background-color: var(--aw-the);
text-decoration: none;
color: var(--aw-chu);
padding: 10px 25px;
border-radius: 20px;
transition: background-color 0.5s, color 0.5s;
}
.btn-see-all-products * {
transition: 0.5s;
}
.btn-see-all-products span {
transform: translateY(1px);
display: inline-block;
}
.btn-see-all-products img {
padding-left: 5px;
}
.btn-see-all-products:hover {
/* Doi tu chu xanh (var(--aw-nhan)) sang nen den + chu vang, khop voi kieu
hover cua badge "Tra gop 0%" (.note-installment) - yeu cau
29/08/2026. */
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
.btn-see-all-products:hover * {
transform: translateX(10px);
}
.section-category-products {
background-color: var(--aw-the);
}
.category-products-item {
margin-bottom: 40px;
display: block;
color: var(--aw-chu);
text-decoration: none;
}
.category-products-item img {
transition: 0.5s;
}
.category-products-item:hover img {
transform: scale(1.1);
}
ul.sub-category {
list-style: none;
}
ul.sub-category li:not(:last-child) {
padding-right: 15px;
}
ul.sub-category li a {
text-decoration: none;
font-size: 14px;
color: var(--aw-chu);
transition: 0.5s;
padding: 5px 15px;
border-radius: 20px;
}
ul.sub-category li:hover a {
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
/* Danh muc DANG XEM trong hang danh muc anh em o khoi "Xem them san pham
cung danh muc" (yeu cau 01/09/2026). Khong phai the - no la
, khong bam duoc - nen phai tu lay lai dang vien thuoc cua cac
muc con lai, va to dam len de doc ra ngay "minh dang o day". */
ul.sub-category li .gd3-subcat-current {
display: inline-block;
font-size: 14px;
padding: 5px 15px;
border-radius: 20px;
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
font-weight: 700;
cursor: default;
}
.section-partner {
background-color: var(--aw-the);
}
.block-news {
background-color: var(--aw-the);
border-radius: 10px;
}
.section-sub-title {
font-weight: 500;
color: var(--aw-chu);
}
/* Khoi "Dia chi cac showroom" o footer (section-branch-showroom) - lam
dep tieu de: them icon badge tron den-vang + gach chan vang, chi ap
dung rieng khoi nay de khong anh huong cac section khac dung chung
class .section-sub-title. */
.section-branch-showroom .section-sub-title {
font-weight: 800;
letter-spacing: 0.4px;
}
.section-branch-showroom .section-sub-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
border-radius: 50%;
font-size: 13px;
margin-right: 8px;
vertical-align: middle;
}
.section-branch-showroom .section-sub-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--aw-nhan);
border-radius: 3px;
margin: 10px auto 0;
}
.ul-category-news {
list-style: none;
}
.ul-category-news li {
font-size: 14px;
padding-left: 10px;
cursor: pointer;
}
.group-news-items .news-relate {
color: var(--aw-chu);
text-decoration: none;
display: block;
overflow: hidden;
}
.group-news-items .news-relate * {
transition: 0.5s;
}
.group-news-items .news-relate:hover {
color: var(--aw-nhan);
}
.group-news-items .news-relate .news-item-avatar {
overflow: hidden;
}
.group-news-items .news-relate:hover .news-item-avatar img {
transform: scale(1.05);
}
.group-news-items .news-relate:not(:first-child) {
border-top: 1px solid var(--aw-ke-dam);
}
.tab-news-social-item {
font-size: 14px;
color: var(--aw-chu);
background-color: var(--aw-ke-dam);
padding: 7px 15px 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
cursor: pointer;
}
.tab-news-social-item.active {
background-color: var(--aw-nhan);
}
.tab-news-social-item:not(:first-child) {
padding-left: 20px;
}
.tab-news-social-item::after {
position: absolute;
border-right: 27px solid transparent;
border-bottom: 29px solid var(--aw-ke-dam);
border-left: 15px solid transparent;
width: 0;
height: 0;
content: '';
bottom: 0;
right: -26px;
z-index: 3;
}
.tab-news-social-item.active::after {
border-bottom: 29px solid var(--aw-nhan);
}
.slide-item-customer {
border-radius: 10px;
padding: 12px;
text-align: center;
background-color: var(--aw-the);
height: 100%;
display: block;
color: var(--aw-chu);
text-decoration: none;
}
.slide-item-customer * {
transition: 0.5s;
}
.slide-item-customer .slide-item-customer-img {
max-height: 200px;
overflow: hidden;
}
.slide-item-customer:hover .slide-item-customer-img img {
transform: scale(1.05);
}
.slide-item-customer:hover {
color: var(--aw-nhan);
}
.slide-item-img {
width: 100%;
object-fit: cover;
height: 250px;
}
.section-benefit {
background-color: var(--aw-ke-dam);
}
.section-benefit .benefit-item {
height: calc(100% - 16px);
}
.section-benefit .col-benefit-item {
align-items: center;
}
.branch-showroom-item {
font-size: 15px;
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
background-color: var(--aw-nen-2);
border: 1px solid var(--aw-ke);
border-radius: 30px;
padding: 6px 12px;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.branch-showroom-item:hover {
background-color: var(--aw-nhan-nhat);
border-color: var(--aw-nhan);
transform: translateY(-1px);
}
.branch-showroom-item span {
transition: color 0.2s ease;
}
.branch-showroom-item.active {
background-color: var(--aw-chu);
border-color: var(--aw-chu);
}
.branch-showroom-item.active span {
color: var(--aw-nhan);
font-weight: 700;
}
.branch-showroom-item-number {
font-size: 13px;
padding: 0px 4px;
background-color: var(--aw-nhan);
border-radius: 20px;
border: 1px solid var(--aw-nhan);
margin-left: 7px;
line-height: 19px;
height: 18px;
display: flex;
align-items: center;
}
.content-footer-main {
border-top: 1px solid var(--aw-ke-dam);
}
.title-footer {
font-size: 18px;
font-weight: bold;
}
.title-footer:after {
display: block;
content: '';
border-top: 2px solid var(--aw-ke-dam);
width: 50px;
}
.content-footer-main {
font-size: 14px;
}
.content-footer-main ul {
list-style: none;
}
.content-footer-main ul li {
margin-bottom: 5px;
}
.content-footer-main ul li a {
color: var(--aw-chu);
text-decoration: none;
}
/* GPDKKP + 3 logo chung nhan (bct/dmcan/geotrust) duoi dia chi cong ty o
footer, va hang "Phuong thuc thanh toan" + copyright o thanh duoi cung. */
.gd3-footer-trust-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.gd3-footer-trust-badges img {
height: 28px;
width: auto;
}
.gd3-footer-bottom-row {
row-gap: 10px;
column-gap: 20px;
/* Chua khoang cho nut back-to-top (.gd3-back-to-top: right 20px + rong
44px = choan toi 64px tinh tu mep phai) de logo thanh toan khong bi
nut do de len khi cuon xuong cuoi trang. */
padding-right: 72px;
}
.gd3-footer-payment {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.gd3-footer-payment img {
height: 22px;
width: auto;
}
.phone-green {
color: #10aa00;
}
.phone-red {
color: var(--aw-giam);
}
.phone-blue {
color: #0098d1;
}
/* (07/09/2026) Bon so o khoi "TU VAN BAN HANG" chan trang gio la the boc trong (giong giao dien 1).
Bootstrap dat san `a { color:#0d6efd; text-decoration: underline }` nen
neu khong ep lai thi so bi gach chan va mat mau xanh cua .phone-blue.
`color: inherit` = an theo mau cua boc ngoai, sua mau o mot cho
la ca bon dong doi theo. */
/* Phai du 4 muc de thang `.content-footer-main ul li a { color: var(--aw-chu) }` o
ngay trong tep nay (3 muc) - luat do dat MOI lien ket trong chan trang
thanh mau den, ke ca bon so dien thoai. Viet `.phone-blue a` khong thoi
thi so ra mau DEN chu khong phai xanh (da do: strong = #0098d1 nhung
the ben trong = var(--aw-chu)). */
.content-footer-main ul li .phone-blue a {
color: inherit;
text-decoration: none;
}
.content-footer-main ul li .phone-blue a:hover,
.content-footer-main ul li .phone-blue a:focus {
color: inherit;
text-decoration: underline;
}
a.email {
color: var(--aw-chu);
text-decoration: none;
white-space: nowrap;
}
.col-category-news {
text-align: center;
font-size: 18px;
font-weight: 800;
color: var(--aw-tren-chu);
background-color: var(--aw-chu);
border-top: 1px solid var(--aw-chu);
border-bottom: 1px solid var(--aw-chu);
padding: 7px 5px 2px;
width: 33.333%;
}
.col-category-news.active {
color: var(--aw-chu);
background-color: var(--aw-nhan);
border-top: 1px solid #d6d25f;
border-bottom: 1px solid #c5bf1b;
}
.news-item-main {
color: var(--aw-chu);
text-decoration: none;
display: block;
}
.news-item-main:hover {
color: var(--aw-nhan);
}
.news-item-main * {
transition: 0.5s;
}
.news-item-avatar {
max-height: 350px;
object-fit: cover;
overflow: hidden;
}
/* Khoi TIN TUC trang chu - "the bai day du hon" (09/09/2026): nhan danh muc
goc anh, nhan "Moi" (< 48 gio), tom tat 2 dong, ngay tuong doi, phut doc.
Co che chon bai giu nguyen (inc/home.php). */
.gd3-nw-anh { position: relative; border-radius: 8px; }
.gd3-nw-dm, .gd3-nw-moi {
position: absolute; top: 10px; z-index: 2;
font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .3px; text-transform: uppercase;
padding: 6px 9px; border-radius: 6px; pointer-events: none;
}
.gd3-nw-dm { left: 10px; background: rgba(20, 20, 20, .82); color: var(--aw-nhan-sang); }
.gd3-nw-moi { right: 10px; background: var(--aw-giam); color: var(--aw-tren-chu); }
.gd3-nw-ghim { right: 10px; background: var(--aw-nhan); color: var(--aw-chu); padding: 6px 8px; }
.gd3-nw-ghim-nho { color: var(--aw-nhan-dam); font-size: 10px; margin-left: 2px; }
/* Tab HOI DAP (thay FACEBOOK) trong khoi tin trang chu - 09/09/2026. */
.gd3-hdm { display: flex; flex-direction: column; }
.gd3-hdm-dau { font-size: 12px; color: var(--aw-chu-phu); padding: 4px 6px 8px; border-bottom: 1px solid var(--aw-ke); }
.gd3-hdm-dau b { color: var(--aw-chu); font-size: 14px; }
.gd3-hdm-muc { display: flex; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--aw-ke); color: var(--aw-chu); text-decoration: none; }
.gd3-hdm-muc:hover .gd3-hdm-hoi { color: var(--aw-nhan-dam); }
.gd3-hdm-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--aw-chu); color: var(--aw-nhan-sang); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.gd3-hdm-than { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gd3-hdm-ten { font-size: 11.5px; color: var(--aw-chu-phu); }
.gd3-hdm-ten b { color: var(--aw-chu); }
.gd3-hdm-hoi { font-size: 13.5px; font-weight: 700; line-height: 1.35; transition: color .2s; }
.gd3-hdm-sp { font-size: 11px; color: var(--aw-nhan-dam); font-weight: 700; }
.gd3-hdm-tl { font-size: 12px; color: var(--aw-chu); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* 5 cau: trich tra loi 1 dong */
.gd3-hdm-tl i { color: #0e7c3a; font-size: 10px; margin-right: 2px; }
.gd3-hdm-chan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px 4px; margin-top: auto; }
.gd3-hdm-nut { background: var(--aw-chu); color: var(--aw-nhan-sang); font-weight: 800; font-size: 12.5px; padding: 9px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background .2s; }
.gd3-hdm-nut:hover { background: var(--aw-chu-2); color: var(--aw-nhan); }
.gd3-hdm-them { font-size: 12.5px; font-weight: 700; color: var(--aw-chu-2); text-decoration: none; }
.gd3-hdm-them:hover { color: var(--aw-nhan-dam); }
.gd3-hdm-them i { font-size: 10px; }
.gd3-hdm-fb { display: block; text-align: center; font-size: 11.5px; color: var(--aw-chu-phu); text-decoration: none; padding: 6px 0 2px; }
.gd3-hdm-fb:hover { color: #1877f2; }
.gd3-nw-tieude { font-size: 16px; line-height: 1.35; }
.gd3-nw-tomtat {
margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--aw-chu);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gd3-nw-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 11px; color: var(--aw-chu-phu); }
.gd3-nw-meta i { margin-right: 4px; }
.gd3-nw-phu { display: block; min-width: 0; }
.gd3-nw-phu-ten { display: block; }
.gd3-nw-phu-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--aw-chu-phu); font-weight: 400; }
.gd3-nw-phu-meta b { color: var(--aw-nhan-dam); font-weight: 700; }
.gd3-nw-moi-nho {
display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1;
color: var(--aw-tren-chu); background: var(--aw-giam); border-radius: 4px; padding: 3px 5px; vertical-align: 1px; text-transform: uppercase;
}
.group-news-items .news-relate:hover .gd3-nw-phu-meta { color: var(--aw-chu-phu); }
/* Hang dau khoi TIN TUC: tieu de + tab chuyen muc + "Tat ca tin" (09/09/2026). */
.gd3-nw-dau { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gd3-nw-tabs { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0; }
.gd3-nw-tabs::-webkit-scrollbar { display: none; }
.gd3-nw-tab {
flex: 0 0 auto; border: 1.5px solid var(--aw-ke-dam); background: var(--aw-the); color: var(--aw-chu-2); font: inherit;
font-size: 12.5px; font-weight: 700; line-height: 1; padding: 8px 12px; border-radius: 999px; cursor: pointer;
white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.gd3-nw-tab:hover { border-color: var(--aw-chu); color: var(--aw-chu); }
.gd3-nw-tab.active { background: var(--aw-chu); border-color: var(--aw-chu); color: var(--aw-nhan-sang); }
.gd3-nw-tatca { flex: 0 0 auto; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--aw-chu-2); text-decoration: none; white-space: nowrap; }
.gd3-nw-tatca:hover { color: var(--aw-nhan-dam); }
.gd3-nw-tatca i { font-size: 10px; margin-left: 2px; }
@media (max-width: 991.5px) {
.gd3-nw-dau { flex-wrap: wrap; }
.gd3-nw-tatca { margin-left: 0; width: 100%; text-align: right; }
}
.news-item-main:hover .news-item-avatar img {
transform: scale(1.05);
}
.address-branch-details {
background: var(--aw-the);
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
height: calc(100% - 20px);
border: 1px solid var(--aw-ke);
box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.address-branch-details:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgb(0 0 0 / 12%);
border-color: var(--aw-nhan-vien);
}
.address-branch-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
background-color: var(--aw-nhan-nhat);
border-radius: 50%;
transition: background-color 0.2s ease;
}
.address-branch-details:hover .address-branch-icon-wrap {
background-color: var(--aw-chu);
}
/* Ten cua hang CHI 1 DONG, dai qua thi cat bot bang dau "..." (yeu cau
31/08/2026). Truoc do ten dai xuong 2-3 dong lam cac o showroom trong
cung 1 hang cao thap khong deu.
min-width:0 la bat buoc: the nay la 1 muc flex (nam trong .d-flex canh
icon dinh vi), ma mac dinh muc flex khong duoc co nho hon noi dung cua
no - khong dat min-width:0 thi text-overflow khong bao gio co hieu luc,
ten van day rong o ra. */
.address-branch-details .name-address-branch {
text-transform: uppercase;
font-weight: 800;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.address-branch-details .view-map-branch * {
transition: all 0.3s;
}
/* Dat ngang hang voi so dien thoai (address-branch-bottom-row) thay vi
xuong dong rieng nhu truoc - margin-left:auto de tu day sang phai du
co hien thi sdt hay khong, khong can justify-content:space-between o
the cha. */
.address-branch-details .view-map-branch {
background-color: var(--aw-nhan);
padding: 4px 10px;
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
border-radius: 20px;
color: var(--aw-chu);
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex: 0 0 auto;
}
.address-branch-details .view-map-branch i {
font-size: 11px;
transition: transform 0.2s ease, color 0.2s ease;
}
.address-branch-details .view-map-branch:hover {
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
.address-branch-details .view-map-branch:hover i {
transform: translateX(2px);
}
.address-branch-bottom-row {
min-height: 26px;
}
.address-branch-phone {
font-size: 13px;
color: var(--aw-chu);
}
.address-branch-details .icon-map {
width: auto;
font-size: 14px;
color: var(--aw-nhan);
text-align: center;
transition: color 0.2s ease;
}
.address-branch-details:hover .icon-map {
color: var(--aw-nhan);
}
/* menu */
.menu-item-dropdown>a {
position: relative;
}
.menu-item-dropdown>a::after {
content: '';
position: absolute;
z-index: 4;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--aw-ke);
border-left: 10px solid transparent;
width: 0;
height: 0;
top: calc(100% + 3px);
left: 10px;
display: none;
}
.menu-item-dropdown>a::before {
content: '';
position: absolute;
z-index: 4;
width: 100%;
height: 30px;
top: 100%;
left: 0;
display: none;
}
.menu-item-dropdown .list-dropdown .title-category-dropdown-menu {
font-size: 14px;
font-weight: bold;
}
.menu-item-dropdown .list-dropdown .title-category-dropdown-menu::after {
content: '';
width: 100%;
display: block;
border-top: 1px solid var(--aw-ke-dam);
}
/* O tim nhanh trong dropdown mega (danh muc nhieu con, chia 3-4 cot) -
xem inc/header.php + gd3StripAccents()/xu ly loc trong js/home.js.
margin-bottom: 8px de tach voi border-top cua ::after ben tren (dong
ho o cung 1 hang voi tieu de, ::after ke tiep ngay ben duoi). */
.gd3-mega-search {
position: relative;
flex: 0 0 auto;
margin-bottom: 8px;
}
.gd3-mega-search i {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: var(--aw-chu-phu);
pointer-events: none;
}
.gd3-mega-search-input {
font-size: 12px;
font-weight: normal;
color: var(--aw-chu);
background-color: var(--aw-the);
border: 1px solid var(--aw-ke-dam);
border-radius: 6px;
padding: 5px 8px 5px 24px;
width: 170px;
max-width: 100%;
outline: none;
}
.gd3-mega-search-input:focus {
border-color: var(--aw-nhan);
}
.gd3-mega-search-empty {
font-size: 13px;
color: var(--aw-chu-phu);
font-weight: normal;
padding: 6px 2px 2px;
}
.menu-item-dropdown .list-dropdown {
position: absolute;
top: 100%;
z-index: 5;
background-image: url('../images/bg-submenu.png');
background-repeat: no-repeat;
background-size: cover;
padding: 15px;
white-space: nowrap;
width: 100%;
display: none;
left: 0;
}
.menu-item-dropdown .list-dropdown ul {
list-style: none;
margin-bottom: 0;
margin-top: 10px;
}
.menu-item-dropdown .list-dropdown ul li a {
font-size: 13px;
display: block;
}
.menu-item-dropdown:hover .list-dropdown,
.menu-item-dropdown:hover>a::after,
.menu-item-dropdown:hover>a::before {
display: block;
}
/* Dropdown "Xem cac chi nhanh" canh logo - hien danh sach showroom (dung
chung du lieu voi footer, xem inc/header.php + gd3_branch_list() trong
inc/functions.php). Ten cong ty duoi dong "Xem cac chi nhanh" cat gon 1
dong neu dai qua khoi be rong o (khong xuong dong pha layout). */
.gd3-branch-trigger {
position: relative;
}
.gd3-branch-company-name {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gd3-branch-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
width: 280px;
max-height: 70vh;
overflow-y: auto;
background-color: var(--aw-the);
color: var(--aw-chu);
/* Goc tren-trai de vuong (0), 3 goc con lai bo tron 14px: dropdown
"xo" thang xuong tu mep trai cua .gd3-branch-trigger (cung mep
trai, xem left:0 ben duoi) nen bo tron o day nhin bi gay/khong tu
nhien - da thu va bo lai theo yeu cau 29/08/2026. Chieu rong duoc
JS (js/home.js) tinh lai moi lan hover de keo dai toi dung mep
phai nut "San pham khuyen mai" ben canh, thay vi de cung 280px co
dinh nhu truoc (chi con la gia tri du phong khi JS khong chay
duoc). */
border-radius: 0 14px 14px 14px;
box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
padding: 14px 14px 12px;
white-space: normal;
display: none;
/* Thanh cuon mong, mau vang thuong hieu - danh cho Firefox; Chrome/Edge
dung khoi ::-webkit-scrollbar ben duoi. */
scrollbar-width: thin;
scrollbar-color: var(--aw-nhan) var(--aw-nen-2);
}
.gd3-branch-trigger:hover .gd3-branch-dropdown {
display: block;
}
/* Man hinh cham (dien thoai/tablet, 576-1199px) khong co hover that nen
phai bam/tap - JS (js/home.js) toggle class "is-open" khi bam vao
trigger, xem ket hop voi rule :hover o tren cho chuot that (yeu cau
30/08/2026 - truoc day ban mobile cua "Xem cac chi nhanh" khong co
dropdown nao ca nen bam khong ra gi). */
.gd3-branch-trigger.is-open .gd3-branch-dropdown {
display: block;
}
/* .gd3-branch-trigger-right (ban "Xem cac chi nhanh" rieng, neo mep phai,
tach biet voi o tim kiem) da bi bo hoan toan khoi inc/header.php tu
30/08/2026 - "Xem cac chi nhanh" gio chi con 1 vi tri duy nhat (xem
.gd3-header-branch-block, dung chung 1 dropdown neo mep TRAI nhu duoi
day). Rule neo mep phai truoc day danh rieng cho ban do khong con doi
tuong nao dung nua nen da bo. */
.gd3-branch-dropdown::-webkit-scrollbar {
width: 6px;
}
.gd3-branch-dropdown::-webkit-scrollbar-track {
background: var(--aw-nen-2);
border-radius: 10px;
}
.gd3-branch-dropdown::-webkit-scrollbar-thumb {
background-color: var(--aw-nhan);
border-radius: 10px;
}
.gd3-branch-dropdown-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 2px solid var(--aw-nhan);
}
.gd3-branch-dropdown-title-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: 0 0 24px;
background-color: var(--aw-chu);
color: var(--aw-nhan-sang);
border-radius: 50%;
font-size: 11px;
}
.gd3-branch-group {
background-color: var(--aw-nen-2);
border: 1px solid var(--aw-ke);
border-radius: 10px;
padding: 8px 10px;
margin-bottom: 8px;
}
.gd3-branch-group:last-child {
margin-bottom: 0;
}
.gd3-branch-group-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 800;
color: var(--aw-nhan);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.2px;
}
.gd3-branch-group-icon {
font-size: 11px;
color: var(--aw-nhan);
opacity: 0.85;
}
.gd3-branch-dropdown ul {
list-style: none;
}
.gd3-branch-dropdown ul li a {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--aw-chu);
padding: 5px 6px;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.gd3-branch-dropdown ul li a:hover {
background-color: var(--aw-nhan-nhat);
color: var(--aw-chu);
font-weight: 600;
transform: translateX(3px);
}
.gd3-branch-item-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
background-color: var(--aw-the);
border: 1px solid var(--aw-ke);
border-radius: 50%;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gd3-branch-item-icon {
font-size: 10px;
text-align: center;
color: var(--aw-nhan);
transition: color 0.15s ease;
}
.gd3-branch-dropdown ul li a:hover .gd3-branch-item-icon-wrap {
background-color: var(--aw-chu);
border-color: var(--aw-chu);
}
.gd3-branch-dropdown ul li a:hover .gd3-branch-item-icon {
color: var(--aw-nhan);
}
/* Lop phu mo nen trang khi menu danh muc dang xo dropdown (list-dropdown)
- giup dropdown noi bat hon, xem toggle "is-active" trong js/home.js.
z-index nam duoi dropdown (5) va duoi header (1000, luon dinh tren
cung) nhung tren noi dung trang binh thuong. pointer-events:none de
khong can tro thao tac chuot ben duoi/ben trong dropdown. */
.gd3-menu-overlay {
position: fixed;
inset: 0;
/* Tang tu 0.45 len 0.62 - nen web dung nhieu mau vang, o 0.45 mau
vang cua trang van "lo" qua nhieu qua lop phu, khien vach sang
quet (::after, cung mau vang) bi chim, kho thay (kiem tra thuc te
bang cach doi tam thoi sang mau do bao hoa moi thay lop phu THUC
SU nam dung z-index tren cung - chi la do tuong phan vang-tren-
vang qua thap). 29/08/2026. */
background-color: rgba(0, 0, 0, 0.62);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease;
z-index: 4;
pointer-events: none;
}
.gd3-menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* Hieu ung "song nang luong lan toa" tren lop phu mo nen - 3 nhom diem
(giua/trai/phai - .gd3-energy-ring-center/-left/-right, xem
inc/header.php), moi nhom 3 vong tron no dan tu nho toi lon + mo dan
toi khi bien mat, lech thoi gian bang animation-delay de vong nay
chua tan het thi vong khac da bat dau, tao cam giac song lan toa lien
tuc (giong hieu ung sonar/radar) - thay cho "vach sang quet ngang"
truoc do (29/08/2026), sau do them 2 nhom trai/phai theo yeu cau cung
ngay. La hieu ung trang tri phia sau dropdown (z-index thap hon) nen
khong can bam sat vi tri chinh xac cua tung dropdown. Dung
nth-child(3n+2)/nth-child(3n) de chon vong thu 2/3 trong TUNG nhom 3
the lien tiep (ap dung chung cho ca 3 nhom, khong can viet rieng tung
nhom) - vong thu 1 moi nhom (3n+1) khong can khai bao rieng vi
animation-delay mac dinh la 0s. */
.gd3-energy-ring {
position: absolute;
top: 20%;
left: 50%;
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
border-radius: 50%;
border: 2px solid rgba(255, 217, 0, 0.9);
box-shadow: 0 0 14px 2px rgba(255, 217, 0, 0.45);
opacity: 0;
pointer-events: none;
}
.gd3-energy-ring-left {
top: 78%;
left: 12%;
}
.gd3-energy-ring-right {
top: 78%;
left: 88%;
}
.gd3-menu-overlay.is-active .gd3-energy-ring {
animation: gd3EnergyPulse 2.8s ease-out infinite;
}
.gd3-menu-overlay.is-active .gd3-energy-ring:nth-child(3n+2) {
animation-delay: 0.95s;
}
.gd3-menu-overlay.is-active .gd3-energy-ring:nth-child(3n) {
animation-delay: 1.9s;
}
@keyframes gd3EnergyPulse {
0% {
transform: scale(0.3);
opacity: 0.9;
}
70% {
opacity: 0.3;
}
100% {
transform: scale(9);
opacity: 0;
}
}
/* Nguoi dung yeu cau giam chuyen dong - tat animation, giu lai 1 vong
dung yen mo nhe thay vi bo het hieu ung. */
@media (prefers-reduced-motion: reduce) {
.gd3-menu-overlay.is-active .gd3-energy-ring {
animation: none;
opacity: 0;
}
.gd3-menu-overlay.is-active .gd3-energy-ring:nth-child(3n+1) {
opacity: 0.4;
transform: scale(2);
}
}
/* Icon gio hang (xem inc/header.php) - tach thanh 1 cot rieng
(.gd3-header-cart-col) tu Round 8, khong con chung nhom voi "Gioi
thieu/Tuyen dung/Hoi dap" nhu truoc (.gd3-header-right-group da bo).
URL se tich hop sau (hien tam "#"); so luong (.gd3-cart-badge) luon
hien, ke ca "0" khi gio hang rong. */
.gd3-cart-link {
position: relative;
color: var(--aw-chu);
font-size: 18px;
line-height: 1;
text-decoration: none;
}
.gd3-cart-link:hover,
.gd3-cart-link:visited {
color: var(--aw-chu);
text-decoration: none;
}
.gd3-cart-badge {
position: absolute;
top: -7px;
right: -9px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background-color: var(--aw-giam);
color: var(--aw-tren-chu);
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
/* ---- Hieu ung "bay vao gio hang" (ban 2, 31/08/2026) ---------------
Khi khach bam "Them vao gio" (hoac nut "Them" o khoi phu tung), mot
THE TRON mang so luong vua them ("+1", "+3"...) bat ra tu O SO LUONG,
BAY THEO DUONG CONG len icon gio hang roi thu nho va tan di; cho bat
ra co 1 vong song lan toa, cho ha canh co 1 vong sang bung ra, sau do
icon gio hang lac va con so tren icon nay len.
Vi sao bay duoc theo duong CONG ma khong can vong lap JS: dung 2 lop
long nhau, moi lop lo 1 truc.
- Lop ngoai (.gd3-fly) : chi chay theo truc NGANG, easing "cham
roi nhanh" (ease-in).
- Lop trong (.gd3-fly-token): chi chay theo truc DOC, easing "nhanh
roi cham" (ease-out).
Hai chuyen dong thang khac nhip cong lai cho ra 1 duong cong hinh vong
cung - giong nem vat len roi tha vao gio, khong phai truot thang mot
mach nhu ban dau. Tat ca deu la transform/opacity nen trinh duyet ve
bang GPU, khong lam giat trang.
Ban nhan ban KHONG bat chuot (pointer-events:none) de khach van bam
duoc vao trang trong luc hieu ung chay; z-index cao hon moi thu ke ca
header co dinh.
Dinh nghia o main.css (khong phai detail.css) vi icon gio hang nam o
header dung chung - trang nao sau nay co nut them gio deu dung lai
duoc, chi can goi gd3BayVaoGioHang() trong js/home.js. */
.gd3-fly {
position: fixed;
z-index: 2147483000;
width: 0;
height: 0;
pointer-events: none;
transition: transform 0.78s cubic-bezier(.62, .03, .98, .34);
will-change: transform;
}
.gd3-fly-token {
position: absolute;
left: -23px;
top: -23px;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: var(--aw-chu);
border: 2px solid var(--aw-nhan);
color: var(--aw-nhan-sang);
font: 700 15px/1 Arial, Helvetica, sans-serif;
letter-spacing: -0.3px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgb(0 0 0 / 30%);
transition: transform 0.78s cubic-bezier(.16, .84, .28, 1),
opacity 0.24s ease 0.5s;
will-change: transform, opacity;
}
/* Vong song: dung chung cho ca cho BAT RA (mau vang, o o so luong) lan
cho HA CANH (mau do, o icon gio hang). */
.gd3-fly-ring {
position: fixed;
z-index: 2147482999;
pointer-events: none;
border-radius: 999px;
border: 2px solid var(--aw-nhan);
transition: transform 0.5s cubic-bezier(.2, .7, .3, 1), opacity 0.5s ease;
will-change: transform, opacity;
}
.gd3-fly-ring.is-land {
border-color: var(--aw-giam);
border-width: 3px;
}
/* Icon gio hang lac khi vua nhan them 1 san pham. */
@keyframes gd3CartShake {
0% { transform: translateX(0) rotate(0deg); }
15% { transform: translateX(-3px) rotate(-11deg); }
30% { transform: translateX(3px) rotate(9deg); }
45% { transform: translateX(-2px) rotate(-7deg); }
60% { transform: translateX(2px) rotate(5deg); }
75% { transform: translateX(-1px) rotate(-3deg); }
100% { transform: translateX(0) rotate(0deg); }
}
.gd3-cart-link.is-shake > i {
display: inline-block;
animation: gd3CartShake 0.6s ease;
}
/* Con so tren icon phong to 1 nhip cho khach de nhan ra no vua tang. */
@keyframes gd3CartBadgePop {
0% { transform: scale(1); }
40% { transform: scale(1.5); background-color: var(--aw-nhan); color: var(--aw-chu); }
100% { transform: scale(1); }
}
.gd3-cart-link.is-shake .gd3-cart-badge {
animation: gd3CartBadgePop 0.6s ease;
}
/* Ton trong cai dat "giam chuyen dong" cua he dieu hanh: co nguoi bi chong
mat khi thay hieu ung bay/lac tren man hinh. Khi do bo het chuyen dong,
chuc nang them vao gio van chay binh thuong. */
@media (prefers-reduced-motion: reduce) {
.gd3-fly,
.gd3-fly-ring { display: none !important; }
.gd3-cart-link.is-shake > i,
.gd3-cart-link.is-shake .gd3-cart-badge { animation: none; }
}
.gd3-cart-link-mb {
color: var(--aw-chu);
font-size: 20px;
/* Truoc day "margin: 0 14px" (2 ben) - margin-right 14px + padding cot
12px cong lai thanh 26px "troi lo lung" giua icon va mep phai man
hinh - lech tam, mat can doi so voi nut menu ben trai chi cach mep
12px (yeu cau 30/08/2026). Bo margin-right, chi giu margin-left (tao
khoang tho voi noi dung o tim kiem/khoi khac ben trai trong
.gd3-header-flex-zone) de icon luon bam sat mep phai giong het cach
nut menu bam sat mep trai. Tu 30/08/2026 cot nay (gd3-header-mobileright-col)
chi con dung 1 minh icon gio hang (ban rieng cua "Xem cac chi nhanh"
da bi bo, xem inc/header.php) nen khong con can gap giua 2 phan tu
nua. */
margin-left: 14px;
}
.mm-menu--offcanvas {
z-index: 3000;
}
.mm-wrapper__blocker.mm-blocker.mm-slideout.mm-blocker--blocking {
z-index: 2001;
}
#best-seller {
color: var(--aw-chu)
}
.item-hot-news:hover {
color: var(--aw-nhan)
}
.xemaydien-circle {
width: 35px;
}
.list-dropdown ul li {
line-height: 25px;
}
.ul-category-news li:hover a {
background-color: var(--aw-nhan);
color: var(--aw-nhan);
}
.ul-category-news li a {
color: var(--aw-chu);
text-decoration: none;
padding: 5px;
border-radius: 20px;
}
.content-footer-main a:hover {
color: var(--aw-nhan)
}
/* Da thay bang hieu ung hover/active tren ca pill .branch-showroom-item
(xem gan .branch-showroom-item-number o tren) thay vi chi doi mau chu
khi hover rieng span - dong bo voi phong cach the/pill moi. */
.container-head a:hover {
color: var(--aw-nhan)
}
.container-iframe {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
.swiper-products-see-multiple__mobile,.swiper-top-product__mobile{
display: none;
}
ol.breadcrumb li a {
text-decoration: none;
color: var(--aw-chu);
font-size: 14px;
}
ol.breadcrumb li.active a {
font-weight: 800;
color: var(--aw-chu);
display: inline-block;
}
ol.breadcrumb li.active a::after {
content: '';
border-top: 5px solid var(--aw-chu);
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
width: 0;
height:0;
display: inline-block;
transform: translateY(4px);
margin-left: 3px;
}
.wrap-content-section {
background: var(--aw-the);
border: 1px solid var(--aw-ke-dam);
border-radius: 20px;
padding: 16px;
}
/* end menu */
.breadcrumb-item {
position: relative;
}
.breadcrumb-item-dropdown {
position: absolute;
left: 12px;
top: 100%;
width: 205px;
background-color: var(--aw-the);
list-style-type: none;
padding-left: 0;
padding: 5px 10px;
border-radius: 10px;
box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
z-index: 3;
visibility: hidden;
opacity: 0;
}
.breadcrumb-item-dropdown li a {
font-size: 14px;
font-weight: 300!important;
padding-bottom: 3px;
transition: 0.5s;
}
.breadcrumb-item-dropdown li a::after {
display: none!important;
}
.breadcrumb-item-dropdown li:hover a {
color: var(--aw-nhan)!important;
}
.breadcrumb li.breadcrumb-item:hover .breadcrumb-item-dropdown {
visibility: visible;
opacity: 1;
}
.icon-share {
position: relative;
}
ul.item-social-share {
list-style-type: none;
width: max-content;
border: 1px solid var(--aw-ke);
background-color: var(--aw-the);
padding: 10px 10px 5px;
z-index: 99;
}
ul.item-social-share li a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--aw-chu);
font-size: 12px;
}
ul.item-social-share li a span {
padding-left: 10px;
}
ul.item-social-share li:not(:last-child) {
padding-bottom: 5px;
}
ul.item-social-share .fa-google-plus-official,
ul.item-social-share .fa-pinterest {
color: #dd4b39;
font-size: 22px;
}
ul.item-social-share .fa-twitter {
width: 19px;
height: 19px;
color: var(--aw-tren-chu);
background: #54acee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dropdown-toggle.icon-share {
cursor: pointer;
}
.dropdown-toggle.icon-share::after {
display: none;
}
.faceboook-iframe{
border: none;
visibility: visible;
width: 100%;
height: 365px;
}
/* .quick-fixed / .wrap-quick-fixed / .quick-item: thanh 5 nut noi duoi man hinh
mobile - da bo khoi inc/footer.php ngay 04/09/2026, CSS bo theo. */
/* Yeu cau 31/08/2026 (ban sua lan 3, thay the hoan toan ban dong bang o
ban lan 2): user chi ra vi du anh header-ads.jpg (banner ![]()
dau trang, KHONG nam trong .container, xem inc/header.php) -
o ca 1366px va 1920px anh nay deu "trong giong nhau VA full man hinh".
Nghia la: khong phai muon dong bang kich thuoc tuyet doi, ma muon
.container tan dung toi da chieu rong man hinh (giong het anh banner -
luon fluid, khong bi chan max-width) o MOI kich thuoc, kha nang tu
1366 den 1920 "trong giong nhau" la vi ca 2 man hinh deu duoc lap day
toi da (khong con khoang trang thua 2 ben) - dung nhu 1 tam anh, moi
chi tiet ben trong phong to dong deu theo ty le nen khong bao gio
"lech ty le". Vi vay quay lai fluid KHONG GIOI HAN (bo han che
1351px/1800px cua 2 ban truoc), giong het cach .img-ads/img w-100
khong co max-width. De tranh lap lai loi "chu be nhu mat muoi" (loi
o ban lan 1 la container phinh to nhung font-size dung nguyen, mat ty
le) - lan nay them fluid typography (clamp() trong khoi rieng cuoi
file main.css, xem "Fluid typography 31/08/2026") de font-size/kich
thuoc chu PHONG TO CUNG TY LE voi .container tu 1366px den 1920px,
mo phong dung hieu ung "ca tam anh phong to deu" cua header-ads.jpg
cho phan noi dung la chu (HTML text khong tu dong phong ty le nhu anh
raster nen phai gia lap bang cong thuc). Qua 1920px, clamp() se giu
nguyen chu o muc da dat duoc o 1920 (khong phong to vo han tren man
hinh sieu rong 2K/4K) trong khi .container van tiep tuc fluid het co
giong anh banner - day la lua chon co chu dich de chu khong bi "khong
lo" tren man hinh qua rong, neu user muon doi lai xin phan hoi. */
section .container {
max-width: unset !important;
}
@media (min-width: 1200px) {
.ul-main-menu>li {
padding: 10px 0;
}
.ul-main-menu li a {
font-size: 14px;
}
}
@media (min-width: 1200px) and (max-width:1306px) {
.group-link-hot-news .item-hot-news .item-hot-news-title {
font-size: 35px;
}
}
/* Tu >=1200px, hang tren cua header gom 3 khoi lon: logo (co dinh, vua du
noi dung) - vung flex linh hoat (o tim kiem + khoi xem chi nhanh + khoi
san pham khuyen mai + khoi gioi thieu/tuyen dung/hoi dap) - gio hang (co
dinh). O tim kiem luon la phan tu "flex-grow" duy nhat trong vung linh
hoat nen no tu dong lap day het khoang trong con lai; cac khoi con lai
giu nguyen kich thuoc noi dung (flex:0 0 auto). Logo, o tim kiem, gio
hang khong bao gio bi an. Khi vung linh hoat khong con du cho (container
query tren .gd3-header-flex-zone), an bot theo dung thu tu uu tien (doi
lai theo yeu cau 30/08/2026 - truoc day thu tu nguoc lai):
1) khoi gioi thieu/tuyen dung/hoi dap (an truoc tien), 2) khoi san pham
khuyen mai, 3) khoi "Xem cac chi nhanh" (uu tien cao nhat, GIU LAI LAU
NHAT, chi an khi thuc su khong con chut cho nao) - xem cac khoi
.gd3-header-*-block va @container ben duoi. Khong dung @media vi day la
kich thuoc CUA VUNG FLEX (phu thuoc logo/gio hang chiem bao nhieu),
khong phai kich thuoc toan man hinh. */
@media (min-width: 1200px) {
/* Bootstrap dat san "width: 100%" cho moi .col (de con dung duoc khi
khong o trong flex container) - khi flex-basis la "auto" (nhu cac
khoi ben duoi), trinh duyet lay chinh "width" do lam flex-basis
thuc te (=100% container) thay vi tinh theo noi dung, khien moi cot
deu "doi" het ca dong va bi day xuong dong rieng (flex-wrap). Phai
tu dat lai width:auto de flex-basis tinh theo noi dung nhu mong
muon. */
.gd3-header-brand-col {
flex: 0 0 auto !important;
width: auto !important;
max-width: none;
}
.col-flex-5-xl-down {
flex: 1 1 auto !important;
width: auto !important;
max-width: none;
min-width: 0;
}
.gd3-header-cart-col {
flex: 0 0 auto !important;
width: auto !important;
}
.gd3-header-search-block {
flex: 1 1 160px;
min-width: 0;
}
}
/* KHONG con boc trong @media (min-width:1200px) nua (yeu cau 30/08/2026) -
truoc day khoi "Xem cac chi nhanh"/"Gioi thieu..."/"San pham khuyen mai"
chi hien tu 1200px tro len BAT KE con du cho hay khong trong vung flex,
khien o tim kiem o cac muc 700-1199px bi keo dai qua muc can thiet (vi
no la phan tu flex-grow DUY NHAT) trong khi 3 khoi kia bi an oan du co
the con vua. Container query (.gd3-header-flex-zone) hoat dong dua tren
CHIEU RONG THUC TE cua chinh vung flex do, khong phu thuoc @media (kich
thuoc toan trang) - nen bo han che ">=1200px" di, de no tu chay o MOI
kich thuoc trang: hep thi chi o tim kiem, rong dan thi lan luot "nhet"
them cac khoi neu con cho, dung tinh than container-query tu dau. */
.gd3-header-flex-zone {
container-type: inline-size;
container-name: gd3header;
width: 100%;
gap: 16px;
}
/* "Xem cac chi nhanh" - KHAC 2 khoi con lai (menu/khuyen mai chi hien/an,
giu nguyen kich thuoc noi dung): duoc phep GIAN RA mot chut khi vung
flex con du cho SAU KHI o tim kiem da lay phan cua no, thay vi cung mot
kich thuoc co dinh nhu 1 "vien gach" cham dung - nhin can doi/dep hon la
1 khoi nho tit nam canh khoang trong lon (yeu cau 30/08/2026). Flex-grow
thap hon o tim kiem (0.6 so voi 1) de o tim kiem van la phan tu chinh,
"Xem cac chi nhanh" chi gian them VUA PHAI chu khong lan at; max-width
chan khong cho no phinh to qua muc du con rat nhieu cho (vd o 1199px).
QUAN TRONG (sua yeu cau 30/08/2026 - loi thuc te o 763x621): truoc day
dung "flex-basis: auto" - trinh duyet tinh flex-basis dua tren KICH
THUOC NOI DUNG TU NHIEN cua khoi, ma ten cong ty (.gd3-branch-company-name,
white-space:nowrap) khien "auto" bi thoi phong toi ~320-323px (gan bang
max-width) CHO DU da co "overflow:hidden + text-overflow:ellipsis" -
nowrap luon tinh do rong ĐẦY ĐỦ chua cat cua chu vao kich thuoc "noi
dung tu nhien", bat ke sau nay co bi ellipsis cat bot luc hien thi hay
khong. He qua: khoi nay gan nhu KHONG BAO GIO co the co nho hon ~320px
(browser luon coi 320px la kich thuoc "toi thieu tu nhien" cua no), du
flex-shrink co dat cao bao nhieu - moi phep thu voi flex-shrink lon
(thu 3, 8, 50...) van khong keo no xuong duoi ~250px, khien o tim kiem ben
canh luon bi ep con rat it (vd chi ~172px o 763x621, "qua be" theo phan
anh cua nguoi dung). SUA: doi flex-basis tu "auto" sang so PX CO DINH
(180px, ≈ vua du cho icon + chu "Xem cac chi nhanh", KHONG tinh ten cong
ty vao) - danh lua trinh duyet bo qua kich thuoc noi dung that de tu
tinh toan grow/shrink, ten cong ty se TU DONG bi ellipsis cat gon khi
khoi bi ep hep hon do rong that cua no (dung y "thu gon" thay vi "an").
Dong thoi phai tang han flex-shrink (1 -> 3) VA khai bao min-width RO
RANG (110px, thay vi "auto" mac dinh tinh theo noi dung) - "min-width:
auto" mac dinh cua flex item van se EP VE lai kich thuoc noi dung day
du (~320px) moi khi co thu hep, bat ke flex-basis/flex-shrink dat gi -
phai ghi de rieng thanh 1 so cu the moi thoat duoc rang buoc nay. Ket
qua kiem chung thuc te: o 763x621 (truoc: o tim kiem 172px, khoi nay
320px) -> sau: o tim kiem ~286px, khoi nay ~206px (van doc duoc "Xem
cac chi nhanh" + ten cong ty rut gon, khong tran, khong bi an). */
.gd3-header-branch-block {
flex: 0.6 3 180px;
min-width: 110px;
max-width: 320px;
}
/* Duoi 1200px: CHAN khoi "Xem cac chi nhanh" o 210px (yeu cau 01/09/2026:
"keo kich thuoc man hinh tu 500 den 1190, truoc cai gio hang con khoang
trong hon nhieu, hay day o tim kiem rong hon de lap bot khoang trong do
lai").
Ly do khoang trong do sinh ra: khoi nay co flex-grow 0.6, tuc moi khi
cua so rong them thi no an 0,6/1,6 = ~37% phan rong them do, o tim kiem
chi duoc phan con lai. Ket qua nhin thay ro nhat la keo tu 700px sang
800px: o tim kiem dang 392px BI CO LAI con 262px, vi "Xem cac chi nhanh"
vua hien ra va gianh mat cho.
Chan o 210px thi khoi nay van du de hien dong "Xem cac chi nhanh" cung
mot phan ten cong ty, con toan bo phan rong them tu do tro di deu chay
vao o tim kiem. Do duoc: o tim kiem 262 -> 266 (800px), 324 -> 366
(900px), 358 -> 421 (1000px), 397 -> 482 (1190px).
Danh doi: ten cong ty von DA bi cat o moi kich thuoc (can 276px moi du
cho, truoc gio duoc 167-248px) nay chi con 163px - cat sau hon vai chu.
Chi CHAN chu khong dat lai flex: giu nguyen kha nang co lai (flex-shrink
3, min-width 110px) da can chinh truoc day cho cac kho hep. */
@media (max-width: 1199.5px) {
.gd3-header-branch-block {
max-width: 210px;
}
}
/* Khi .gd3-header-branch-block gian rong ra (co the toi 320px, xem tren),
phan chu "Xem cac chi nhanh" + ten cong ty (.gd3-branch-trigger-text) van
giu nguyen chieu rong noi dung mac dinh vi .gd3-branch-company-name bi
khoa cung "max-width:170px" (gioi han cu, tu luc khoi nay chi to bang
dung noi dung, chua tung gian rong) - phan nen (bg-white-opacity-03) rong
ra theo khoi cha nhung chu khong lap day, de lai khoang trong "chet" ben
phai truoc icon mui ten, nhin nhu chua dung het nen cua chinh no (phan
anh 30/08/2026). Cho .gd3-branch-trigger-text tu gian theo (flex-grow) va
go gioi han 170px CHI trong pham vi khoi nay (khong dung cho ban mobile
gd3-branch-trigger-right vi ban do khong dung class .gd3-branch-trigger-text/
.gd3-branch-company-name) de chu ten cong ty gian ra lap day dung phan
con lai, icon mui ten van nam gon ben phai sat mep khoi. */
.gd3-header-branch-block .gd3-branch-trigger-text {
flex: 1 1 auto;
min-width: 0;
}
.gd3-header-branch-block .gd3-branch-company-name {
max-width: 100%;
}
.gd3-header-promo-block,
.gd3-header-menu-block {
flex: 0 0 auto;
}
/* Nguong container-query duoi day uoc tinh tu chieu rong thuc te cua
tung khoi (do truc tiep tren trinh duyet) - co the can tinh chinh them
neu sau nay doi noi dung/font cac khoi nay. Dung "an neu qua hep" (max-
width) thay vi "hien neu qua rong" (min-width) de mac dinh la HIEN, chi
an di khi thuc su khong con cho - phu hop voi cach cac khoi nay von
dươc thiet ke de hien theo mac dinh (d-flex trong inc/header.php) va
chay dung o MOI kich thuoc container tu 0 den vo cuc, khong rieng gi
>=1200px nhu truoc.
Doi thu tu uu tien (yeu cau 30/08/2026): "Xem cac chi nhanh" gio la
khoi QUAN TRONG NHAT nen gan voi nguong NHO NHAT (480px - chi an khi
container that su chat hep, con it hon ca "San pham khuyen mai" truoc
day), "San pham khuyen mai" dung o giua (700px), con menu "Gioi
thieu/Tuyen dung/Hoi dap" bi coi la it can thiet nhat nen an SOM NHAT
(nguong lon nhat, 900px) - dao nguoc hoan toan thu tu cu (truoc day
"Xem cac chi nhanh" lai la khoi bi an som nhat). Da kiem tra thuc te:
o moi nguong, o tim kiem van co the co tam 150-350px (tuy do rong con
lai), khong bi tran hay vo bo cuc. */
@container gd3header (max-width: 900px) {
.gd3-header-menu-block {
display: none !important;
}
}
@container gd3header (max-width: 700px) {
.gd3-header-promo-block {
display: none !important;
}
}
@container gd3header (max-width: 480px) {
.gd3-header-branch-block {
display: none !important;
}
}
@media (max-width: 1199.5px) {
.swiper-products-see-multiple__desktop,.swiper-top-product__desktop{
display: none;
}
.swiper-products-see-multiple__mobile,.swiper-top-product__mobile{
display: flex;
}
.group-link-hot-news {
text-align: center;
}
.group-link-hot-news .item-hot-news .item-hot-news-title {
font-size: 20px;
line-height: 20px;
}
.group-link-hot-news .item-hot-news .font-16 {
font-size: 14px;
}
/* Nut mo menu mobile - doi sang nen den/vach vang (dong bo mau
thuong hieu dang dung xuyen suot: cac badge/nut khac deu theo cap
den-vang) thay vi vuong vang/vach den nhu truoc, bo chu "Menu" ben
duoi vi gio dat ngay canh logo (khong con nam rieng 1 cot cuoi
hang nua) nen can gon, vuong vuc deu 2 chieu - yeu cau 30/08/2026. */
.icon-menu-mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background-color: var(--aw-chu);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.icon-menu-mobile:active {
background-color: var(--aw-chu);
transform: scale(0.92);
}
.icon-menu-mobile .rectangle {
display: block;
width: 18px;
height: 2px;
background-color: var(--aw-nhan);
border-radius: 2px;
margin: 2px 0;
}
.input-group-search {
width: 100%;
}
/* O tim kiem bi hut hep lai vi logo (.gd3-header-brand-col) va cot phai
(chi nhanh + gio hang mobile, .gd3-header-mobileright-col) van la
"col" mac dinh cua Bootstrap (flex-grow:1, flex-basis:0%) nen tranh
flex-grow voi cot chua o tim kiem (.col-flex-5-xl-down), dong thoi bi
flex-shrink boi noi dung toi thieu (logo, icon) - ket qua o tim kiem
chi con lai phan nho, thua nhieu khoang trong vang xung quanh. Co
dinh 2 cot nay theo dung noi dung (flex:0 0 auto), giong y het cach
da lam cho >=1200px o tren (.gd3-header-brand-col/.gd3-header-cart-col),
de cot .col-flex-5-xl-down la thu duy nhat con flex-grow va chiem
het phan con lai - o tim kiem se tu dong rong toi da (yeu cau
30/08/2026). */
.gd3-header-brand-col {
flex: 0 0 auto !important;
width: auto !important;
}
.gd3-header-mobileright-col {
flex: 0 0 auto !important;
width: auto !important;
}
/* Loi "icon gio hang mobile lech sat top" (phan anh 30/08/2026): cac cot
anh em khac trong cung hang (.gd3-header-brand-col, vung flex chua o
tim kiem) deu co "align-items: center" rieng, nhung cot nay
(.gd3-header-mobileright-col) thi khong - mac dinh "align-items:
normal" cua flex container tuong duong "stretch", keo the
(#gd3-cart-link-mb, display:block) GIAN CAO BANG DUNG CHIEU CAO
CUA CA HANG (vd 44px), trong khi ban than icon ben trong chi cao
~20px va KHONG tu can giua trong khoang da bi keo gian do (block
mac dinh dat noi dung o TREN, khong can giua doc) - ket qua icon
nhin nhu bi "dinh" sat mep tren cua hang thay vi nam giua nhu logo/
o tim kiem/khoi "Xem cac chi nhanh" ben canh. Them align-items:
center de the khong bi gian cao qua noi dung that cua no nua,
tu dong can giua theo chieu doc giong het cac cot khac. */
.gd3-header-mobileright-col {
align-items: center;
}
/* Chi khoa flex-grow cua logo/cot phai (2 rule tren) la CHUA DU: ban than
.gd3-header-search-block van chua duoc khai bao flex-grow duoi
1200px (chi co o >=1200px, xem .gd3-header-search-block trong
@media (min-width:1200px) o tren) nen no khong tu gian ra chiem
phan con lai trong .gd3-header-flex-zone - chi vua khit noi dung
(o input + nut kinh lup), dung yen mot khi da du cho hien het noi
dung do (~240px), du container con thua rat nhieu (~190px o quanh
muc 700-990px, kiem chung thuc te luc keo tho gian tu mobile len
desktop - yeu cau 30/08/2026). Them flex-grow o day, giong y het
cach lam cho >=1200px, de o tim kiem gian lien tuc theo dung do
rong man hinh thay vi dung khung o mot ky mot khi da vua du noi
dung. */
.gd3-header-search-block {
flex: 1 1 auto;
min-width: 0;
}
}
@media (max-width: 1199.5px) and (min-width: 768px) {
.col-flex-5-xl-down {
flex: 4 0 0% !important;
}
}
@media (min-width: 992px) {
.faceboook-iframe{
border: none;
visibility: visible;
width: 100%;
height: 100%;
}
.block-products {
padding: 20px 38px;
}
.section-sub-title {
font-size: 30px;
}
.section-benefit .benefit-item {
border-right: 1px solid var(--aw-ke-dam);
width: 100%;
}
.pl-lg-7px {
padding-left: 7px;
}
.pr-lg-7px {
padding-right: 7px;
}
.group-news-items .news-relate:first-child {
font-weight: 800;
}
.group-news-items .news-relate img {
max-width: 100%;
}
.group-news-items .news-relate:not(:first-child) img {
display: none;
}
.section-benefit .benefit-item-icon img {
max-width: 50px;
}
}
@media (max-width: 991.5px) {
.block-products {
padding: 20px 15px;
}
.section-sub-title {
font-size: 20px;
font-weight: 700;
}
.section-benefit .col-benefit-item {
align-items: center;
display: flex;
}
.section-benefit .col-benefit-item:nth-child(1) {
border-right: 1px solid var(--aw-ke-dam);
border-bottom: 1px solid var(--aw-ke-dam);
}
.section-benefit .col-benefit-item:nth-child(2) {
border-bottom: 1px solid var(--aw-ke-dam);
}
.section-benefit .col-benefit-item:nth-child(3) {
border-right: 1px solid var(--aw-ke-dam);
}
.section-benefit .benefit-item-icon {
width: 30px;
}
.section-benefit .benefit-item-icon img {
max-width: 100%;
}
.section-news .block-news-res {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.group-news-items .news-relate {
display: flex;
padding-top: 7px;
}
.group-news-items .news-relate img {
width: 20%;
min-width: 100px;
flex-shrink: 0;
padding-right: 15px;
height: max-content;
}
#logo-head {
height: 30px;
}
.container-head {
max-width: 100%;
}
.block-sub-product-title {
font-size: 20px;
font-weight: 700;
}
.block-sub-product-title img {
width: 25px
}
}
@media (max-width: 767px) and (min-width: 576px) {
.col-flex-5-xl-down {
flex: 2 0 0% !important;
}
}
@media (max-width: 767px) {
.img-ads img {
height: 24px;
}
}
@media (min-width: 576px) {
.block-product-title {
font-size: 40px;
}
}
@media (max-width: 575px) {
.block-product-title {
font-size: 28px;
}
.col-flex-5-xl-down {
flex: 3 0 0% !important;
}
.col-max-content-sm-down {
max-width: max-content!important;
}
}
/* margin-bottom:58px cua .content-footer-main tren mobile (chua cho thanh
.quick-fixed) - bo cung thanh do, 04/09/2026. */
/* ===== "Phong to nguyen ban 1366" tu 1366px den 1920px (yeu cau
31/08/2026 - ban CUOI, thay the toan bo cach lam clamp() truoc do) =====
Yeu cau cua user, dien dat lai cho gon: "do hoa o 1366 va nho hon dang
OK roi; chi trong khoang 1366 -> 1920, moi thu (LAY TRANG CHU LAM VI DU:
TAT CA CHU tren trang chu - header, noi dung, footer) phai nhin bang mat
thuong van to ro rang, BO CUC Y HET trang 1366".
Cach lam cu (clamp() fluid typography cho tung selector) khong bao gio
dat duoc dieu do: phai liet ke tay tung selector (sot 1 cho la cho do
"be ti"), va cac kich thuoc KHONG phai chu (padding, gap, chieu cao,
khoang cach cot, o tim kiem tu gian...) van giu nguyen px nen ty le bo
cuc van lech dan so voi 1366. Da lam 3 vong va van con cho sot -> bo
han cach do.
Cach lam moi: PHONG TO NGUYEN CA TRANG bang thuoc tinh CSS "zoom" tren
. Voi zoom = z, trinh duyet lay do rong kha dung chia cho z roi
moi dan trang: o 1920 voi z = 1.4056 thi trang duoc DAN DUNG NHU o
1366px (1920 / 1.4056 = 1366) roi phong to 1.4056 lan khi ve len man
hinh. Ket qua: moi chu, moi icon, moi khoang cach, moi ty le deu giong
HET trang 1366, chi to hon - dung nghia "bo cuc y trang 1366".
Vi zoom khong nhan don vi (khong the viet zoom: calc(100vw / 1366px)),
phai chia thanh cac buoc 2% - moi buoc chi lech 2% nen mat thuong khong
thay giat khi keo gian cua so, con o 1 do phan giai co dinh thi luon
dung ty le. Nguong moi buoc = 1366 x z.
Duoi 1366px: KHONG co zoom (z = 1) - giu nguyen 100% giao dien hien tai
cho laptop nho/tablet/mobile nhu user xac nhan "dang ok".
Tren 1920px: giu z = 1.4056 (khong phong to them) - trang tiep tuc dan
rong ra nhu truoc gio tren man 2K/4K.
LUU Y khi sua ve sau: trong pham vi >=1366px KHONG duoc dung don vi vw/vh
nua (chung tinh theo man hinh THAT nen se bi nhan them lan nua voi zoom).
Chi co 1 cho dung vh la .gd3-branch-dropdown (max-height) - da bu tru
ngay ben duoi. ===== */
@media (min-width: 1393px) {
body {
zoom: 1.02;
}
}
@media (min-width: 1421px) {
body {
zoom: 1.04;
}
}
@media (min-width: 1448px) {
body {
zoom: 1.06;
}
}
@media (min-width: 1475px) {
body {
zoom: 1.08;
}
}
@media (min-width: 1503px) {
body {
zoom: 1.10;
}
}
@media (min-width: 1530px) {
body {
zoom: 1.12;
}
}
@media (min-width: 1557px) {
body {
zoom: 1.14;
}
}
@media (min-width: 1585px) {
body {
zoom: 1.16;
}
}
@media (min-width: 1612px) {
body {
zoom: 1.18;
}
}
@media (min-width: 1639px) {
body {
zoom: 1.20;
}
}
@media (min-width: 1667px) {
body {
zoom: 1.22;
}
}
@media (min-width: 1694px) {
body {
zoom: 1.24;
}
}
@media (min-width: 1721px) {
body {
zoom: 1.26;
}
}
@media (min-width: 1748px) {
body {
zoom: 1.28;
}
}
@media (min-width: 1776px) {
body {
zoom: 1.30;
}
}
@media (min-width: 1803px) {
body {
zoom: 1.32;
}
}
@media (min-width: 1830px) {
body {
zoom: 1.34;
}
}
@media (min-width: 1858px) {
body {
zoom: 1.36;
}
}
@media (min-width: 1885px) {
body {
zoom: 1.38;
}
}
@media (min-width: 1912px) {
body {
zoom: 1.40;
}
}
@media (min-width: 1920px) {
body {
zoom: 1.4056;
}
}
/* Bu tru don vi vh duy nhat trong giao dien: bang tha xuong "Xem cac chi
nhanh" gioi han cao 70vh. Duoi zoom, 70vh se duoc ve thanh 70% x 1.4056
~ 98% chieu cao man hinh (gan nhu trum ca man). Chia lai cho 1.4 de khi
phong to van ra dung ~70% man hinh nhu y do ban dau. */
@media (min-width: 1366px) {
.gd3-branch-dropdown {
max-height: 50vh;
}
}
/* ==========================================================================
O TIM KIEM GOI Y (yeu cau 01/09/2026: "tham khao file dinh kem de xay
dung tim kiem goi y vao giaodien3")
Khung goi y tha xuong ngay duoi o tim kiem o thanh dau trang. Markup
rong nam san trong inc/header.php (#gd3-goiy), noi dung do
js/home.js do vao (gd3KhoiTaoGoiY), du lieu tu giaodien3/search_ajax.php.
========================================================================== */
/* Moc de khung goi y tha xuong dung do rong cua o tim kiem. O tim kiem co
gian theo container query (xem .gd3-header-flex-zone) nen khong the dat
do rong co dinh cho khung goi y - phai bam theo chinh khoi nay. */
.gd3-header-search-block {
position: relative;
}
.gd3-goiy {
position: absolute;
/* DINH SAT day o tim kiem, khong chua khe ho (yeu cau 01/09/2026:
"no dang hinh thanh khe ho giua o tim kiem voi ket qua, ko nen co khe
ho nay"). Truoc day la calc(100% + 6px) - 6px do de lo mang nen trang
phia sau, nhin nhu bang ket qua roi ra khoi o tim kiem. */
top: 100%;
left: 0;
right: 0;
/* Header dang sticky voi z-index:1000 nen no tao mot lop xep rieng -
so o day chi phai lon hon cac anh em BEN TRONG header (mega menu,
khoi chi nhanh), khong can dua len sat tran. */
z-index: 1200;
background: var(--aw-the);
/* Chi bo goc 2 DAU DUOI. Hai goc tren de vuong de bang ket qua noi lien
mach voi o tim kiem thay vi trong nhu mot hop roi ra (yeu cau
01/09/2026: "khoi ket qua dang bo goc tren ben trai cam giac no ko
lien mach, ko nen bo goc do"). Goc tren ben PHAI cung de vuong theo -
no nam ngay duoi nut kinh lup, bo mot ben con ben kia thi lech. */
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
overflow: hidden;
/* Man hinh thap (laptop 768px cao, hoac dien thoai xoay ngang) khong du
cho cho 8 dong - cho cuon trong chinh khung thay vi tran xuong duoi
man hinh khong voi toi duoc. */
max-height: min(70vh, 460px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ---- Hang tab trong bang goi y (07/09/2026) ----
Cung 3 tab voi trang /tim-kiem (San pham / Bai viet / Video) nhung nho
hon va DINH O DAU BANG: khach dang go, mat dang o o tim kiem, hang tab
phai nam ngay duoi tam mat do chu khong phai cuoi danh sach.
position: sticky - khung goi y co the cuon (max-height 460px), hang tab
phai bam lai o dau de bam sang loai khac luc nao cung duoc, khong phai
cuon nguoc len. */
.gd3-goiy-tab {
position: sticky;
top: 0;
z-index: 2;
display: flex;
gap: 2px;
padding: 6px 8px 0;
background: var(--aw-the);
border-bottom: 1px solid var(--aw-ke);
}
.gd3-goiy-tab-o {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 6px;
/* Vach vang cua tab dang mo de len duong ke duoi cua ca hang. */
margin-bottom: -1px;
border: 0;
border-bottom: 3px solid transparent;
background: none;
color: var(--aw-chu-phu);
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
transition: color .15s ease, border-color .15s ease;
}
.gd3-goiy-tab-o b {
padding: 0 5px;
border-radius: 999px;
background: var(--aw-nen-2);
color: var(--aw-chu-phu);
font-size: 11px;
font-weight: 700;
}
.gd3-goiy-tab-o:hover:not([disabled]) { color: var(--aw-chu); }
.gd3-goiy-tab-o.is-hien {
color: var(--aw-chu);
font-weight: 800;
border-bottom-color: var(--aw-nhan);
}
.gd3-goiy-tab-o.is-hien b { background: var(--aw-chu); color: var(--aw-nhan-sang); }
.gd3-goiy-tab-o[disabled] { color: var(--aw-chu-phu); cursor: default; }
.gd3-goiy-tab-o[disabled] b { background: var(--aw-the); color: var(--aw-chu-phu); }
/* Dien thoai: bang goi y chi rong 229px o man 375 (no bam theo be ngang o
tim kiem, khong phai be ngang man hinh) - do 07/09/2026. Voi co chu may
tinh thi ba tab can ~246px nen chu tab nay DE LEN tab kia: cai nhan "54"
nam de len chu "B" cua "Bai viet". Thu nho chu + dem lai cho vua 3 x
~70px, va them overflow: hidden de neu co man nao con hep hon nua thi
chu bi cat GON TRONG o cua no chu khong tran sang o ben canh. */
@media (max-width: 767.98px) {
.gd3-goiy-tab { padding: 5px 5px 0; gap: 0; }
.gd3-goiy-tab-o {
overflow: hidden;
gap: 3px;
padding: 7px 1px;
font-size: 11.5px;
}
/* Tab dang mo KHONG dam hon o kho nay: 800 lam "San pham" rong them
~3px, dung bang phan con thieu de vua o (do: can 75px, co 73px).
Van phan biet duoc bang vach vang + nhan den o duoi. */
.gd3-goiy-tab-o.is-hien { font-weight: 700; }
.gd3-goiy-tab-o b { padding: 0 4px; font-size: 10px; }
}
/* Bao "khong co san pham nao, dang hien bai viet" - cung y voi
.gd3-tim-doi o trang ket qua, va cung tong xanh de khong lan voi
.gd3-goiy-doitu (vang, bao viec khac han: da doi tu khoa sang tu khac). */
.gd3-goiy-doitab {
padding: 8px 16px;
background: var(--aw-nen-2);
border-bottom: 1px solid var(--aw-ke-dam);
color: var(--aw-chu);
font-size: 12.5px;
line-height: 1.5;
}
/* Dong phu cua bai viet / video (ngay dang + luot xem) - dung cho cua
.gd3-goiy-gia o the san pham, nhung la thong tin nen phai nhat hon han
de khong tranh cho voi ten. */
.gd3-goiy-phu {
margin-top: 2px;
font-size: 12px;
color: var(--aw-chu-phu);
}
/* Trang thai "dang hoi may chu" va "khong co ket qua" dung chung mot kieu:
mot dong chu xam nhat, khong co gi de bam. */
.gd3-goiy-tin {
padding: 14px 16px;
color: var(--aw-chu-phu);
font-size: 13px;
}
.gd3-goiy-doitu {
padding: 8px 16px;
background: var(--aw-nhan-nhat);
border-bottom: 1px solid var(--aw-ke-dam);
color: #6b5b00;
font-size: 12.5px;
line-height: 1.5;
}
.gd3-goiy-doitu b {
color: #b58900;
}
.gd3-goiy-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
text-decoration: none;
color: var(--aw-chu-2);
border-bottom: 1px solid var(--aw-ke);
/* Ngon tay cham vao dong nao la dong do sang len - khong doi hover
(dien thoai khong co hover). Xem them .is-chon o duoi: phim mui ten
cung dung dung lop nay. */
transition: background-color 0.12s ease;
}
.gd3-goiy-item:last-of-type {
border-bottom: 0;
}
.gd3-goiy-item:hover,
.gd3-goiy-item.is-chon {
background: var(--aw-nen-2);
color: var(--aw-chu-2);
text-decoration: none;
}
.gd3-goiy-anh {
flex: 0 0 46px;
width: 46px;
height: 46px;
object-fit: contain;
background: var(--aw-the);
}
.gd3-goiy-noidung {
min-width: 0;
flex: 1 1 auto;
}
.gd3-goiy-ten {
font-size: 13px;
line-height: 1.35;
/* Ten xe rat dai - cat con 2 dong de 8 goi y van nhin duoc het mot
luot, khong phai cuon. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Phan trung voi tu khoa khach vua go duoc to dam len - de khach thay
ngay vi sao dong nay duoc goi y. Chi to dam, KHONG doi mau nen: 8 dong
ma dong nao cung co mang mau la roi mat. */
.gd3-goiy-ten mark {
background: none;
color: inherit;
font-weight: 700;
padding: 0;
}
.gd3-goiy-gia {
margin-top: 2px;
font-size: 13px;
font-weight: 700;
color: var(--aw-giam);
}
.gd3-goiy-giagoc {
margin-left: 6px;
font-size: 12px;
font-weight: 400;
color: var(--aw-chu-phu);
text-decoration: line-through;
}
/* Dong cuoi: "Xem tat ca ket qua cho ..." - dinh o day chu khong troi len
dau vi khach doc tu tren xuong, het 8 goi y ma van chua thay cai minh
can thi day la buoc tiep theo. */
.gd3-goiy-tatca {
display: block;
padding: 10px 16px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: var(--aw-chu-2);
background: var(--aw-nen-2);
text-decoration: none;
border-top: 1px solid var(--aw-ke-dam);
}
.gd3-goiy-tatca:hover,
.gd3-goiy-tatca.is-chon {
background: var(--aw-nhan);
color: var(--aw-chu-2);
text-decoration: none;
}
/* ==========================================================================
CHE DO TIM KIEM TREN MOBILE (yeu cau 01/09/2026: "tren mobi khi cham vao
o tim kiem thi an logo va nut gio hang de o tim kiem la rong nhat, ket
qua goi y xuat hien thi xung quanh nen nen mo")
Van de: o kho 375px, thanh dau trang dang chia cho 4 thu (nut menu, logo,
o tim kiem, gio hang) nen o tim kiem chi con ~85px - go duoc dung 1-2 chu
la het cho nhin. Cham vao o tim kiem la luc khach dang lam DUY NHAT mot
viec, nen tam thoi nhuong het cho cho no.
Lop .gd3-tim-mo do js/home.js dat len the khi o tim kiem duoc
cham vao, va go ra khi thoat. Cac quy tac duoi day chi co hieu luc duoi
1200px - dung nguong ma thanh dau trang chuyen sang bo cuc mobile
(d-xl-none cua nut menu + gio hang mobile), tren desktop khong doi gi.
========================================================================== */
@media (max-width: 1199.5px) {
/* CHI an logo. Gio hang o lai (yeu cau 01/09/2026, sau khi da thu ban
an ca hai): an mot minh logo da du cho o tim kiem rong gap ~2,6 lan,
ma gio hang thi khong nen bien mat - so mon dang co trong gio la thu
khach hay liec, va mat no giua chung de khien khach tuong minh vua
bam nham vao dau do. */
.gd3-tim-mo .gd3-header-brand-col {
display: none !important;
}
/* 3 khoi nay binh thuong bi an boi container query dua tren do rong
CON LAI cua vung flex (xem @container gd3header o tren). O tim kiem
vua duoc nhuong them ~150px nen vung flex rong ra, va container query
se cho rang "du cho roi" ma hien lai chung - an mat dung phan vua
gianh duoc. Phai an tay o day. */
.gd3-tim-mo .gd3-header-menu-block,
.gd3-tim-mo .gd3-header-promo-block,
.gd3-tim-mo .gd3-header-branch-block {
display: none !important;
}
/* flex-basis phai la 0%, KHONG duoc de `auto`. De `auto` thi cot nay
xin cho theo BE NGANG THAT cua o tim kiem ben trong; cong voi nut menu
ba gach ben canh la vuot qua 100% chieu ngang, va Bootstrap row
(flex-wrap: wrap) day o tim kiem xuong hang thu hai - thanh dau trang
cao gap doi, nut menu nam tro tren mot hang rieng. Voi basis 0% thi
cot chi doi phan CON LAI sau khi nut menu da lay phan cua no, nen ca
hai nam gon tren mot hang. min-width:0 de o tim kiem duoc phep co lai
nho hon noi dung toi thieu cua no thay vi lam trang phinh ngang. */
.gd3-tim-mo .col-flex-5-xl-down {
flex: 1 1 0% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
/* Trong luc bang goi y dang mo thi chinh O TIM KIEM cung bo not 2 goc
duoi, de duong vien cua o va cua bang ket qua thanh MOT khoi lien tuc -
khong con vet lom 4px o cho hai canh gap nhau. Nhan biet qua thuoc tinh
aria-expanded ma js/home.js dat len o tim kiem moi lan mo/dong bang goi
y, nen khong can them lop CSS rieng nao. */
#input-search[aria-expanded="true"] {
border-bottom-left-radius: 0;
}
#input-search[aria-expanded="true"] + .input-group-text-search {
border-bottom-right-radius: 0;
}
/* Nen mo phia sau khi bang goi y dang hien - o CA mobile lan PC (yeu cau
01/09/2026: "tren PC khi tim kiem xung quanh nen cung nen cho toi lai,
an ra vung toi no dong cai goi y di").
Nam DUOI thanh dau trang (.header-fixed-top co z-index 1000) nen o tim
kiem va bang goi y van sang ro, chi phan noi dung trang bi lam mo.
Cham/bam vao lop nay la dong bang goi y.
Dung top/right/bottom/left thay cho `inset`: Safari duoi 14.1 khong hieu
`inset`, ma iPhone doi cu con nhieu. */
.gd3-goiy-nen {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.45);
}
/* Tong dai (cot bando.tongdai, 05/09/2026) in truoc so dien thoai cua hang
trong khoi "Dia chi cac showroom" - them dau cham giua de khong nhin nham
thanh mot day so dai. */
.address-branch-tongdai {
font-weight: 600;
}
.address-branch-tongdai + .address-branch-phone::before {
content: "\00B7";
margin-right: 6px;
color: var(--aw-chu-phu);
}
/* ==========================================================================
SO SANH SAN PHAM - phan hien o MOI TRANG 06/09/2026
==========================================================================
Nut ⇄ tren the san pham (gd3_product_card) + thanh so sanh noi o day
man hinh (markup o inc/footer.php, dieu khien boi js/so-sanh.js).
Phai o main.css chu KHONG phai css/so-sanh.css: css/so-sanh.css chi
nap o trang /so-sanh-...html, con hai thu nay xuat hien o moi trang.
========================================================================== */
.gd3-ssbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* 1045: TREN thanh cong cu day man hinh (.gd3-tbd, 1040) nhung DUOI lop
nen toi cua menu truot (1059) va chinh menu (1060) - de mo menu thi
thanh nay chim xuong duoi lop toi nhu moi thu khac. Truoc 06/09/2026
de 9000 nen no noi len tren ca menu dang mo. Cung duoi nut "len dau
trang" (1050), tuy hai cai nay khong con de len nhau nua. */
z-index: 1045;
background: var(--aw-chu);
border-top: 2px solid var(--aw-nhan);
box-shadow: 0 -6px 20px rgb(0 0 0 / 25%);
/* An bang CA translate LAN opacity/visibility. Chi translateY(110%) la
KHONG du: tren dien thoai thanh nay dat `bottom: 58px` (nhuong cho
thanh cong cu day man hinh), nen dich xuong 110% CHIEU CAO CUA NO van
con ho ra ~50px o day man hinh - loi that khi kiem thu 06/09/2026. */
transform: translateY(100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s, bottom 0.25s ease;
}
.gd3-ssbar.is-hien {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gd3-ssbar-trong {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.gd3-ssbar-nhan {
color: var(--aw-tren-chu);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
flex: none;
}
.gd3-ssbar-ds {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
}
.gd3-ssbar-o {
position: relative;
flex: none;
width: 58px;
height: 58px;
border-radius: 8px;
background: var(--aw-the);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.gd3-ssbar-o img {
max-width: 100%;
max-height: 100%;
display: block;
}
.gd3-ssbar-bo {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
border: 0;
border-radius: 50%;
background: rgba(17, 17, 17, 0.75);
color: var(--aw-tren-chu);
font-size: 10px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.gd3-ssbar-bo:hover {
background: var(--aw-giam);
}
.gd3-ssbar-trong-o {
flex: none;
width: 58px;
height: 58px;
border-radius: 8px;
border: 2px dashed rgba(255, 255, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
text-align: center;
line-height: 1.2;
padding: 4px;
}
.gd3-ssbar-nut {
flex: none;
display: flex;
align-items: center;
gap: 10px;
}
/* "Xoá hết": nut PHU dung canh nut chinh "So sánh (n)" - cung chieu cao,
cung bo tron, nhung dang vien rong (ghost) de khong tranh vai nut chinh.
Truoc 06/09/2026 no la mot chu gach chan tron, nam canh mot nut vang
day - nhin nhu link lac vao. Vi day la hanh dong XOA nen re chuot doi
sang do var(--aw-giam) (mau do dung chung ca site), bao truoc la viec pha huy. */
.gd3-ssbar-xoa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 40px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: transparent;
color: var(--aw-chu-phu);
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.gd3-ssbar-xoa i {
font-size: 13px;
}
.gd3-ssbar-xoa:hover,
.gd3-ssbar-xoa:focus-visible {
border-color: var(--aw-giam);
background: rgba(215, 0, 24, 0.16);
color: var(--aw-tren-chu);
}
/* Nut "So sanh (n)". To kieu DAY DU o day, KHONG muon .gd3-ch-nut cua
css/cua-hang.css: tep do chi nap o vai trang, ma thanh noi thi o moi trang. */
.gd3-ssbar-di {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border-radius: 8px;
border: 2px solid var(--aw-nhan);
background: var(--aw-nhan);
color: var(--aw-chu);
font-size: 14px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
}
.gd3-ssbar-di:hover {
background: var(--aw-chu);
color: var(--aw-nhan-sang);
text-decoration: none;
}
.gd3-ssbar-di.is-mo {
opacity: 0.45;
cursor: not-allowed;
}
/* Tren PC trang khong chua san cho o day (mobile da co 62px cho .gd3-tbd),
nen khi thanh so sanh hien no de len phan cuoi chan trang. Cong dung
chieu cao that cua thanh (bien --gd3-ssbar-lech do js/so-sanh.js dat,
bang 0px khi thanh dang an). */
@media (min-width: 768px) {
body {
padding-bottom: var(--gd3-ssbar-lech, 0px);
transition: padding-bottom 0.22s ease;
}
}
/* Lop .sr-only dung chung (chi doc man hinh doc, mat khong thay). Truoc
06/09/2026 no chi duoc khai trong pham vi .gd3-card-badge, nhung nut so
sanh va bang so sanh cung dung -> khai o day cho ca site. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Nut ⇄ tren the san pham (gd3_product_card) */
.gd3-ss-them {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--aw-ke);
color: var(--aw-chu);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
/* Truoc 06/09 nut nay `opacity: 0`, chi hien khi RE CHUOT vao the -
tuc tren PC khong ai biet co chuc nang so sanh tru khi tinh co re
trung. Nay luon hien nhung mo (0.5) de khong tranh cho voi gia va
huy hieu; re chuot vao the hoac vao chinh nut thi ro han. */
opacity: 0.5;
transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.product-item:hover .gd3-ss-them,
.gd3-ss-them:hover,
.gd3-ss-them.is-chon,
.gd3-ss-them:focus-visible {
opacity: 1;
}
.gd3-ss-them:hover {
background: var(--aw-nhan);
border-color: var(--aw-nhan);
color: var(--aw-chu);
}
.gd3-ss-them.is-chon {
background: var(--aw-chu);
border-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
/* Nut "So sanh xe nay" o TRANG CHI TIET: dung chung lop .gd3-ss-them de
js/so-sanh.js nhan ra, nhung kieu dang la mot nut binh thuong chu khong
phai vong tron noi tren anh -> ghi de lai. */
.gd3-ss-them.gd3-detail-ss {
position: static;
opacity: 1;
width: auto;
height: 38px;
border-radius: 8px;
padding: 0 14px;
gap: 8px;
font-size: 13.5px;
font-weight: 700;
background: var(--aw-the);
border: 1px solid var(--aw-ke-dam);
color: var(--aw-chu);
margin: 10px 0 0;
}
.gd3-ss-them.gd3-detail-ss:hover {
background: var(--aw-the);
border-color: var(--aw-nhan);
color: var(--aw-chu);
}
.gd3-ss-them.gd3-detail-ss.is-chon {
background: var(--aw-chu);
border-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
/* ==========================================================================
DANG CO SAN PHAM TRONG GIO SO SANH -> CAC NUT ⇄ KHAC DOI SANG NEN VANG
==========================================================================
Lop `gd3-ss-dang` do js/so-sanh.js dat tren khi danh sach so sanh
co it nhat 1 muc. Y do (yeu cau khach 06/09/2026, nhac lai 07/09): khach
dang so sanh do thi viec can lam tiep la CHON THEM - cac nut con lai phai
nhin ra ngay, khong de nua chim nua noi nhu binh thuong.
Nut tren THE san pham: binh thuong `opacity: .5`, nen trang - nen o day
phai ep `opacity: 1` nua, khong thi doi mau xong van mo.
Nut tren TRANG CHI TIET (.gd3-detail-ss): dung vang NHAT hon (var(--aw-nhan-nhat)),
vi no la nut chu nhat nam ngay duoi khoi mua hang - vang dac o do se
tranh cho voi nut "Mua ngay".
!!! 07/09/2026: KHOI NAY DA TUNG BI MAT MOT LAN. Toi sua main.css bang
cach chep de tu ban sao cu trong /mnt/user-data/uploads (dung 1h23p),
lam bay het cac luat .gd3-ss-dang va .gd3-ssbar-nhac. Bai hoc: LUON
device_stage_files lay ban MOI NHAT tu may khach ngay truoc khi sua,
dung tin ban sao con sot lai trong thu muc uploads. */
.gd3-ss-dang .gd3-ss-them:not(.is-chon) {
opacity: 1;
background: var(--aw-nhan);
border-color: var(--aw-nhan);
color: var(--aw-chu);
}
.gd3-ss-dang .gd3-ss-them:not(.is-chon):hover,
.gd3-ss-dang .gd3-ss-them:not(.is-chon):focus-visible {
background: var(--aw-chu);
border-color: var(--aw-chu);
color: var(--aw-nhan-sang);
}
.gd3-ss-dang .gd3-ss-them.gd3-detail-ss:not(.is-chon) {
background: var(--aw-nhan-nhat);
border-color: var(--aw-nhan);
color: var(--aw-chu);
}
.gd3-ss-dang .gd3-ss-them.gd3-detail-ss:not(.is-chon):hover,
.gd3-ss-dang .gd3-ss-them.gd3-detail-ss:not(.is-chon):focus-visible {
background: var(--aw-nhan);
border-color: var(--aw-nhan);
color: var(--aw-chu);
}
/* Dong bao ngan tren thanh so sanh noi ("Da bo X de them Y..."). js/so-sanh.js
bat/tat lop .is-hien, tu tat sau 6 giay.
KHONG dung transition/opacity o day - chi display. Day la cau khach BUOC
PHAI doc kip; neu de transition thi o xem truoc cua Claude (rAF bi dung khi
o dang an) no khong bao gio hien ra, va tren may that cung tre them. */
.gd3-ssbar-nhac {
display: none;
margin: 0 0 6px;
font-size: 13px;
line-height: 1.45;
color: var(--aw-nhan);
}
.gd3-ssbar-nhac.is-hien {
display: block;
}
@media (max-width: 767.98px) {
/* Thanh noi phai BAM THEO thanh cong cu day man hinh (.gd3-tbd), khong
duoc neo cung.
Truoc 06/09/2026 o day ghi `bottom: 58px` cho ca hai truong hop, ma
.gd3-tbd thi TU AN khi khach cuon LEN (menu-mobile.css: mac dinh
translateY(110%), chi hien khi body.gd3-cuon-xuong) - nen luc cuon
len, duoi thanh so sanh HO ra dung 58px trong tro (khach bao). Con
luc thanh day hien thi 58px cung sai: .gd3-tbd cao 62px + safe-area,
nen thanh so sanh de len mep tren cua no 4px.
Nay: thanh day AN -> thanh so sanh xuong sat day; thanh day HIEN ->
day len dung chieu cao that cua no. */
.gd3-ssbar {
bottom: 0;
}
body.gd3-cuon-xuong .gd3-ssbar {
bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}
.gd3-ssbar-nhan {
display: none;
}
.gd3-ssbar-o,
.gd3-ssbar-trong-o {
width: 46px;
height: 46px;
}
/* Bop cac khoang cach lai mot chut de du cho cho "Xoá hết". */
.gd3-ssbar-trong {
gap: 8px;
padding: 8px 0;
}
.gd3-ssbar-ds {
gap: 6px;
}
.gd3-ssbar-nut {
gap: 6px;
}
.gd3-ssbar-di {
height: 36px;
padding: 0 12px;
font-size: 13px;
}
.gd3-ssbar-trong-o {
font-size: 10px;
}
/* "Xoá hết" TUNG AN tren dien thoai de nhuong cho - nhung the la khach
khong con cach nao bo ca danh sach ngoai viec go tung xe mot (khach
bao 06/09/2026: "tren mobi toi ko thay cai chu xoa het dau"). Nay
hien lai, thu nho theo nut chinh. Cho lay tu dai anh thu nho ben
trai - dai do da co overflow-x nen chat thi no tu cuon ngang, khong
day gi ra ngoai man hinh. */
.gd3-ssbar-xoa {
flex: none;
height: 36px;
padding: 0 11px;
gap: 6px;
font-size: 12px;
}
.gd3-ssbar-xoa i {
font-size: 12px;
}
}
/* May rat hep (iPhone SE / mini, < 375px): bo CHU, giu icon thung rac -
dai anh thu nho ben trai la thu can cho nhat, khong nen de no phai cuon
ngang chi vi hai chu. Ten nut van doc duoc bang trinh doc man hinh
(aria-label) va bang tooltip (title). */
@media (max-width: 374.98px) {
.gd3-ssbar-xoa-chu {
display: none;
}
.gd3-ssbar-xoa {
width: 36px;
padding: 0;
gap: 0;
}
/* Nut ⇄ tren the: dien thoai khong co "re chuot" nen phai luon hien. */
.gd3-ss-them {
opacity: 1;
width: 28px;
height: 28px;
}
}
/* ==========================================================================
CHAT AI - KHUNG HOI THOAI (10/09/2026)
==========================================================================
Markup: inc/footer.php (#gd3Chat), hanh vi: js/chat.js, vi tri nut noi /
ban mobile toan man: css/menu-mobile.css. Tong mau den var(--aw-chu) - vang var(--aw-nhan)
nhu cac nut noi; bong bong khach = vang, bong bong AI = xam nhat. */
.gd3-chat {
position: fixed;
/* right 76px = 20px le + 44px cot nut tron + 12px: khung nam BEN TRAI cot
nut Zalo/Messenger/len dau, khong de len chung (do 10/09: right 20px che
mat 2 nut). */
right: 76px;
bottom: 20px;
width: 380px;
max-width: calc(100vw - 96px);
height: 600px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
background: var(--aw-the);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
overflow: hidden;
z-index: 1060;
font-size: 14px;
opacity: 0;
transform: translateY(12px) scale(0.98);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.gd3-chat[hidden] { display: none; }
.gd3-chat.is-mo { opacity: 1; transform: none; }
.gd3-chat-dau {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px 12px 14px;
background: var(--aw-chu);
color: var(--aw-tren-chu);
flex: 0 0 auto;
}
.gd3-chat-av {
width: 38px; height: 38px; border-radius: 50%;
background: var(--aw-nhan); color: var(--aw-chu);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex: 0 0 38px;
}
.gd3-chat-tt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.gd3-chat-tt b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd3-chat-tt small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--aw-chu-phu); }
.gd3-chat-cham { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25); flex: 0 0 8px; }
.gd3-chat.is-ngoai-gio .gd3-chat-cham { background: var(--aw-nhan); box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.25); }
.gd3-chat-nutdau {
width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
color: var(--aw-nhan); font-size: 15px; display: flex; align-items: center; justify-content: center;
cursor: pointer; text-decoration: none; flex: 0 0 34px; transition: background 0.15s ease, color 0.15s ease;
}
.gd3-chat-nutdau:hover, .gd3-chat-nutdau:focus { background: var(--aw-nhan); color: var(--aw-chu); text-decoration: none; outline: 0; }
.gd3-chat-than {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px 12px 6px;
background: var(--aw-nen-2);
display: flex;
flex-direction: column;
gap: 8px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.gd3-chat-bb {
max-width: 86%;
padding: 9px 12px;
border-radius: 14px;
line-height: 1.45;
word-wrap: break-word;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.gd3-chat-bb ul { margin: 4px 0 0; padding-left: 18px; white-space: normal; }
.gd3-chat-bb li { margin: 2px 0; }
.gd3-chat-bb.is-khach { align-self: flex-end; background: var(--aw-nhan); color: var(--aw-chu); border-bottom-right-radius: 4px; }
.gd3-chat-bb.is-ai { align-self: flex-start; background: var(--aw-the); color: var(--aw-chu); border: 1px solid var(--aw-ke); border-bottom-left-radius: 4px; }
.gd3-chat-bb.is-he { align-self: center; background: transparent; color: var(--aw-chu-phu); font-size: 12px; padding: 2px 6px; text-align: center; }
.gd3-chat-bb.is-loi { align-self: flex-start; background: var(--aw-nen-2); color: var(--aw-giam); border: 1px solid var(--aw-ke-dam); }
/* Loi nhan cua NHAN VIEN THAT (truc chat, 14/09/2026) - phai khac han bong
bong cua AI: khach can biet ngay minh dang noi voi nguoi hay voi may. */
.gd3-chat-bb.is-nv { align-self: flex-start; background: var(--aw-nen-2); color: var(--aw-chu); border: 1px solid var(--aw-ke-dam); border-bottom-left-radius: 4px; }
.gd3-chat-nguoi.is-truc { text-align: center; }
.gd3-chat-truc-nut { display: inline-block; margin-top: 6px; padding: 9px 18px; border: 0; border-radius: 20px; background: var(--aw-chu); color: var(--aw-nhan-sang); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.gd3-chat-truc-nut:hover { background: var(--aw-chu); }
.gd3-chat-truc-nut:disabled { opacity: .65; cursor: default; }
.gd3-chat-luc { display: block; font-size: 10.5px; color: var(--aw-chu-phu); margin-top: 3px; white-space: normal; }
.gd3-chat-bb.is-khach .gd3-chat-luc { color: rgba(0, 0, 0, 0.55); text-align: right; }
/* Dang go "..." */
.gd3-chat-go { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; background: var(--aw-the); border: 1px solid var(--aw-ke); border-radius: 14px; border-bottom-left-radius: 4px; }
.gd3-chat-go i { width: 7px; height: 7px; border-radius: 50%; background: var(--aw-chu-phu); animation: gd3ChatGo 1s infinite ease-in-out; }
.gd3-chat-go i:nth-child(2) { animation-delay: 0.15s; }
.gd3-chat-go i:nth-child(3) { animation-delay: 0.3s; }
@keyframes gd3ChatGo { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-4px); opacity: 1; } }
/* The san pham goi y (duoi cau tra loi AI) */
.gd3-chat-sps { align-self: stretch; display: flex; flex-direction: column; gap: 6px; margin: -2px 0 2px; }
.gd3-chat-sp {
display: flex; align-items: center; gap: 10px;
background: var(--aw-the); border: 1px solid var(--aw-ke); border-radius: 12px; padding: 7px 10px 7px 7px;
color: var(--aw-chu); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gd3-chat-sp:hover, .gd3-chat-sp:focus { border-color: var(--aw-nhan); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); color: var(--aw-chu); text-decoration: none; }
.gd3-chat-sp-anh { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: var(--aw-nen); flex: 0 0 52px; }
.gd3-chat-sp-anh.is-bai { display: flex; align-items: center; justify-content: center; color: var(--aw-nhan-dam); font-size: 20px; }
.gd3-chat-sp-tt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.gd3-chat-sp-tt b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd3-chat-sp-tt em { font-style: normal; color: #d31600; font-weight: 700; font-size: 13px; }
.gd3-chat-sp-tt em small { color: var(--aw-chu-phu); font-weight: 500; font-size: 11px; }
.gd3-chat-sp > i { color: var(--aw-chu-phu); font-size: 13px; flex: 0 0 auto; }
/* O de lai so dien thoai (chuyen nguoi) */
.gd3-chat-nguoi { align-self: stretch; background: var(--aw-the); border: 1px solid var(--aw-nhan); border-radius: 12px; padding: 10px 12px; }
.gd3-chat-nguoi p { margin: 0 0 8px; font-size: 13px; color: var(--aw-chu-2); }
.gd3-chat-nguoi form { display: flex; gap: 6px; }
.gd3-chat-nguoi input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--aw-ke); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.gd3-chat-nguoi input:focus { outline: 0; border-color: var(--aw-nhan); box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.25); }
.gd3-chat-nguoi button { flex: 0 0 auto; border: 0; border-radius: 8px; background: var(--aw-chu); color: var(--aw-nhan-sang); font-weight: 600; padding: 8px 12px; cursor: pointer; }
.gd3-chat-nguoi button:hover { background: var(--aw-nhan); color: var(--aw-chu); }
.gd3-chat-nguoi button[disabled] { opacity: 0.6; cursor: default; }
.gd3-chat-nguoi small { display: block; margin-top: 7px; font-size: 12px; color: var(--aw-chu-phu); }
.gd3-chat-nguoi small a { color: var(--aw-chu); font-weight: 600; }
.gd3-chat-nguoi .is-xong { color: #1a7f37; font-weight: 600; margin: 0; }
.gd3-chat-nguoi .is-loi { color: var(--aw-giam); font-size: 12px; margin: 6px 0 0; }
/* Cau goi y san (chips) */
.gd3-chat-chips { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px 8px; background: var(--aw-nen-2); scrollbar-width: none; }
.gd3-chat-chips::-webkit-scrollbar { display: none; }
.gd3-chat-chips:empty { display: none; }
.gd3-chat-chip {
flex: 0 0 auto; border: 1px solid var(--aw-ke); background: var(--aw-the); color: var(--aw-chu-2); border-radius: 999px;
padding: 6px 11px; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease;
}
.gd3-chat-chip:hover { border-color: var(--aw-nhan); background: var(--aw-nhan-nhat); }
/* O nhap */
.gd3-chat-nhap { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--aw-ke); background: var(--aw-the); }
.gd3-chat-nhap input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--aw-ke); border-radius: 999px; padding: 10px 14px; font-size: 14px; background: var(--aw-nen); }
.gd3-chat-nhap input:focus { outline: 0; border-color: var(--aw-nhan); background: var(--aw-the); box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.25); }
.gd3-chat-nhap button { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--aw-chu); color: var(--aw-nhan-sang); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; }
.gd3-chat-nhap button:hover { background: var(--aw-nhan); color: var(--aw-chu); }
.gd3-chat-nhap button[disabled] { opacity: 0.5; cursor: default; }
.gd3-chat-chan { flex: 0 0 auto; padding: 0 12px 9px; font-size: 11px; color: var(--aw-chu-phu); background: var(--aw-the); text-align: center; }
.gd3-chat-chan button { border: 0; background: none; color: var(--aw-chu); font-weight: 600; font-size: 11px; padding: 0; cursor: pointer; text-decoration: underline; }
.gd3-chat-chan button:hover { color: var(--aw-nhan-dam); }
/* Nut noi "Chat AI": nhan chu nho ben trai nut tron, hien khi re chuot (desktop). */
.gd3-fab-chat { border: 0; cursor: pointer; }
.gd3-fab-chat i { font-size: 20px; }
.gd3-fab-chat-nhan {
position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px);
background: var(--aw-chu); color: var(--aw-nhan-sang); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.gd3-fab-chat:hover .gd3-fab-chat-nhan, .gd3-fab-chat:focus .gd3-fab-chat-nhan { opacity: 1; transform: translateY(-50%) translateX(0); }
.gd3-fab-chat .gd3-fab-cham { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--aw-chu); }
.gd3-fab-chat.is-an { opacity: 0; visibility: hidden; pointer-events: none; }