đó
`background:url(../Images/*.png)` + `padding-left:30~32px` để chừa chỗ cho
biểu tượng. Nhưng TOÀN BỘ ảnh trong ../Images/ không có trong bộ file đã
lưu (404) — chỉ còn lại khoảng trống 32px vô nghĩa, cộng thêm 27px đệm của
dòng thành ~59px hở giữa icon và chữ.
→ Gỡ đệm + ảnh nền của
con; biểu tượng nay do ::before của dòng vẽ.
--------------------------------------------------------------------------*/
.endrightdetails .vanchuyenvalapdat > div,
.endrightdetails .conglapdat > div,
.endrightdetails .phukiendikem > div,
.endrightdetails .doitramienphi > div,
.endrightdetails .baohanh > div,
.endrightdetails .huongdantragop > div{
padding:0;
background:none;
}
/* tiêu đề dài, cột chỉ ~250px → cho ngắt dòng cân đối thay vì rơi lẻ 1 chữ */
.yentammuahang > div{
font-size:var(--hh-fs-base);
text-wrap:balance;
}
/*==========================================================================
16. BỐ CỤC ĐỢT 4 — bám theo bản vẽ của người dùng
==========================================================================*/
/*--------------------------------------------------------------------------
16.1 SẮP XẾP LẠI THỨ TỰ CỘT GIỮA
Thứ tự mong muốn (theo bản vẽ):
giá → CÒN HÀNG → QUÀ TẶNG → [Trả góp][Thêm giỏ] → [MUA NGAY]
→ DEAL đếm ngược → CHẤP NHẬN THANH TOÁN → showroom → ghi chú
Làm bằng `order` của flex, KHÔNG di chuyển thẻ trong HTML — đổi lại thứ tự
chỉ cần sửa vài con số ở đây.
Nhóm nút + thanh toán nằm chung trong một thẻ bọc, nên thẻ bọc đó phải
`display:contents` thì các con mới tham gia xếp thứ tự được.
--------------------------------------------------------------------------*/
#divcentercoldetailsitem{
display:flex;
flex-direction:column;
align-items:stretch;
}
#divcentercoldetailsitem > div[style*="margin-left"]{
display:contents;
}
#divcentercoldetailsitem > .showprice{ order:1; }
#divcentercoldetailsitem > .divtonkho{ order:2; }
#divcentercoldetailsitem > .outquatangkhuyenmaichitietsanpham{ order:5; }
#divcentercoldetailsitem .hh-hang-nut-mua{ order:6; }
#divcentercoldetailsitem .hh-hang-mua-ngay{ order:7; }
#divcentercoldetailsitem .divbuttonsales.w49pecent,
#divcentercoldetailsitem > div[style*="margin-left"] > div:not([class]){ order:8; }
#divcentercoldetailsitem > #divcountdown{ order:9; }
#divcentercoldetailsitem .hh-thanhtoan{ order:10; }
#divcentercoldetailsitem > #showattributetop{ order:3; }
#divcentercoldetailsitem > .hh-showroom{ order:4; }
#divcentercoldetailsitem > .ghichuquatang{ order:11; }
/* các khối ẩn đẩy xuống cuối cho khỏi chen vào giữa */
#divcentercoldetailsitem > #pricetwocol,
#divcentercoldetailsitem > #itempriceonlineclass,
#divcentercoldetailsitem > #itempricesalesclass,
#divcentercoldetailsitem > .notetonkho,
#divcentercoldetailsitem > div[style*="clear"]{ order:0; }
/* khoảng cách giữa các khối trong cột giữa */
#divcentercoldetailsitem > .divtonkho{ margin-bottom:12px; }
#divcentercoldetailsitem > .hh-showroom{ margin:8px; }
#divcentercoldetailsitem > .ghichuquatang{ margin:12px 0 0; }
#divcentercoldetailsitem > #divcountdown{ margin:14px 0 0; }
#divcentercoldetailsitem .hh-thanhtoan{ margin-top:14px; }
/*--------------------------------------------------------------------------
16.2 KHỐI QUÀ TẶNG — nay đã có nội dung
--------------------------------------------------------------------------*/
.outquatangkhuyenmaikhuyenmai,
.outquatangkhuyenmaichitietsanpham{
margin-bottom:0;
}
/*.hh-ds-qua{
margin:6px 0 0;
padding:0 0 0 20px;
list-style:decimal;
color:var(--hh-text-body);
font-size:var(--hh-fs-base);
line-height:1.7;
}
.hh-ds-qua li{
padding-left:2px;
}
.hh-ds-qua li::marker{
color:var(--hh-primary);
font-weight:600;
}*/
.hh-ds-qua{
margin:6px 0 0;
padding:0 0 0 2px;
list-style:decimal;
color:var(--hh-text-body);
font-size:var(--hh-fs-base);
line-height:1.7;
}
.hh-ds-qua span{
color:var(--hh-primary);
font-weight:600;
padding-right:2px;
}
.hh-ds-qua::marker {
content: none;
}
.hh-ds-qua li {
display: inline;
}
/*--------------------------------------------------------------------------
16.3 ĐẾM NGƯỢC — bố cục theo bản vẽ
Trái: "DEAL HỜI LỜI TO" trên, "Kết Thúc Sau" dưới. Phải: các ô số.
.indivdetailscountdown phải display:contents thì .chicontext (nằm bên
trong nó) mới xếp được sang cột trái cùng tiêu đề.
--------------------------------------------------------------------------*/
.divdetailscountdown{
display:grid;
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:
"tieude dongho"
"ketthuc dongho";
align-items:center;
gap:0 14px;
padding:10px 14px;
}
.indivdetailscountdown{
display:contents;
}
.titlecountdount{ grid-area:tieude; }
.chicontext{ grid-area:ketthuc; order:0; }
.clockcountdount{
grid-area:dongho;
justify-self:end;
}
#titleleftcountdown{
font-size:var(--hh-fs-base);
}
.chicontext{
font-size:var(--hh-fs-sm);
}
/*--------------------------------------------------------------------------
16.4 BANNER KHUYẾN MÃI Ở CỘT PHẢI
--------------------------------------------------------------------------*/
/*.hh-banner-qc{
display:flex;
flex-direction:column;
gap:12px;
margin-top:12px;
}*/
.hh-banner-qc {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
/*.hh-banner-qc__item{
display:block;
border-radius:var(--hh-radius-lg);
overflow:hidden;
box-shadow:var(--hh-shadow-xs);
transition:box-shadow var(--hh-transition),transform var(--hh-transition);
}*/
.hh-banner-qc__item {
display: block;
width: 100%;
overflow: hidden;
}
.hh-banner-qc__item:hover{
box-shadow:var(--hh-shadow-md);
transform:translateY(-2px);
}
/*.hh-banner-qc__item img{
display:block;
width:100%;
height:auto;
}*/
.hh-banner-qc__item img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
/* banner nằm NGOÀI thẻ trắng của cột chính sách */
#divrightcoldetailsitem{
background:transparent;
border:none;
box-shadow:none;
overflow:visible;
}
#indivrightcoldetailsitem{
border:1px solid var(--hh-border);
border-radius:var(--hh-radius-lg);
background:var(--hh-white);
box-shadow:var(--hh-shadow-xs);
overflow:hidden;
}
/*--------------------------------------------------------------------------
16.5 THÔNG SỐ KỸ THUẬT — cao bằng mép dưới cột giữa
Chiều cao do JS đo và đặt vào biến --hh-thongso-cao (mỗi sản phẩm, mỗi bề
rộng màn hình một khác nên không thể viết cứng).
--------------------------------------------------------------------------*/
#outdivattributeitemright{
max-height:var(--hh-thongso-cao,190px);
overflow:hidden;
transition:max-height var(--hh-transition-slow);
}
/*--------------------------------------------------------------------------
16.6 SỬA CÁC LỖI PHÁT SINH KHI CHUYỂN CỘT GIỮA SANG FLEX
--------------------------------------------------------------------------*/
/* Cột giữa nay là flex column với align-items:stretch → mấy phần tử vốn
"co theo nội dung" bị kéo dài hết bề ngang. Trả chúng về đúng bề rộng. */
#divcentercoldetailsitem > .divtonkho{
align-self:flex-start;
}
/* Thẻ
nằm ngay sau cột phải là con của lưới nhưng
không được gán grid-area → tự nhảy vào ô trống, đội thêm một hàng rỗng. */
#divitembasedetails > div[style*="clear"]{
display:none;
}
/*--------------------------------------------------------------------------
16.7 ĐẾM NGƯỢC — gọn đúng như bản vẽ
Trái: tiêu đề trên, "kết thúc sau" ngay dưới. Phải: 4 cụm số sát mép phải.
--------------------------------------------------------------------------*/
.divdetailscountdown{
gap:2px 16px;
padding:12px 14px;
}
.titlecountdount{
align-self:end;
}
.chicontext{
align-self:start;
line-height:1.3;
}
/* itemv168.css đặt float:right cho .clockcountdount — float làm hỏng
justify-self của grid, phải gỡ. */
.clockcountdount{
float:none;
justify-self:end;
align-self:center;
grid-row:1 / 3;
gap:10px;
}
.divtimeepoch > div{
gap:3px;
}
/*--------------------------------------------------------------------------
16.8 CHỐT CHIỀU CAO KHUNG THÔNG SỐ
Dùng `height` (không phải `max-height`): max-height chỉ CẮT BỚT, nội dung
ngắn hơn thì khung co lại và mép dưới lại lệch với cột bên cạnh.
--------------------------------------------------------------------------*/
#outdivattributeitemright{
height:var(--hh-thongso-cao,auto);
max-height:none;
overflow:hidden;
}
/* JS đã chuyển .chicontext ra làm con trực tiếp của .divdetailscountdown,
nên không cần display:contents nữa — gỡ để bố cục ổn định. */
.indivdetailscountdown{
display:flex;
align-items:center;
justify-content:flex-end;
grid-area:dongho;
}
/*--------------------------------------------------------------------------
16.9 ĐẾM NGƯỢC — bản chốt (một hàng flex, không dùng grid)
JS đã gom tiêu đề + "kết thúc sau" vào .hh-dem-trai, nên khối này chỉ còn
hai phần tử: khối chữ bên trái, đồng hồ bên phải.
--------------------------------------------------------------------------*/
.divdetailscountdown{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px 16px;
padding:11px 14px;
}
.hh-dem-trai{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.hh-dem-trai .titlecountdount,
.hh-dem-trai .chicontext{
grid-area:auto;
align-self:auto;
order:0;
margin:0;
padding:0;
}
.indivdetailscountdown{
display:flex;
align-items:center;
justify-content:flex-end;
flex:0 0 auto;
grid-area:auto;
margin:0;
padding:0;
background:none;
}
.clockcountdount{
float:none;
grid-area:auto;
grid-row:auto;
justify-self:auto;
display:flex;
align-items:flex-start;
gap:8px;
padding:0;
}
/* thẻ clear:both rỗng của bản gốc nằm lẫn trong khối — ẩn đi */
.divdetailscountdown > div[style*="clear"]{
display:none;
}
/*--------------------------------------------------------------------------
16.10 THU NHỎ ĐỒNG HỒ CHO VỪA MỘT HÀNG
Cột giữa chỉ rộng ~395px. Tiêu đề ~170px + đồng hồ ~250px vượt quá chỗ nên
flex tự xuống dòng, đồng hồ rơi xuống dưới — sai bản vẽ.
Thu ô số còn 18px thì tổng ~362px, vừa đúng một hàng.
--------------------------------------------------------------------------*/
.clockcountdount{
gap:7px;
}
.divtimeepoch > div{
gap:2px;
}
.initemtime > div > div{
width:18px;
font-size:16px;
}
#titleleftcountdown{
letter-spacing:.1px;
white-space:nowrap;
}
.texttime{
font-size:10px;
}
/*--------------------------------------------------------------------------
16.11 ĐẾM NGƯỢC — chốt hẳn một hàng
Đo thực tế: khối chữ bên trái chiếm trọn 366px (cả bề ngang) nên đồng hồ bị
đẩy xuống hàng dưới. Ép rõ ràng: khối chữ co giãn được, đồng hồ giữ nguyên
kích thước, và CẤM xuống dòng.
--------------------------------------------------------------------------*/
.divdetailscountdown{
flex-wrap:nowrap;
align-items:center;
justify-content:space-between;
}
.hh-dem-trai{
flex:1 1 auto;
min-width:0;
width:auto;
}
.indivdetailscountdown{
flex:0 0 auto;
width:auto;
}
/*--------------------------------------------------------------------------
16.12 ĐẾM NGƯỢC — cân lại bề ngang
Đo được: đồng hồ chiếm 277px trong khung 366px, chỉ còn 89px cho tiêu đề
→ tiêu đề (có white-space:nowrap) TRÀN RA và bị các ô số đè lên.
→ Khối chữ KHÔNG được co (flex:0 0 auto); đồng hồ thu nhỏ lại cho vừa.
Nếu vẫn chật thì cho xuống dòng — thà xuống dòng còn hơn đè chữ.
--------------------------------------------------------------------------*/
.divdetailscountdown{
flex-wrap:wrap;
row-gap:8px;
}
.hh-dem-trai{
flex:0 0 auto;
}
.indivdetailscountdown{
flex:1 1 auto;
justify-content:flex-end;
}
.clockcountdount{
gap:5px;
}
.initemtime > div > div{
width:16px;
font-size:15px;
}
.divtimeepoch > div{
gap:1px;
}
#titleleftcountdown{
font-size:13px;
gap:5px;
}
#titleleftcountdown::before{
font-size:12px;
}
.chicontext{
font-size:var(--hh-fs-xs);
}
/*--------------------------------------------------------------------------
16.13 ĐẾM NGƯỢC — khoá bề rộng cụm theo Ô SỐ, không theo nhãn
Đo được: hai ô số chỉ rộng 33px nhưng NHÃN ("ngày", "giờ"…) rộng tới 56px,
nên chính cái nhãn mới là thứ kéo cụm to ra: 4 cụm = 233px, cộng khối chữ
137px thì vượt khung 366px → xuống dòng.
→ Chốt bề rộng cụm đúng bằng hai ô số; nhãn canh giữa trong bề rộng đó.
--------------------------------------------------------------------------*/
.divtimeepoch > div{
width:35px; /* 2 ô × 16px + 1px khe */
flex:0 0 35px;
}
.divtimeepoch > div > .texttime{
flex:0 0 100%;
width:100%;
font-size:10px;
letter-spacing:-.2px;
}
/*==========================================================================
17. TINH CHỈNH ĐỢT 5
==========================================================================*/
/*--------------------------------------------------------------------------
17.1 KÉO "CÒN HÀNG" + "QUÀ TẶNG" LÊN SÁT GIÁ,
ĐỒNG THỜI TÁCH HẲN KHỎI HAI NÚT BÊN DƯỚI
--------------------------------------------------------------------------*/
#divcentercoldetailsitem > .showprice{
margin-bottom:6px;
}
#divcentercoldetailsitem > #itempricenyclass,
.showprice #itempricenyclass{
margin-bottom:0;
}
#divcentercoldetailsitem > .divtonkho{
margin:0 0 8px;
}
#divcentercoldetailsitem > .outquatangkhuyenmaichitietsanpham{
margin:0 0 20px; /* khoảng hở tách khỏi nhóm nút */
}
/*--------------------------------------------------------------------------
17.2 ĐẾM NGƯỢC — hai chữ số GỘP THÀNH MỘT Ô như bản mẫu
Bản trước mỗi chữ số một ô rời nên "19" đọc ra thành "1 9".
Nay dán liền: ô trái bo góc trái, ô phải bo góc phải, giữa có vạch mảnh.
--------------------------------------------------------------------------*/
.divtimeepoch > div{
width:38px;
flex:0 0 38px;
gap:0;
}
.initemtime > div > div{
width:19px;
font-size:16px;
}
.itemtime{
border-radius:0;
box-shadow:none;
}
.itemtime:first-of-type{
border-radius:var(--hh-radius-xs) 0 0 var(--hh-radius-xs);
box-shadow:inset -1px 0 0 rgba(255,255,255,.22);
}
.itemtime:first-of-type + .itemtime{
border-radius:0 var(--hh-radius-xs) var(--hh-radius-xs) 0;
}
.texttime{
margin-top:4px;
}
/*--------------------------------------------------------------------------
17.3 "YÊN TÂM MUA HÀNG" — chữ cuối đang sát viền dưới
--------------------------------------------------------------------------*/
.itemindivrightcoldetailsitem.endrightdetails{
padding:16px 18px 20px;
}
#indivrightcoldetailsitem .itemindivrightcoldetailsitem .initemindivrightcoldetailsitem:last-child{
margin-bottom:0;
padding-bottom:2px;
}
/*==========================================================================
18. TINH CHỈNH ĐỢT 6
==========================================================================*/
/*--------------------------------------------------------------------------
18.1 KHUNG ẢNH SẢN PHẨM — nền trắng, ảnh nhỏ có khung vuông mờ
--------------------------------------------------------------------------*/
#divimageshow{
background:var(--hh-white);
}
/* Nền khung ảnh nay trắng nên ảnh nhỏ (cũng nền trắng) sẽ chìm mất.
Cho mỗi ảnh nhỏ một khung VUÔNG mờ để tách khỏi nền. */
#divimagelist .imginlistimg{
border:1px solid var(--hh-border-strong);
border-radius:3px;
background:var(--hh-white);
}
#divimagelist .imginlistimg:hover{
border-color:var(--hh-primary);
}
/*--------------------------------------------------------------------------
18.2 QUÀ TẶNG — cỡ chữ bằng khung "Yên tâm mua hàng" (13px)
--------------------------------------------------------------------------*/
.hh-ds-qua{
font-size:13px;
line-height:1.65;
}
.titledacdiemnoibat{
font-size:var(--hh-fs-sm);
}
/*--------------------------------------------------------------------------
18.3 ĐẾM NGƯỢC — thấp bớt, hai dòng chữ căn lề phải cho thẳng nhau
--------------------------------------------------------------------------*/
.divdetailscountdown{
padding:8px 14px;
gap:6px 14px;
}
.hh-dem-trai{
align-items:flex-end; /* hai dòng chữ thẳng mép PHẢI */
text-align:right;
gap:1px;
}
#titleleftcountdown{
justify-content:flex-end;
}
.texttime{
margin-top:3px;
}
/*--------------------------------------------------------------------------
18.4 "YÊN TÂM MUA HÀNG" — chữ đang cách viền đúng 1px
LỖI ĐÃ SỬA: mục 15.5 đặt
#indivrightcoldetailsitem .itemindivrightcoldetailsitem { padding:0 }
với độ ưu tiên (1,2,0), cao hơn quy tắc đặt đệm 18px viết ở mục 17.3 với
độ ưu tiên (0,2,0) → đệm chưa bao giờ có hiệu lực, chữ sát viền.
Viết lại đúng mức ưu tiên (1,3,0) mới ăn.
--------------------------------------------------------------------------*/
#indivrightcoldetailsitem .itemindivrightcoldetailsitem.endrightdetails{
padding:16px 18px 20px;
}
#indivrightcoldetailsitem .itemindivrightcoldetailsitem.endrightdetails .vanchuyenvalapdat,
#indivrightcoldetailsitem .itemindivrightcoldetailsitem.endrightdetails .initemindivrightcoldetailsitem{
padding-right:0;
padding-left:26px;
}
/*==========================================================================
19. TINH CHỈNH ĐỢT 7
==========================================================================*/
/*--------------------------------------------------------------------------
19.1 BỎ GHIM CỘT ẢNH — cho trượt theo trang
Mục 03 đặt position:sticky nên khi lăn chuột, khung ảnh đứng yên còn phần
còn lại chạy qua, tạo cảm giác "bị ghim". Người dùng muốn nó trôi bình
thường theo trang.
(Cột chính sách bên phải cũng đang sticky — KHÔNG động tới, người dùng
chưa yêu cầu.)
--------------------------------------------------------------------------*/
#divimagecoldetailsitem{
position:static;
top:auto;
}
/*--------------------------------------------------------------------------
19.2 ẢNH NHỎ — viền đậm hơn cho rõ khung
--hh-border-strong (#D5DAE3) vẫn nhạt, nhìn gần như không thấy khung.
--------------------------------------------------------------------------*/
/* ĐÂY LÀ CHỖ DUY NHẤT TRONG DỰ ÁN DÙNG !important — và có lý do:
mỗi ảnh nhỏ mang style NỘI TUYẾN `border: 1px solid rgb(248,248,248)`
(còn lại từ bản lưu máy chủ), và hàm ClickImageSelect() của itemv18.js
GHI LẠI style nội tuyến mỗi lần bấm ảnh. Style nội tuyến thắng mọi
selector, kể cả selector có ID → !important là cách duy nhất thắng được.
Đã thử gỡ style nội tuyến bằng JS: itemv18.js ghi lại ngay, đo ra viền
mỗi ảnh một kiểu. Nay để nó ghi thoải mái, hh-product-2026.js chỉ ĐỌC
màu đó để gắn class .hh-anh-chon cho ảnh đang xem. */
#divimagelist .imginlistimg{
border:1px solid #A8B0BF !important;
background:var(--hh-white);
}
#divimagelist .imginlistimg:hover{
border-color:var(--hh-primary) !important;
}
/* ảnh đang xem — giữ đúng màu cam của bản gốc, chỉ dày lên cho dễ thấy */
#divimagelist .imginlistimg.hh-anh-chon{
border:2px solid #EFAB07 !important;
padding:4px;
}
/*--------------------------------------------------------------------------
19.3 ĐẾM NGƯỢC — GIỮ NGUYÊN CHIỀU CAO, PHÓNG TO CHỮ VÀ SỐ
--------------------------------------------------------------------------
Bản trước gọn nhưng chữ số 16px trong khung cao 74px trông bé và trống
trải; nhãn 10px thì gần như không đọc được, nên nhìn "lệch lung tung".
RÀNG BUỘC KHÔNG ĐƯỢC PHÁ: ô chữ số vẫn PHẢI cao đúng 31px — JS chạy đồng
hồ bằng cách cuộn dải 0–9 với bước margin-top = -31px × chữ số (xem ERR-012).
Nên chỉ phóng to CỠ CHỮ và BỀ NGANG ô, tuyệt đối không đổi chiều cao ô.
Ngân sách bề ngang (ERR-017 — phải tính, không được đoán): khung trong rộng
~365px. Đồng hồ = 4 cụm × 44px + 3 khe × 5px = 191px, khối chữ ~160px,
khe giữa 12px ⇒ 363px. Vừa khít, không xuống dòng.
--------------------------------------------------------------------------*/
.divdetailscountdown{
padding:11px 12px;
gap:6px 12px;
}
/* THỦ PHẠM làm chữ tràn và đồng hồ rơi xuống dòng:
itemv168.css có `#titleleftcountdown{float:left; padding:10px; padding-top:11px}`.
Mục 12 khi viết lại tiêu đề chỉ gỡ `float`, QUÊN gỡ `padding` — mà selector kia
là ID (1,0,0) nên mọi quy tắc bằng class đều thua. Cái đệm 10px đó cộng thêm
20px bề ngang + 21px chiều cao cho khối chữ: tiêu đề bị ép xuống 2 dòng (cao 44px
thay vì 22px) và cụm chữ chiếm 156px thay vì 136px.
Cùng loại lỗi với ERR-019 — xem bài học 14. */
#titleleftcountdown{
padding:0;
}
/* --- chữ số --- */
.initemtime > div > div{
width:22px;
font-size:21px;
font-weight:700;
}
.divtimeepoch > div{
width:44px; /* 2 ô × 22px, dán liền nhau */
flex:0 0 44px;
}
.clockcountdount{
gap:5px;
}
/* --- nhãn ngày/giờ/phút/giây --- */
.divtimeepoch > div > .texttime,
.texttime{
font-size:12px;
letter-spacing:0;
line-height:1.25;
margin-top:4px;
}
/* --- hai dòng chữ bên trái --- */
#titleleftcountdown{
font-size:15px;
letter-spacing:.2px;
}
#titleleftcountdown::before{
font-size:14px;
}
.chicontext{
font-size:15px;
}
.hh-dem-trai{
gap:2px;
}
/*==========================================================================
20. TINH CHỈNH ĐỢT 8
==========================================================================*/
/*--------------------------------------------------------------------------
20.1 ICON HỘP QUÀ CẠNH CHỮ "QUÀ TẶNG"
Dùng Font Awesome đã nhúng sẵn (\f06b = fa-gift), không thêm file ảnh.
--------------------------------------------------------------------------*/
.titledacdiemnoibat{
display:flex;
align-items:center;
gap:7px;
}
.titledacdiemnoibat::before{
content:"\f06b";
font-family:"Font Awesome 6 Free";
font-weight:900;
font-size:13px;
color:var(--hh-primary);
flex:0 0 auto;
}
/*--------------------------------------------------------------------------
20.2 BỎ VIỀN VÀNG CAM Ở ẢNH NHỎ
Mục 19.2 đánh dấu ảnh đang xem bằng viền cam #EFAB07 (màu của bản gốc).
Người dùng không muốn hiệu ứng này → mọi ảnh nhỏ dùng chung một kiểu viền.
Class .hh-anh-chon do JS gắn vẫn còn (vô hại), để nguyên phòng khi cần
đánh dấu lại bằng kiểu khác.
--------------------------------------------------------------------------*/
#divimagelist .imginlistimg.hh-anh-chon{
border:1px solid #A8B0BF !important;
padding:5px;
}
/*--------------------------------------------------------------------------
20.3 THANH "THÔNG SỐ KỸ THUẬT" — nền ghi phải tràn hết bề ngang khung
--------------------------------------------------------------------------
Nền ghi đứt một đoạn ~8px ở mép phải. Nguyên nhân: itemv168.css có
`.inoutthongsokythuatbottomimage{ margin-right:8px; padding:8px }`.
Mục 08 khi viết lại đã gỡ `padding` và `border` nhưng BỎ SÓT `margin-right`
→ thẻ trong hụt 8px so với khung ngoài, đúng bằng đoạn nền bị đứt.
(Cùng loại lỗi với bài học 17: viết lại khối cũ thì phải gỡ HẾT thuộc tính.)
--------------------------------------------------------------------------*/
.inoutthongsokythuatbottomimage{
margin:0;
}
/*==========================================================================
21. HÀNG THÔNG TIN DƯỚI TÊN SẢN PHẨM
★ đánh giá | đã bán | so sánh
--------------------------------------------------------------------------
Bản mẫu người dùng gửi xếp hàng này NGANG HÀNG với tên sản phẩm. Ở trang
này không đặt cùng hàng được: tên dài "Máy tính xách tay HP Pavilion X360
14-ek1046TU_80R24PA (màu bạc)" ở cỡ 26px đã chiếm ~900px trong cột 1200px,
chỉ còn ~300px trong khi ba mục cần ~380px ⇒ sẽ gãy dòng xấu.
→ Đặt xuống ngay dưới tên, cùng mép trái. Vẫn là một cụm liền mạch, và với
tiêu đề cỡ lớn thì kiểu này còn dễ đọc hơn.
==========================================================================*/
/* Bản gốc cho các thẻ con của khối tên `float:left` nên không kiểm soát được
vị trí. Chuyển hẳn sang flex.
ĐẶT CÙNG MỘT HÀNG VỚI TÊN — số đo cho thấy vừa:
cột 1180px · tên 26px chiếm 801px · hàng thông tin 312px
801 + 18 (khe) + 312 = 1131 ⇒ vừa, nhưng chỉ dư 49px.
Hạ tên xuống 22px cho chắc: tên còn ~678px ⇒ tổng 1008px, dư 172px, tên dài
hơn sản phẩm này vẫn không gãy hàng. `flex-wrap:wrap` là lưới an toàn: tên
nào quá dài thì hàng thông tin tự rơi xuống dòng dưới chứ không tràn ra. */
#itemnameclass{
display:flex;
flex-direction:row;
align-items:center;
flex-wrap:wrap;
gap:4px 18px;
}
.initemnameclass,
#itemnameclass .linkfacebook{
float:none;
width:auto;
}
/* tên nhỏ lại một nấc để hàng thông tin lên cùng hàng */
.initemnameclass{
flex:0 1 auto;
min-width:0;
font-size:22px;
line-height:1.3;
}
#itemnameclass > div[style*="clear"]{
display:none;
}
.hh-sp-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
flex:0 0 auto;
gap:0 12px;
margin-top:0;
padding-top:3px; /* hạ nhẹ cho thẳng thị giác với chữ tiêu đề */
color:var(--hh-text-light);
font-size:13px;
line-height:1.5;
}
.hh-sp-meta b{
color:var(--hh-text);
font-weight:700;
}
/* --- ngôi sao + điểm --- */
.hh-sp-danhgia{
display:inline-flex;
align-items:center;
gap:5px;
}
.hh-sp-danhgia i{
color:#F5A623; /* vàng sao — màu duy nhất ngoài bảng màu chính,
dùng đúng chỗ này vì ngôi sao xám thì vô nghĩa */
font-size:13px;
}
.hh-sp-phu{
color:var(--hh-text-light);
}
/* --- vạch ngăn mảnh giữa các mục --- */
.hh-sp-vach{
width:1px;
height:13px;
background:var(--hh-border-strong);
}
/* --- nút so sánh --- */
.hh-sp-sosanh{
display:inline-flex;
align-items:center;
gap:6px;
padding:0;
border:none;
background:none;
color:var(--hh-text-light);
font-family:inherit;
font-size:13px;
line-height:1.5;
cursor:pointer;
transition:color var(--hh-transition);
}
.hh-sp-sosanh i{
font-size:13px;
}
.hh-sp-sosanh:hover{
color:var(--hh-primary);
}
/*==========================================================================
22. GIAO DIỆN MOBILE (≤ 767px) — RIÊNG TRANG SẢN PHẨM
--------------------------------------------------------------------------
Đo ở 390px ra (2026-09-14):
① Thanh 4 tab (cùng phân khúc / mua kèm / cùng hãng / đã xem) xếp thành 4 hàng
dọc cao ~190px.
② Slider thẻ trong tab: JS cũ ghi cứng style nội tuyến `width:113px` cho từng
thẻ và `width:340px; overflow:hidden` cho khung ⇒ 3 thẻ hẹp, giá bị cắt, chữ
"Tặng quà" gãy dòng, hai nút mũi tên đè lên thẻ. Style nội tuyến chỉ thắng
được bằng !important (xem ERR-020).
③ Ô "Gọi đặt mua" chỉ rộng 190px, nền hồng lệch một nửa.
④ Form đánh giá: 2 ô nhập (Họ tên / SĐT) mỗi ô 50% bề ngang.
Tất cả trong một media query — giao diện máy tính không đổi.
==========================================================================*/
@media (max-width:767px){
/* 22.1 THANH TAB: một hàng cuộn ngang, dạng viên thuốc */
.hh-tab-bar{
flex-wrap:nowrap;
gap:8px;
padding:12px;
overflow-x:auto;
scrollbar-width:none;
}
.hh-tab-bar::-webkit-scrollbar{
display:none;
}
.hh-tab{
flex:0 0 auto;
padding:8px 14px;
border:1px solid var(--hh-border);
border-radius:var(--hh-radius-pill);
background:#fff;
font-size:13px;
}
.hh-tab.is-active{
border-color:var(--hh-primary);
background:var(--hh-primary-soft);
}
.hh-tab.is-active::after{
content:none;
}
/* 22.2 SLIDER THẺ TRONG TAB: cuộn ngang bằng tay, thẻ 150px */
.hh-tab-panel [id^="listiteminpdnchildv"]{
width:auto !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.hh-tab-panel [id^="listiteminpdnchildv"]::-webkit-scrollbar{
display:none;
}
.hh-tab-panel [id^="inlistiteminpdnchildv"]{
display:flex !important;
gap:10px;
width:max-content !important;
margin-left:0 !important;
left:0 !important;
transform:none !important;
}
.hh-tab-panel .detailsiteminpdnchildv1{
float:none !important;
width:150px !important;
min-width:150px !important;
max-width:150px !important;
scroll-snap-align:start;
}
/* đã cuộn được bằng tay ⇒ bỏ hai nút mũi tên đè lên thẻ */
.hh-tab-panel .btnleftlistitemhomev1,
.hh-tab-panel .btnrightlistitemhomev1{
display:none !important;
}
/* 22.3 CỘT PHẢI + Ô "GỌI ĐẶT MUA": trải hết bề ngang */
#indivrightcoldetailsitem .itemindivrightcoldetailsitem{
float:none;
width:auto;
}
#indivrightcoldetailsitem .initemindivrightcoldetailsitem.goidatmua{
width:auto;
}
/* 22.4 FORM ĐÁNH GIÁ: mỗi ô nhập một hàng, rộng hết khung */
/* mục 13 cùng tệp đặt `#bottomcommentguest .intenkhbinhluan input{width:210px}`
(1,1,1) và khung ngoài `.tenkhbinhluan` còn viền cũ ⇒ ô nhập 210px dạt phải
(khung cha text-align:right) trong một hộp viền đôi. Viết cùng độ ưu tiên. */
#bottomcommentguest .thongtinkhachhangbinhluan,
#bottomcommentguest .inthongtinkhachhangbinhluan,
#bottomcommentguest .tenkhbinhluan,
#bottomcommentguest .sdtkhbinhluan,
#bottomcommentguest .intenkhbinhluan{
width:100%;
float:none;
}
#bottomcommentguest .tenkhbinhluan,
#bottomcommentguest .sdtkhbinhluan{
border:0;
}
#bottomcommentguest .intenkhbinhluan input{
box-sizing:border-box;
width:100%;
text-align:left;
}
#txtcommentguest{
box-sizing:border-box;
width:100%;
}
.hh-banner-qc {
gap: 10px;
}
}
/* Mobile */
@media (max-width: 576px) {
.hh-banner-qc {
grid-template-columns: 1fr;
gap: 10px;
}
}