- mang class vnn-grid — trang chủ mỗi sản phẩm nằm trong
một
- rộng 24,5% (~140px) nên cùng lỗi: width:100% kéo
mỗi ảnh cao gần 500px. */
.woo-type21.woocommerce.single-product div.product div.images ol.flex-control-nav li img {
display: inline-block;
width: auto;
max-width: 100%;
height: 140px;
object-fit: contain;
}
.woo-type21.woocommerce.single-product div.product div.images ol.flex-control-nav li {
text-align: center;
}
@media only screen and (max-width: 767px) {
.woo-type21.woocommerce.single-product div.product div.images img#pdp-main-image {
height: 420px;
}
.woo-type21.woocommerce.single-product div.product div.images ol.flex-control-nav li img {
height: 100px;
}
}
/*--------------------------------------------------------------
Trang Giới thiệu
--------------------------------------------------------------
Bố cục lấy từ /about-us/ của theme. WPBakery gói mấy khoảng đệm của từng
row vào class băm số (.vc_custom_1501655382880…) sinh kèm trang trong
WordPress — mã băm đó không có trong CSS ta đã trích, mà giữ lại tên thì
sau này không ai đoán ra nó là gì. Nên đặt lại tên, số đo giữ nguyên.
--------------------------------------------------------------*/
.gt-row-cam-ket {
padding-top: 30px;
padding-bottom: 100px;
background-position: 0 0;
background-repeat: no-repeat;
}
.gt-row-doi-anh {
padding-top: 100px;
padding-bottom: 70px;
}
.gt-row-trich-dan {
padding-top: 100px;
padding-bottom: 100px;
}
/* Cột chữ nằm cạnh ảnh: đệm trên dưới cho chữ không dính mép ảnh. */
.gt-cot-chu {
padding-top: 50px;
padding-bottom: 50px;
}
/* Cột "Để lâu chưa chắc đã ngon hơn" nằm trên nền ảnh nên cần đệm quanh. */
.gt-cot-vien {
padding: 30px 30px 0;
}
/* Nhãn cố định bên trái thanh tab. Theme gắn cứng chữ "History:" trong CSS
(shortcodes/tabs.css:170) vì demo dùng 5 tab là 5 mốc thời gian; tab của ta
là 5 nước nên phải đổi chữ, không có cách nào làm từ HTML. */
.type7 .dt-sc-tabs-horizontal-frame:before {
content: "Xuất xứ:";
}
/*
.dt-sc-menu dựng cho ảnh món ăn vuông trong ô 130px (custom-class.css:361).
Ảnh chai của ta đã tách nền nên cao gấp ~3,5 lần bề ngang; để width:auto thì
mỗi dòng cao gần 500px. Chặn theo chiều cao đúng như đã làm ở trang chi tiết
sản phẩm, và căn giữa vì chai gầy không lấp hết ô.
*/
.gt-menu .dt-sc-menu figure {
text-align: center;
}
.gt-menu .dt-sc-menu figure img {
width: auto;
max-width: 100%;
height: 150px;
object-fit: contain;
}
/* Tên chai dài hơn tên món ăn nhiều: bỏ vạch gạch nối chạy dài sang phải (nếu
không nó đè lên ô giá), hạ cỡ chữ và thôi viết hoa toàn bộ — "RƯỢU VANG PHÁP
CHÂTEAU CISSAC HAUT-MÉDOC" ở 22px chiếm ba dòng và đọc rất mệt. */
.gt-menu .dt-sc-menu .dt-sc-menu-details h6 {
float: none;
padding-right: 130px;
font-size: 18px;
line-height: 28px;
text-transform: none;
}
.gt-menu .dt-sc-menu .dt-sc-menu-details h6:before {
content: none;
}
.gt-menu .dt-sc-menu .dt-sc-menu-details p {
padding-right: 130px;
}
/*--------------------------------------------------------------
Bài viết trong tab "Mô tả" của trang sản phẩm
--------------------------------------------------------------
Bài do AI viết chỉ dùng h2/h3 và bảng, mà cả hai thứ đó đều rơi vào bẫy của
theme:
1. h3 giữ nguyên 34px của base7f0f.css:5859 — bằng đúng h2, nên phải nhỏ lại
mới ra được thứ bậc. (Chuyện h2 từng là font viết tay thì đã gỡ ở khối
"Bỏ font viết tay Great Vibes" phía trên, không còn là vấn đề riêng của
tab này nữa.)
2. base7f0f.css:5946 cho th chữ trắng vì nghĩ th luôn có nền đỏ
(base7f0f.css:16332). Nhưng trang sản phẩm mang class .woocommerce, mà
.woocommerce tbody th (base7f0f.css:19063) phủ nền rgba(0,0,0,0.02) lên —
và bảng nào không có thì trình duyệt tự bọc , thành ra
chữ trắng nằm trên nền gần trắng. Bảng CÓ thì ngược lại: hàng đầu
không dính quy tắc tbody nên vẫn nền đỏ, phải để nguyên chữ trắng.
Chỉ sửa trong #tab-mo-ta để không đụng tới bảng giỏ hàng hay bảng thông số ở
các tab khác.
--------------------------------------------------------------*/
/* Màu đỏ vang của theme (#a53e4c), thắng được #111111 mà khối dưới trả cho
.woocommerce-tabs .panel h2 nhờ selector này có id. Font thì xem khối "Bỏ
font viết tay Great Vibes".
Cỡ chữ 34px là cỡ h2 của kirki, cũng là cỡ h2 dùng ở thân bài Góc kiến thức —
một chai và một bài đọc như nhau thì thứ bậc tiêu đề cũng nên như nhau.
head-2.css hạ h2 trong tab xuống 22px (:18880) rồi 20px (:18886) vì nghĩ đây
chỉ là dòng "Mô tả" của WooCommerce; thân bài AI thì dùng h2 làm tiêu đề mục
thật, mà 20px lại còn nhỏ hơn cả h3 26px ngay dưới nó — hai bậc lộn ngược.
Dãn dòng và giãn chữ không cần đụng: khối "Bỏ font viết tay Great Vibes" đã
trả cả hai về normal, nên tiêu đề xuống hai dòng vẫn không chồng nhau. */
#tab-mo-ta h2 {
color: #a53e4c;
font-size: 34px;
}
/* Nhỏ lại để dưới h2 một bậc rõ ràng, vẫn trên h4 (22px). */
#tab-mo-ta h3 {
font-size: 26px;
}
/* Chỉ ô tiêu đề nằm trong thân bảng: nền của nó đã là xám rất nhạt, nên trả
chữ về màu tiêu đề #111111 thay vì thêm nền đỏ.
Cố ý không đụng tới : hàng đầu bảng vẫn giữ nguyên nền đỏ #a53e4c và
chữ trắng của theme. Trước đây quy tắc này bắt mọi th nên hàng đầu thành chữ
#111 trên nền đỏ — tương phản 3,0:1, chìm hẳn. */
#tab-mo-ta tbody th,
#tab-mo-ta tbody th a,
#tab-mo-ta tbody th a:hover {
color: #111111;
}
/* Cùng một cái bẫy, ở trang bài — vùng, giống nho, nhật ký.
head-2.css:8654 cho .single-post .entry-body tbody th nền `none`, mà chữ vẫn
là #ffffff của quy tắc th chung: chữ trắng trên nền trắng, mất hẳn. Đủ độ ưu
tiên bằng cách chép lại đúng selector đó — site.css nạp sau nên hoà thì thắng.
lại không việc gì, vẫn nền đỏ chữ trắng. */
.single-post .entry-body tbody th,
.single-post .entry-body tbody th a,
.single-post .entry-body tbody th a:hover {
color: #111111;
}
/* h3 trong thân bài đang đúng 34px của head-2.css:5859 — bằng chằn chặn h2, nên
hai bậc tiêu đề nhìn ngang hàng và người đọc mất dấu bố cục. Hạ xuống 28px để
dưới h2 một bậc rõ ràng mà vẫn trên h4 (22px), cùng lối đã làm cho #tab-mo-ta
ở khối trên.
Cố ý lấy con trực tiếp (`> h3`) chứ không phải mọi h3 hậu duệ: mạch chính của
bài nhật ký đổ thẳng vào .entry-body, còn trang vùng và giống nho bọc chữ
trong .vnn-gioi-thieu — nơi đã cân riêng h2 26px / h3 20px cho khối gấp mở.
Bắt cả hậu duệ thì quy tắc này thắng specificity và đẩy h3 ở đó lên to hơn cả
h2 ngay trên nó. */
.single-post .entry-body > h3 {
font-size: 28px;
}
/* Ảnh nằm giữa thân bài — thẻ do BaiVietWriter dựng khi thay token ảnh.
Theme chỉ vẽ sẵn ảnh đại diện ở .entry-thumb, chưa từng có ảnh trong lòng
bài: để mặc thì
giữ nguyên bề rộng gốc của file (thường 1024px) và tràn khỏi cột chữ trên mọi màn hình hẹp hơn thế. */ .entry-body figure.bai-anh { margin: 30px 0; } /* Bắt `p > img` chứ không chỉ `.bai-anh img`: trình soạn thảo TipTap không giữ class của đoạn văn, nên bài nào đã qua tay người sửa trong admin thì `
` quay về `
` trơn. Thân bài không có ảnh nào chạy lẫn trong dòng chữ, ảnh nào cũng đứng riêng một đoạn. Lề đặt ở chính thẻ ảnh: đoạn văn bọc ngoài đã mang lề mặc định của theme, thêm lề cho nó nữa thì hai khoảng cộng dồn. */ .entry-body figure.bai-anh img, .entry-body p > img { display: block; width: 100%; height: auto; } .entry-body p > img { margin-block: 30px; } /* Ảnh đại diện phải lấp kín bề ngang khung bài. Markup theo theme mang sẵn width="1170" height="900" — con số của bản WordPress gốc. Theme chỉ đặt max-width:100% nên thuộc tính đó thắng: khung bài rộng 1230px mà ảnh dừng ở 1170px, chừa một vệt trắng bên phải trong khi dải ngày đăng ngay dưới vẫn kéo hết bề ngang. Ép width:100% để ảnh bám khung, height:auto để giữ đúng tỉ lệ thật của file. */ .entry-thumb img { display: block; width: 100%; height: auto; } /*-------------------------------------------------------------- Lưới tin: mọi ô cao bằng nhau -------------------------------------------------------------- Theme xếp danh sách bài bằng isotope, mỗi ô cao đúng theo nội dung của nó. Ba chỗ lệch cộng dồn: ảnh 4:3 so với ảnh 1,3:1 lệch 8px, tiêu đề một dòng so với hai dòng lệch 25px, tóm tắt ba dòng so với bốn dòng lệch 28px. Kết quả là hàng dưới so le, nút "Đọc tiếp" mỗi ô một cao độ. Khoá cả ba phần theo ô bài mới nhất — ảnh 4:3, tiêu đề hai dòng, tóm tắt ba dòng — phần dôi ra cắt bằng dấu ba chấm. Chỉ trong .tpl-blog-holder: trang bài chi tiết dùng lại .entry-thumb và phải giữ nguyên tỉ lệ thật của file. --------------------------------------------------------------*/ .tpl-blog-holder .entry-thumb img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; } /* line-height cứng thay cho `normal`: chiều cao hai dòng phải tính ra được con số, không thì máy nào không tải nổi Philosopher sẽ đo ra khác. 25px đúng bằng một dòng đang hiển thị nên khoảng cách chữ không đổi. */ .tpl-blog-holder .entry-title h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 50px; line-height: 25px; overflow: hidden; } /* Tóm tắt là đúng một thẻ
, line-height 28px: ba dòng là 84px. */ .tpl-blog-holder .entry-body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 84px; overflow: hidden; } /*-------------------------------------------------------------- Bộ lọc nhiều lựa chọn: giống nho, nhà sản xuất, vùng sản xuất -------------------------------------------------------------- Ba nhóm này có 94 / 195 / 158 mục — đổ thẳng ra thì riêng sidebar đã dài gấp mấy lần phần sản phẩm. Nên chặn chiều cao cho hiện thanh cuộn, và thêm một ô tìm ngay dưới tiêu đề widget. Dấu tick không cần thẻ mới: theme đã vẽ sẵn một vòng tròn FontAwesome ở .widget ul li:before (head-2.css:6456, \f10c → \f192 khi rê chuột). Đổi mã ký tự thành ô vuông là xong, và khi mục đang bật thì ô vuông có dấu check. --------------------------------------------------------------*/ .vnn-loc-nhieu .vnn-loc-tim { /* Theme không đặt box-sizing chung, để mặc định thì 100% + đệm hai bên tràn khỏi sidebar. */ box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 8px 10px; } .vnn-loc-nhieu ul.product-categories { /* ~6 hàng (mỗi hàng 44px theo head-2.css:7010-7011) rồi cuộn. */ max-height: 270px; overflow-y: auto; } /* Tên dài nhất trong ba nhóm là 37 ký tự ("Amarone della Valpolicella Valpantena"), quá gấp rưỡi bề ngang còn lại của sidebar 300px. Thẻ a vẫn giữ width:100% của theme (head-2.css:6451) nên tên đó xuống ba dòng, trong khi số đếm neo ở top:0 (head-2.css:7011) — hàng cao gấp ba mà số đếm trôi lên trên cùng. Cắt bằng ba chấm để mọi hàng cao đúng 44px như nhau: đó là điều kiện để max-height ở trên đếm ra đúng số hàng. Tên đầy đủ vẫn còn ở thuộc tính title, và ô tìm phía trên tra theo tên đầy đủ chứ không theo phần thấy được. */ .vnn-loc-nhieu ul.product-categories li a { /* Theme không đặt box-sizing chung: width:100% cộng đệm là tràn. */ box-sizing: border-box; /* Chừa chỗ cho số đếm — nó nằm tuyệt đối nên không tự đẩy chữ. */ padding-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* \f096 square-o, \f046 check-square-o — cùng bộ FontAwesome 4.7 theme đang nạp. Ghi cả :hover vì theme đổi ký tự khi rê chuột, để nguyên thì ô vuông biến thành vòng tròn ngay lúc người dùng định bấm. */ .vnn-loc-nhieu ul li:before, .vnn-loc-nhieu ul li:hover:before { content: "\f096"; } .vnn-loc-nhieu ul li.current-cat:before, .vnn-loc-nhieu ul li.current-cat:hover:before { content: "\f046"; } /* head-2.css:6459 kéo dấu của hàng đầu lên top 0 vì hàng đó không có đệm trên. Ở đây đệm nằm trong thẻ a nên hàng nào cũng như hàng nào. */ .vnn-loc-nhieu ul li:first-child:before { top: 10px; } /* Tiêu đề chai ở cột tóm tắt là h2, không phải h1: dải tiêu đề đầu trang đã mang h1 với đúng tên đó. Nhưng theme khoá cỡ chữ vào chính thẻ h1 chứ không vào class (head-2.css:18880 và 18884), h2 rơi xuống cỡ chữ mặc định — chép lại đúng ba dòng đó cho h2. Cố ý để độ ưu tiên thấp (h2.product_title, không thêm .woocommerce div.product vào trước): trên màn dưới 320px theme hạ cỡ chữ xuống 20px bằng .woocommerce div.product .product_title (head-2.css:20001), viết nặng tay hơn là chặn mất dòng đó. Không cần chép letter-spacing: theme cho 1px rồi woo-type21 trả về 0 (head-2.css:19288), tức là đúng mặc định. */ h2.product_title { font-size: 24px; font-weight: 500; /* head-2.css:19290 — chỉ viết cho h1 nên cũng phải chép sang. */ text-transform: capitalize; } /* kirki đặt màu h2 toàn site là #a53e4c — hợp với một dòng tiêu đề trang trí ngoài trang chủ, không hợp với tiêu đề chai, tiêu đề ba tab (Mô tả / Thông số / Cách phục vụ) hay dòng "Có thể bạn cũng thích". Trả chúng về #111111, đúng màu mà head-7.css khai cho h3 tới h6. Cỡ chữ thì không đụng: 24px của tiêu đề chai đặt ở khối trên, 22px của các tiêu đề còn lại là của theme (head-2.css:18880), đều đã thắng 34px nhờ độ ưu tiên cao hơn. Font thì xem khối "Bỏ font viết tay Great Vibes". */ h2.product_title, .woocommerce-tabs .panel h2, .upsell-products-container h2 { color: #111111; } /*-------------------------------------------------------------- Khối giới thiệu ở đầu trang có lưới sản phẩm -------------------------------------------------------------- Dùng chung cho hai chỗ có cùng bố cục "chữ ở trên, hàng ở dưới": bài giới thiệu đầu trang danh mục /ruou/… và phần chữ đầu trang vùng / giống nho / nhà sản xuất. Ở cả hai, thứ khách vào để tìm nằm bên dưới — nên phần chữ chỉ được chiếm một khoảng vừa đủ để biết trang nói về cái gì. Lưới sản phẩm của trang vùng mượn nguyên markup .products.columns-3.vnn-grid của trang danh mục nên không cần luật riêng ở đây. --------------------------------------------------------------*/ /* Khung bao quanh. Không có nó thì đoạn chữ trôi lơ lửng giữa dải tiêu đề và dòng "Hiển thị 1–12 trong 139 sản phẩm", không rõ nó thuộc về đâu — mà đây lại đúng là chỗ trang dễ trông như một trang bị lỗi bố cục nhất. box-sizing: theme không đặt border-box toàn cục, mà .entry-body của trang vùng lại là float width:100% — cộng viền và padding vào là tràn ngang cột. */ .vnn-gioi-thieu { box-sizing: border-box; border: 1px solid #e4e1e3; padding: 22px 28px; margin-bottom: 25px; } /* .blog-entry .entry-body của theme đặt margin-bottom 15px với specificity ngang luật trên; khối giờ có viền nên phải thở đúng bằng bên trang danh mục. */ .entry-body.vnn-gioi-thieu { margin-bottom: 25px; } /* Gấp bài dài: chặn chiều cao rồi mở ra khi checkbox được tick. 13em ≈ 6 dòng — đủ để thấy bài nói về cái gì, mà đẩy lưới sản phẩm xuống hết màn hình thứ nhất thì hỏng cả hai trang. Vẫn phải đủ cao để lớp mờ 4,5em bên dưới không ăn quá nửa khối: mờ nhiều hơn phần đọc được thì đoạn giới thiệu không nói được gì nữa. position: relative để lớp mờ bám đúng đáy phần đang bị che. */ .vnn-xt { max-height: 13em; overflow: hidden; position: relative; } /* Mờ dần thay cho cắt ngang. Chữ bị xén ngang thân dòng trông như trang tải hỏng chứ không như một đoạn còn tiếp; mờ dần thì mắt hiểu ngay là nội dung chạy tiếp xuống dưới. Màu đích phải đúng #ffffff — nền body của theme (kirki-inline-styles.css) — lệch một sắc là hiện ra vệt xám vắt ngang khối. pointer-events: none để lớp phủ không nuốt cú bấm vào chữ hay link nằm dưới nó. */ .vnn-xt::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4.5em; background: linear-gradient(rgba(255, 255, 255, 0), #ffffff); pointer-events: none; } /* Mở ra rồi thì không còn gì để che — để nguyên là lớp mờ đè lên mấy dòng cuối của bài đầy đủ. */ .vnn-xt-nut:checked + .vnn-xt::after { content: none; } /* Checkbox điều khiển: giấu khỏi mắt nhưng vẫn nằm trong luồng tab để bàn phím bấm được. display:none hay visibility:hidden là lấy mất khả năng đó. */ .vnn-xt-nut { position: absolute; width: 1px; height: 1px; opacity: 0; } .vnn-xt-nut:checked + .vnn-xt { max-height: none; } /* Nút thật, canh giữa: nó là hành động duy nhất của khối này nên phải nhận ra được là bấm được. Chữ suông nằm nép bên trái đọc như một cái nhãn. Không mượn .button của theme: class đó kéo theo nền đỏ đặc và cỡ chữ của nút mua hàng, nặng hơn hẳn vai một cái nút mở rộng đoạn giới thiệu. */ .vnn-xt-nhan { display: block; width: -moz-fit-content; width: fit-content; margin: 18px auto 0; padding: 8px 26px; border: 1px solid #a53e4c; border-radius: 2px; cursor: pointer; color: #a53e4c; font-weight: 600; transition: background-color 0.2s, color 0.2s; } .vnn-xt-nhan:hover { background-color: #a53e4c; color: #ffffff; } /* Viền hiện khi người dùng đi tới ô này bằng bàn phím: checkbox thật đang ẩn nên không tự vẽ được vòng focus của trình duyệt. */ .vnn-xt-nut:focus-visible + .vnn-xt + .vnn-xt-nhan { outline: 2px solid #a53e4c; outline-offset: 2px; } /* Một trong hai chữ hiện tại một lúc: "Xem thêm" khi đang gấp, "Thu gọn" khi đã mở. */ .vnn-xt-nhan .vnn-xt-dong, .vnn-xt-nut:checked + .vnn-xt + .vnn-xt-nhan .vnn-xt-mo { display: none; } .vnn-xt-nut:checked + .vnn-xt + .vnn-xt-nhan .vnn-xt-dong { display: inline; } /* 34px là cỡ h2 mặc định của kirki — quá to cho tiêu đề mục bên trong một đoạn giới thiệu bị gấp lại. Nhỏ xuống 26px để nó còn ở trên h3 (20px, đặt ngay dưới) mà không lấn át chính đoạn chữ nó đang chia mục. */ .vnn-gioi-thieu h2 { font-size: 26px; color: #a53e4c; } /* Dưới h2 một bậc — base7f0f.css:5859 để h3 nguyên 34px, to hơn cả h2 ở trên. */ .vnn-gioi-thieu h3 { font-size: 20px; } /*-------------------------------------------------------------- Bốn thang cảm quan của giống nho --------------------------------------------------------------*/ /* Lưới 4 cột: tên thang | thanh đo | nhãn đầu | nhãn cuối. Hai nhãn hai đầu nằm ngoài thanh chứ không đè lên nó — chữ trắng trên nền màu ở cỡ 12px là thứ đọc được trên ảnh chụp màn hình chứ không đọc được trên màn hình thật. */ .vnn-thang { list-style: none; margin: 0 0 20px; padding: 0; } /* grid-area chứ không dựa vào thứ tự DOM: trong HTML thanh đo đứng ngay sau tên thang, vì đọc bằng trình đọc màn hình thì "Độ đầy: 5 trên 5" phải liền nhau, còn hai nhãn hai đầu chỉ là chú thích của thanh. */ .vnn-thang li { display: grid; grid-template-columns: 6em auto 1fr auto; grid-template-areas: "nhan dau do cuoi"; align-items: center; gap: 0 10px; margin-bottom: 8px; } .vnn-thang-nhan { grid-area: nhan; font-weight: 600; } .vnn-thang-do { grid-area: do; height: 8px; background: #ecebe4; border-radius: 4px; overflow: hidden; } .vnn-thang-muc { display: block; height: 100%; background: #a53e4c; } .vnn-thang-dau { grid-area: dau; } .vnn-thang-cuoi { grid-area: cuoi; } .vnn-thang-dau, .vnn-thang-cuoi { font-size: 12px; color: #a5a38c; } /* Hàng ngang các thẻ hương. Cùng kiểu ô vuông xám như dòng thông số ở trang chi tiết chai, không phải nút bấm — chúng không dẫn đi đâu cả. */ .vnn-huong { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .vnn-huong li { padding: 3px 10px; background: #f5f4ef; border-radius: 3px; font-size: 13px; } /*-------------------------------------------------------------- Khối điều hướng của trang vùng -------------------------------------------------------------- Ba khối: thuộc nước, vùng nhỏ bên trong, giống nho trồng ở đó. Xem partials/khoi-lienquan.blade.php. Trước đây chúng là ba danh sách chữ chạy tràn một hàng dài, tên dính liền số chai — đọc thành một dải chữ liên tục không rõ đâu là hết mục này sang mục kia. Mỗi mục giờ là một thẻ có viền riêng, tên và số chai xếp hai dòng. --------------------------------------------------------------*/ /* Cùng khung viền với .vnn-gioi-thieu ở trên: cả trang chỉ nên có một loại khung. box-sizing vì .entry-details của theme không đặt border-box. */ .vnn-lienquan { box-sizing: border-box; border: 1px solid #e4e1e3; padding: 16px 20px; margin-bottom: 15px; } /* Vẫn giữ thẻ
chứ không đổi sang
: đây là tiêu đề thật của một khối nội dung, chỉ có cách trình bày là phải nhỏ lại. Nó là nhãn cho danh sách bên dưới, không phải một mục ngang hàng với các mục trong bài — nên 13px chữ hoa thay vì 34px của h2 mặc định. */ .vnn-lienquan h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8878; } .vnn-lienquan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } /* Cả cái thẻ là vùng bấm được, không riêng chữ: hai dòng chữ nhỏ nằm cạnh nhau thì mép chữ là mục tiêu quá hẹp, nhất là trên điện thoại. */ .vnn-the { display: block; padding: 7px 14px; border: 1px solid #e4e1e3; border-radius: 3px; line-height: 1.35; transition: border-color 0.2s, background-color 0.2s; } .vnn-the:hover { border-color: #a53e4c; background-color: #faf6f6; } /* Màu đặt trên span chứ không trên thẻ a: theme có luật a:visited riêng, để nó thắng thì danh sách hoá ra hai màu tuỳ khách đã bấm vào đâu — đúng thứ đang thấy ở ảnh chụp trước khi sửa. */ .vnn-the .vnn-the-ten { display: block; color: #a53e4c; font-weight: 600; } /* Số chai là chú thích cho cái tên phía trên, không phải một thông tin đứng riêng — nên nhỏ và nhạt hẳn đi. */ .vnn-the .vnn-the-so { display: block; font-size: 12px; color: #a5a38c; } /*-------------------------------------------------------------- Bản đồ vùng vang -------------------------------------------------------------- Khối dùng lại khung .vnn-lienquan ở trên — cùng viền, cùng kiểu tiêu đề, cùng dạng chip — nên ở đây chỉ còn phần riêng của hình SVG. SVG nhúng inline (xem partials/ban-do.blade.php) nên mọi thứ dưới đây là thuộc tính trình bày của SVG chứ không phải của HTML: fill/stroke, không phải background/border. --------------------------------------------------------------*/ /* viewBox lo tỉ lệ, ở đây chỉ cần cho nó chiếm hết bề ngang cột và cao theo tỉ lệ ấy — nhờ vậy điện thoại không bao giờ tràn ngang. Chặn 520px vì bản đồ gần vuông: để nó rộng hết cột 860px thì cao luôn 840px, tức là một khối phụ trợ chiếm trọn màn hình desktop trước khi thấy chai nào. */ .vnn-bd .vnn-bando { display: block; width: 100%; max-width: 520px; height: auto; /* Vùng dọc như Médoc cao gấp rưỡi bề ngang; không kẹp thì riêng bản đồ đã dài hơn một màn hình. viewBox + preserveAspectRatio mặc định lo phần co hình cho vừa, chỉ để lại lề hai bên. */ max-height: 480px; margin: 0 auto 14px; } /* Hình nước (hoặc vùng cha) vẽ dưới cùng: đủ rõ để nhận ra dáng đất nước, đủ nhạt để không tranh chỗ với các vùng tô nằm trên. */ .vnn-bd-nen { fill: #f2efe9; stroke: #e4e1e3; stroke-width: 1; } /* Viền trắng chứ không viền đậm: hai vùng cạnh nhau chỉ cần một khe sáng là tách được, thêm đường kẻ nữa thì bản đồ nhỏ lại thành một mớ nét. Số đo theo viewBox rộng 1000 mà hình chỉ hiện ở 520px, nên 2 ở đây ra đúng khoảng một pixel — mảnh hơn thì bảy vùng con của Bordeaux dính thành một mảng liền. */ .vnn-bd-v path { fill: #dcc0c5; stroke: #fff; stroke-width: 2; transition: fill 0.2s; } /* Ba trạng thái cùng một màu: rê chuột, đi bằng bàn phím, và vùng đang mở. Highlight bằng CSS thuần — bản đồ không cần một dòng JS nào. */ .vnn-bd-v:hover path, .vnn-bd-v:focus path, .vnn-bd-v[data-hien-tai] path { fill: #a53e4c; } /* Ô định vị ở góc bản đồ vùng: hình cả nước, khung đỏ khoanh chỗ đang phóng vào. Chỉ để nhìn — pointer-events: none để nó không nuốt cú bấm vào vùng nằm dưới, và SVG đã mang aria-hidden nên người đọc màn hình bỏ qua. */ .vnn-bd-dv { pointer-events: none; } /* Nền kem của bản đồ, không phải trắng: ô đứng trên nền trang trắng nên tô trắng là chỉ còn cái viền mờ, nhìn không ra một ô riêng. */ .vnn-bd-dv-nen { fill: #f2efe9; stroke: #d5cec2; stroke-width: 1; } .vnn-bd-dv-nuoc { fill: #d6cec0; } /* Khung khoanh là thứ duy nhất trong ô này cần bắt mắt, nên dùng luôn màu của vùng đang mở. stroke-width 3 vì ô hiển thị quãng 100px: mảnh hơn thì ở màn hình điện thoại không còn thấy. */ .vnn-bd-dv-khung { fill: none; stroke: #a53e4c; stroke-width: 3; } /* Dòng ghi công + ghi chú ranh giới xấp xỉ. Bắt buộc phải giữ: nguồn dữ liệu là CC0 / CC BY, mà CC BY thì ghi công là điều kiện của giấy phép. */ .vnn-bd-nguon { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #a5a38c; } /* Lưới sản phẩm nằm sau bài viết cần một quãng nghỉ, nếu không tiêu đề "Rượu vang …" dính ngay vào đoạn cuối bài. */ .vnn-ds-muc { margin-top: 30px; } /* ── Băng chuyền "Bộ sưu tập vang" ở trang chủ ────────────────────────── Sáu ô giờ là sáu nước sản xuất, ảnh lấy chai mới nhất của chính nước đó. Ảnh sản phẩm là WebP nền trong suốt, còn ảnh mẫu cũ của theme là JPG đã có sẵn nền be — nên màu nền đó chuyển xuống khung (đặt inline theo ô chẵn lẻ, giữ đúng kiểu xen kẽ của bản gốc) và chai đứng nằm trên. */ .dt-sc-image-caption.type3.xuat-xu .dt-sc-image-wrapper a { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 480 / 718; /* Chai căn theo đáy khung, nên phải chừa sẵn một quãng: sát mép dưới thì trông như chai bị khung cắt ngang chân. */ padding-bottom: 7%; box-sizing: border-box; } /* Theme kéo ảnh rộng 140% rồi trượt ngang khi rê chuột — đúng cho ảnh chụp phủ kín khung, nhưng một chai đứng nền trong suốt mà phóng thế thì tràn ra ngoài. Chai cao 88% khung, bề ngang tự theo tỉ lệ. */ .dt-sc-image-caption.type3.xuat-xu .dt-sc-image-wrapper img { width: auto !important; max-width: 70% !important; /* Tính trên phần khung còn lại sau padding, nên 93% ở đây ra đúng cỡ chai cũ — quãng hở lấy từ đáy chứ không lấy bằng cách thu nhỏ chai. */ max-height: 93%; transform: none !important; } /* Lớp phủ đen của theme vẫn còn nên chữ phải là màu trắng mới đọc được. Tên nước là thứ cần đọc trước, "Xem sản phẩm" (16px) chỉ là lời mời. */ .dt-sc-image-caption.type3.xuat-xu .dt-sc-image-title h3, .dt-sc-image-caption.type3.xuat-xu .dt-sc-image-title h3 a { color: #fff; } .dt-sc-image-caption.type3.xuat-xu .dt-sc-image-title h3 { font-size: 26px; } /*-------------------------------------------------------------- Bỏ giãn chữ ở tiêu đề -------------------------------------------------------------- Theme giãn chữ tới 5px cho các tiêu đề shortcode. Với chữ Latin không dấu đó là nét thoáng, nhưng tiếng Việt có dấu thì mỗi con chữ tách hẳn ra, đọc thành "B ộ s ư u t ậ p" — đúng thứ đã bỏ cho h2 ở khối Great Vibes trên kia, giờ bỏ nốt cho các bậc còn lại. Chép lại nguyên văn selector của theme (head-2.css:3934, 3942, 3947-3948) để đủ độ ưu tiên: mấy luật đó là 0,2,1 nên một danh sách h1..h6 trần nạp sau vẫn thua. Danh sách trần vẫn giữ, để đỡ luôn những luật đặc tả thấp như h3 ở head-2.css:2191. --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6, .dt-sc-title.script-with-sub-title h3, .dt-sc-title.with-sub-title h3, .dt-sc-title.with-two-color-stripe h2, .dt-sc-title.with-two-color-stripe h3 { letter-spacing: normal; } /*-------------------------------------------------------------- Lưới bài viết ở khối "Góc kiến thức" trang chủ Ảnh bài đặt loading="lazy" nên trước khi tải xong chúng không có kích thước nào cả, mà theme chỉ khai `img { max-width:100%; height:auto }` — tám ô cùng cao 0 thì cả lưới xẹp lại, khối nhìn như trống không. Chốt sẵn tỉ lệ khung để chỗ được giữ ngay từ lúc trang dựng. 13/10 là tỉ lệ của bộ ảnh đang dùng (1170×900); ảnh sau này lệch tỉ lệ thì object-fit cắt cho vừa, các ô vẫn bằng nhau như lưới gốc của theme. --------------------------------------------------------------*/ .dt-sc-portfolio-container .portfolio figure img { width: 100%; aspect-ratio: 13 / 10; object-fit: cover; } /*-------------------------------------------------------------- Băng chuyền "Vang theo niên vụ" ở trang chủ Theme khai `.dt-sc-image-caption.type5 img { width:auto }` và dựa hẳn vào thuộc tính width/height của từng ảnh mẫu — sáu ảnh đó đều cao đúng 472px. Ảnh chai thật cao 854px và mỗi chai một cỡ, nên phải chốt chiều cao ở đây: không thì chai cao thấp so le và khối phình gấp đôi thiết kế. --------------------------------------------------------------*/ .dt-sc-image-caption.type5.nien-vu .dt-sc-image-wrapper img { height: 472px; width: auto; max-width: 100%; object-fit: contain; } /* Tên chai thật dài hơn hẳn tên mẫu ("Riesling"), để cỡ 22px thì ô nào cũng ba dòng và đẩy giá xuống khỏi khung băng chuyền. Màu chữ phải khai ở đây: khối nằm trên ảnh nền gỗ tối, mà theme chỉ đổi sang trắng cho vài thành phần cụ thể trong .dt-sc-dark-bg chứ không cho tiêu đề của khối ảnh — tên chai và dòng niên vụ giữ nguyên màu đen mặc định thì chìm hẳn vào nền. */ .dt-sc-image-caption.type5.nien-vu .dt-sc-image-title h3, .dt-sc-image-caption.type5.nien-vu .dt-sc-image-title h3 a { font-size: 18px; line-height: 1.4; color: #fff; } .dt-sc-image-caption.type5.nien-vu .dt-sc-image-title h6 { /* Nhạt hơn tên chai một bậc để hai dòng không tranh nhau, vẫn đủ tương phản trên nền gỗ. */ color: rgba(255, 255, 255, 0.75); } /*-------------------------------------------------------------- Nút liên hệ nổi ở góc dưới bên trái Hai nút cùng một khuôn, chỉ khác màu và biểu tượng: nút gọi lấy màu nhấn của theme, nút Zalo lấy màu thương hiệu Zalo. Mỗi nút có hai lớp trang trí chạy vòng lặp phía sau vòng tròn đặc — .nut-noi__vien là viền mảnh toả ra, .nut-noi__vong là mảng màu mờ đập nhẹ. Markup ở resources/views/partials/nut-lien-he.blade.php. --------------------------------------------------------------*/ .nut-noi { position: fixed; left: 22px; bottom: 26px; /* Trên cả nút "lên đầu trang" của theme (z-index 9999) thì không cần, nhưng phải trên header dính (999) và mọi khối nội dung. */ z-index: 9990; display: flex; flex-direction: column; /* Vòng sáng rộng 72px quanh nút 48px, tức là loe ra mỗi bên 12px — cách nhau ít hơn 24px thì hai quầng sáng chồng lên nhau. */ gap: 30px; } .nut-noi__nut { position: relative; display: block; width: 48px; height: 48px; } .nut-noi__nut--goi { --nut-mau: 165, 62, 76; } .nut-noi__nut--zalo { --nut-mau: 17, 130, 252; } .nut-noi__tron { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(var(--nut-mau)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: transform 0.25s; } .nut-noi__nut:hover .nut-noi__tron { transform: scale(1.08); } .nut-noi__tron .fa { /* Ống nghe của Font Awesome 4 đứng thẳng, xoay cho giống dáng đang gọi. */ font-size: 22px; color: #fff; transform: rotate(8deg); } .nut-noi__tron img { width: 30px; height: 30px; } .nut-noi__vien, .nut-noi__vong { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); } .nut-noi__vien { width: 60px; height: 60px; border: 2px solid rgb(var(--nut-mau)); opacity: 0.5; animation: nut-noi-toa 1.4s infinite; } .nut-noi__vong { width: 72px; height: 72px; background: rgba(var(--nut-mau), 0.35); animation: nut-noi-dap 1.4s infinite; } @keyframes nut-noi-toa { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } 50% { opacity: 0.6; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } @keyframes nut-noi-dap { from, to { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } } /* Nhãn chữ chỉ dùng cho thanh ngang trên điện thoại. */ .nut-noi__chu { display: none; } @media (max-width: 767px) { /* Trên điện thoại hai nút tròn nổi ở mép trái luôn đè lên nội dung đang đọc. Đổi chúng thành một thanh ngang bám đáy màn hình, mỗi nút chiếm một nửa bề ngang. */ .nut-noi { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.15); } .nut-noi__nut { display: flex; align-items: center; justify-content: center; width: 50%; height: auto; /* Cao 48px; phần cộng thêm ở dưới là chỗ cho vạch điều hướng của máy màn hình tràn viền, ở máy không có thì env() trả về 0. */ padding: 13px 0 calc(13px + env(safe-area-inset-bottom)); background: rgb(var(--nut-mau)); color: #fff; } /* Nút đã có nền màu riêng nên bỏ vòng tròn đặc lẫn hai vòng sáng — chúng chỉ có nghĩa với nút tròn nổi trên nền trang. */ .nut-noi__tron { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; margin-right: 8px; } .nut-noi__vien, .nut-noi__vong { display: none; } .nut-noi__tron .fa { font-size: 18px; } .nut-noi__tron img { width: 22px; height: 22px; } .nut-noi__chu { display: inline; font-size: 15px; font-weight: 600; line-height: 22px; color: #fff; } /* Thanh nằm đè lên trang nên chừa sẵn chỗ, không thì nó che mất dòng cuối chân trang. */ body { padding-bottom: calc(48px + env(safe-area-inset-bottom)); } } /* Người bật chế độ hạn chế chuyển động thì bỏ hẳn vòng lặp, nút vẫn bấm được. */ @media (prefers-reduced-motion: reduce) { .nut-noi__vien, .nut-noi__vong { animation: none; } } /*-------------------------------------------------------------- Header trên màn hình hẹp Trang có slider dùng header trong suốt: theme khai `.header-on-slider.page-with-slider .main-header-wrapper { position:absolute; top:50px }` để menu nằm đè lên ảnh slider. Bản responsive của theme có trả header về dòng chảy bình thường, nhưng chỉ viết `.main-header-wrapper { position:inherit }` — một lớp, thua hai lớp của luật kia nên không ăn. Trên điện thoại, header xếp dọc thành bốn tầng (hotline, logo, Zalo, nút Menu) cao khoảng 450px trong khi slider chỉ còn 283px, nên phần thừa của header đè thẳng lên khối nội dung đầu tiên. Trả header về position:relative thì slider tụt xuống dưới header và hết chồng. --------------------------------------------------------------*/ @media only screen and (max-width: 991px) { .header-on-slider.page-with-slider .main-header-wrapper, .header-on-slider.page-with-slider.header-with-topbar .main-header-wrapper { position: relative; top: 0; } } /*-------------------------------------------------------------- Khoảng đệm của các dải trang chủ trên màn hình hẹp Bốn dải dưới đây được Visual Composer sinh ra với padding cố định tính cho màn rộng (200px trên dưới cho dải "Lời nhắn", 150px cho "Showroom"…). Trên điện thoại, cột nội dung chỉ còn 390px nên những khoảng ấy thành mấy màn hình trống trơn giữa hai dải — trang chủ dài gần 14.000px mà quá nửa là chỗ trống. Phải dùng !important vì luật gốc của VC cũng !important; đây là trường hợp ngoại lệ của quy ước "chỉ cần selector đủ cụ thể" ở đầu file. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { /* Lời nhắn từ nhà nhập khẩu (200/200), Showroom (150/150), Đăng ký nhận tin (80/80). */ #primary .vc_custom_1501073343859, #primary .zoom-img, #primary .vc_custom_1501139375862 { padding-top: 50px !important; padding-bottom: 50px !important; } /* Vang theo niên vụ: chỉ mép trên quá dày, mép dưới 30px giữ nguyên. */ #primary .vc_custom_1501138554895 { padding-top: 50px !important; } } /*-------------------------------------------------------------- Khối "Sản phẩm nổi bật" trên màn hình hẹp Mỗi tab có một vòng loang rượu vẽ sẵn, đặt position:absolute cao 110px trong khi hàng tab chỉ cao 49px. Theme xếp năm tab thành năm hàng chồng lên nhau (li width:100%) và nới khoảng cách lên 70px cho vòng loang khỏi đè chữ — thành ra riêng dãy tab đã dài gần 600px. Xếp lưới hai cột để còn ba hàng; hàng lẻ cuối tự nằm giữa nhờ justify-content. Hai luật nới 70px và bỏ vạch ngăn dọc của theme nằm trong @media (min-width: 480px) and (max-width: 767px) nên màn 390px rơi ra ngoài — viết lại cho cả dải. responsive-479.css còn kẻ border-bottom cho mỗi li (kiểu tab xếp dọc mặc định); ở lưới thì đó là vạch xám thừa vắt ngang giữa hai vòng loang. Khung trắng chứa sản phẩm đệm 45px mỗi bên — trên màn 390px thì thẻ sản phẩm chỉ còn 200px, tên chai vỡ thành sáu dòng. Rút đệm còn 15px; khoảng cách 70px dưới hàng tab cuối đã đủ nên bỏ luôn margin-top của khung. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { #primary .type9 ul.dt-sc-tabs-horizontal-frame { display: flex; flex-wrap: wrap; justify-content: center; } #primary .type9 ul.dt-sc-tabs-horizontal-frame > li { width: 50%; margin-bottom: 70px; border-bottom: 0; } #primary .type9 ul.dt-sc-tabs-horizontal-frame > li > a { width: 100%; min-width: 0; } #primary .type9 ul.dt-sc-tabs-horizontal-frame > li a:after, #primary .type9 ul.dt-sc-tabs-horizontal-frame > li a.current:before { display: none; } #primary .dt-sc-tabs-horizontal-frame-container.type9 .dt-sc-tabs-horizontal-frame-content { padding: 30px 15px; margin-top: 0; } } /*-------------------------------------------------------------- Ô đăng ký nhận tin ở chân trang, trên màn hẹp Theme để ô email cỡ chữ 40px cho màn rộng (ô rộng 775px nên vừa), và ở responsive-479.css chỉ hạ xuống 30px — trong khi ô lúc đó chỉ còn 276px. Dòng chữ mời nhập tràn ra ngoài và chui xuống dưới nút "Đăng ký" vốn đặt absolute ở mép phải. Hạ cỡ chữ theo đúng tỉ lệ của bản màn rộng và chừa chỗ trống bên phải cho nút. --------------------------------------------------------------*/ @media only screen and (max-width: 479px) { #footer .widget .dt-sc-newsletter-section.type2 .dt-sc-subscribe-frm input[type="email"] { font-size: 16px; padding-right: 75px; } } /*-------------------------------------------------------------- Trang chi tiết sản phẩm trên màn hẹp Theme xếp ảnh chai và phần tóm tắt thành hai cột 49%, rồi trả chúng về 100% trong @media (min-width: 768px) and (max-width: 991px) — lại quên dải hẹp hơn 768px. Cùng lúc responsive-479.css cho div.product float:left, nên khối co giãn theo nội dung rộng nhất bên trong (bảng thông số) và phình ra 414px trong cột 290px: chữ ở cột phải bị cắt mất. Chép lại luật 100% của theme cho dải hẹp và ghim div.product bằng bề rộng cột để nó thôi phình theo nội dung. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .woocommerce.single-product div.product { width: 100%; } .woo-type21.woocommerce.single-product div.product div.images, .woo-type21.woocommerce.single-product div.product div.summary { width: 100%; } } /*-------------------------------------------------------------- Bảng trong nội dung bài viết và mô tả sản phẩm, trên màn hẹp Phần lớn bảng chỉ hai ba cột nên vừa khung 250px, nhưng vài bảng so sánh bảy cột thì bề rộng tối thiểu đã 374px và tràn ra ngoài khung, chữ bị cắt. Cho bảng tự cuộn ngang trong khung của nó thay vì đẩy cả trang. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .woocommerce-Tabs-panel table, .entry-content table { display: block; overflow-x: auto; max-width: 100%; } } /*-------------------------------------------------------------- Danh sách chai ở trang Giới thiệu, trên màn hẹp Khối .dt-sc-menu chừa 120px bên trái cho ảnh chai và 130px bên phải cho ô giá (ô giá đặt absolute ở mép phải). Cột chỉ còn 290px trên điện thoại nên tên chai chỉ được 40px bề ngang, mỗi chữ rơi xuống một dòng. Thu ô ảnh lại và cho ô giá nằm ngay dưới tên thay vì treo bên phải. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .gt-menu .dt-sc-menu { padding-left: 100px; min-height: 130px; } .gt-menu .dt-sc-menu figure { width: 90px; } .gt-menu .dt-sc-menu figure img { height: 120px; } .gt-menu .dt-sc-menu .dt-sc-menu-details h6, .gt-menu .dt-sc-menu .dt-sc-menu-details p { padding-right: 0; } .gt-menu .dt-sc-menu .dt-sc-menu-details .dt-sc-menu-price { position: static; display: inline-block; margin-top: 8px; } } /*-------------------------------------------------------------- Lưới "Góc kiến thức" trên màn hẹp Theme giấu tiêu đề bài trong lớp phủ chỉ hiện khi rê chuột — điện thoại không có thao tác đó nên còn lại tám tấm ảnh không chữ, mỗi tấm cao 300px. Bỏ lớp phủ, xếp hai bài một hàng và đặt tiêu đề ngay dưới ảnh như một danh sách tin bình thường. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { /* Theme xếp lưới bằng isotope: JS ghi thẳng position/top/left vào từng ô và chiều cao vào khung. Cách xếp đó tính theo một cột nên phải chọi lại bằng !important rồi tự xếp hai cột bằng flex. */ #primary .dt-sc-portfolio-container { display: flex; flex-wrap: wrap; height: auto !important; } #primary .dt-sc-portfolio-container .portfolio { position: relative !important; top: auto !important; left: auto !important; width: 50%; margin: 0; float: none; } /* Lớp phủ thôi nằm đè lên ảnh, trở thành phần chữ nối tiếp bên dưới. */ #primary .dt-sc-portfolio-container .portfolio .image-overlay { position: static; opacity: 1; height: auto; } /* Hai nút tròn phóng to / mở bài chỉ có nghĩa khi rê chuột. */ #primary .dt-sc-portfolio-container .portfolio .image-overlay .links { display: none; } /* responsive-479.css giấu hẳn khối chữ này (display:none) vì theme coi như trên điện thoại chỉ xem ảnh. */ #primary .dt-sc-portfolio-container .portfolio .image-overlay-details { display: block; position: static; border-left: 0; padding: 12px 15px 24px; } #primary .dt-sc-portfolio-container .portfolio .image-overlay h2 { font-size: 16px; line-height: 24px; } /* Chữ trong lớp phủ vốn màu trắng vì nằm đè lên ảnh; giờ nó nằm trên nền trang nên phải lấy lại màu chữ thường của theme. */ #primary .dt-sc-portfolio-container .portfolio .image-overlay h2 a { color: #111; } #primary .dt-sc-portfolio-container .portfolio .image-overlay-details .categories a { color: #777; } } /*-------------------------------------------------------------- Header trên điện thoại: bỏ hai ô liên hệ, ghim thanh MENU Ở dải hẹp theme xếp header thành cột: ô hotline nằm trên logo, ô "Tư vấn qua Zalo" nằm dưới, đẩy thanh MENU xuống gần nửa màn hình. Cả hai kênh đó đã có sẵn ở thanh gọi/Zalo bám đáy nên bỏ đi, rồi ghim thanh MENU lên đỉnh màn hình khi cuộn (phần gọi jquery.sticky ở cuối layouts/app.blade.php). --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .main-header .header-left, .main-header .header-right { display: none; } /* Thẻ nav là inline-block: menu đóng thì nó cao 0 nhưng vẫn chiếm một dòng chữ, chừa 29px trắng thừa ngay dưới thanh MENU. */ /* Hai id để thắng luật .header-align-center.fullwidth-menu-header của theme, vốn đặt inline-block cho cả dải màn hình. */ #menu-wrapper #main-menu { display: block; } /* Nền trong suốt của theme để lộ nội dung chạy phía sau khi thanh dính; thanh bấm mở menu vốn đã có nền đỏ, chỉ cần lấp phần còn lại. */ .is-sticky .menu-wrapper { background: #fff; } /* Menu xổ ra có thể dài hơn màn hình khi mở thêm mục con. */ .is-sticky .menu-wrapper #main-menu > ul.menu { max-height: calc(100vh - 60px); overflow-y: auto; } } /*-------------------------------------------------------------- Nội dung tab sản phẩm trên màn hình rất hẹp responsive-479.css:384 canh giữa cả khung nội dung tab (.woocommerce div.product .woocommerce-tabs .panel { text-align:center }). Với vài dòng giới thiệu ngắn của theme thì được, nhưng mô tả sản phẩm ở đây dài nhiều đoạn — đọc văn bản canh giữa rất mỏi mắt. Trả về canh trái. --------------------------------------------------------------*/ @media only screen and (max-width: 479px) { .woocommerce div.product .woocommerce-tabs .panel { text-align: left; } } /* Ô bảng thì theme canh giữa ở mọi khổ màn hình (luật `td, tbody th`). Trên màn hình rộng ô ngắn nên nhìn cân, còn ở đây một ô xuống ba bốn dòng, mỗi dòng lệch một kiểu. */ @media only screen and (max-width: 767px) { .woocommerce-Tabs-panel table th, .woocommerce-Tabs-panel table td, .entry-content table th, .entry-content table td { text-align: left; } } /*-------------------------------------------------------------- Bề ngang khung nội dung trên màn hình hẹp Theme khoá .container bằng số cứng theo đúng ba khổ máy năm 2017: 710px cho máy 768, 420px cho máy 480, 290px cho máy 320 (grid7f0f.css:17 và responsive-{991,767,479}.css). Máy bây giờ rộng 390–430px nên vẫn rơi vào luật 290px, chừa mỗi bên 50–70px lề trắng — hơn một phần tư màn hình. Đổi sang phần trăm, giữ đúng khoảng lề mà theme định: 15px mỗi bên ở khổ nhỏ nhất, 30px ở khổ vừa. --------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .container, .type5.tribe_events .container .container, .layout-boxed .vc_row .dt-sc-stretch-row-content, .left-header #header-wrapper .top-bar .container { width: calc(100% - 60px); } .container.fill-container, .page-template-tpl-fullwidth .section-wrapper.fullwidth-section .container.fill-stretch-row { width: calc(100% - 30px); } /* Hai cột chân trang đã xuống hàng và chiếm trọn bề ngang, nhưng luật `#footer .footer-widgets .dt-sc-two-third { margin-left:5% }` không có dải riêng nên vẫn đẩy cột dưới lệch sang phải. Khung 290px cũ đủ hẹp để chỗ lệch đó không lộ ra. */ #footer .footer-widgets .dt-sc-two-third { margin-left: 0; } /* Ảnh logo rộng 2000px và chỉ bị chặn bởi `max-width:100%`, nên khung nội dung rộng ra bao nhiêu là nó phình theo bấy nhiêu. Chặn lại đúng chiều cao logo vẫn có ở khổ này để header không cao thêm. */ #logo a img { max-height: 150px; } /* Vài khối khác cũng bị khoá đúng con số cũ của .container; để nguyên thì chúng nằm lệch một bên trong khung đã rộng ra. */ #primary.with-left-sidebar, #primary.with-right-sidebar, #primary.with-both-sidebar, .portfolio-modern-fullwidth { width: 100%; } .page-with-sidebar .vc_row-no-padding .dt-sc-newsletter-section.type7 { max-width: 100%; } } @media only screen and (max-width: 479px) { .container, .layout-boxed .vc_row .dt-sc-stretch-row-content { width: calc(100% - 30px); } .container.fill-container, .page-template-tpl-fullwidth .section-wrapper.fullwidth-section .container.fill-stretch-row { width: 100%; } #logo a img { max-height: 105px; } } /*-------------------------------------------------------------- Nút gửi của ô "Đăng ký nhận tin" trên trang chủ, màn hẹp Ở dải dưới 480px theme biến nút "Subscribe!" thành ô vuông 50px mang icon máy bay giấy, nhưng vẫn giữ toạ độ absolute tính cho bản chữ: `top:17px` (base.css) — con số ấy sinh ra để bù `margin:10px 0` mà responsive-479 đặt cho ô email. Luật margin đó về sau bị `.dt-sc-newsletter-section:not(.type2) ... { margin:0 0 10px 0 !important }` đè mất (chuyên biệt hơn), nên ô email lại bắt đầu từ mép trên form còn nút thì thừa nguyên 10px: nút tụt xuống, góc phải đâm ra ngoài đường bo 30px của ô. Neo nút vào cả bốn mép thay vì đếm pixel: chừa đều 8px trên, dưới và phải, chiều rộng để aspect-ratio kéo bằng chiều cao. Tâm nút khi ấy luôn cách mép phải đúng nửa chiều cao ô, tức trùng tâm cung bo — cân bất kể ô cao bao nhiêu, mà chiều cao ấy thì do line-height của font quyết định nên không có con số cố định để bám. Điều kiện để phép neo trên đúng: khung của nút (thẻ
- riêng do WPBakery chia cột, đụng vào là hỏng.
--------------------------------------------------------------*/
.woocommerce ul.products.vnn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px 2%;
float: none;
}
.woocommerce ul.products.columns-4.vnn-grid {
grid-template-columns: repeat(4, 1fr);
}
/* Clearfix của theme sẽ thành hai ô grid rỗng. */
.woocommerce ul.products.vnn-grid::before,
.woocommerce ul.products.vnn-grid::after {
content: none;
}
.woocommerce ul.products.vnn-grid > li.product,
.woocommerce ul.products.vnn-grid > li.product > .column {
display: block;
float: none;
width: auto;
margin: 0;
}
/* Ô grid kéo cả thẻ cao bằng nhau; cho phần bên trong cao theo để viền và
nền không hụt ở thẻ có tên ngắn. */
.woocommerce ul.products.vnn-grid > li.product > .column,
.woocommerce ul.products.vnn-grid > li.product .product-wrapper {
height: 100%;
}
/* Tên chai dài ngắn chênh nhau nhiều — có chai một dòng, có chai bốn dòng —
nên hàng giá so le nhau. Ép ô tên đúng ba dòng: ngắn hơn thì vẫn chiếm đủ
chỗ, dài hơn thì cắt bằng ba chấm.
line-height phải khai bằng số vì theme để "normal" (base7f0f.css:62), mà
"normal" thì không tính ra được chiều cao của ba dòng. */
.woo-type21.woocommerce ul.products.vnn-grid li.product .product-details h5,
.woo-type21 .woocommerce ul.products.vnn-grid li.product .product-details h5 {
line-height: 1.35;
height: 4.05em; /* 3 × 1.35 */
/* Theme để h5 rộng 70% (type217f0f.css:82) vì chừa 30% cho ô bên phải —
chỗ trước đây treo tên nước. Bỏ ô đó rồi thì trả lại đủ chiều ngang,
không thì tên bị cắt sớm hơn cần thiết mà bên phải vẫn trống. */
width: 100%;
}
/* Cắt ở thẻ a chứ không ở h5: h5 mang ::before của theme, biến nó thành
-webkit-box thì cái gạch đó bị tính là một dòng. */
.woocommerce ul.products.vnn-grid li.product .product-details h5 a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
/* type217f0f.css:84 cho thẻ a padding 10px trên/dưới. Lúc a còn là inline
thì padding dọc không chiếm chỗ, nhưng -webkit-box là hộp khối nên nó
đội ô tên cao thêm 20px. */
padding: 0;
}
/* Giá là thứ khách tìm đầu tiên trong thẻ, mà theme để nó 14px chữ thường màu
đen (woocommerce-default7f0f.css:1535 và :2054) — đúng cỡ, đúng màu, đúng độ
đậm của tên chai ngay phía trên, nên mắt không có gì bám vào.
Nâng riêng con số đang bán: 18px, đậm, màu primary #a53e4c của chính theme
(inline/global-styles-inline-css.css). Không đụng tới giá cũ gạch ngang —
nó phải nhỏ và mờ thì con số mới mới bật lên được.
Áp cho mọi ul.products chứ không riêng .vnn-grid: lưới trang chủ
(home/sections/products.blade.php) không mang class đó nhưng cùng là một
thẻ sản phẩm, để lệch nhau thì thành hai kiểu giá trên cùng một site. */
.woocommerce ul.products li.product .product-details .price {
/* Theme cắt còn 75% để chừa chỗ cho ô bên phải, cùng lý do với h5. */
width: 100%;
}
/* Phải kể tên cả .amount bên trong chứ không chỉ ins: theme tô màu thẳng vào
nó ở woocommerce-default7f0f.css:2011, đặt màu ở thẻ cha thì thua. */
.woocommerce ul.products li.product .product-details .price ins,
.woocommerce ul.products li.product .product-details .price ins .amount,
.woocommerce ul.products li.product .product-details .price > .amount {
color: #a53e4c;
font-size: 18px;
font-weight: 700;
/* ins mặc định bị gạch chân, và theme trả nó về font-weight normal
(woocommerce-default7f0f.css:1538). */
text-decoration: none;
}
/* Giá cũ thu nhỏ một chút để chênh lệch rõ hơn; màu #a5a38c giữ của theme. */
.woocommerce ul.products li.product .product-details .price del,
.woocommerce ul.products li.product .product-details .price del .amount {
font-size: 13px;
}
.woocommerce ul.products li.product .product-details .price del {
margin-right: 6px;
}
@media only screen and (max-width: 991px) {
.woocommerce ul.products.vnn-grid,
.woocommerce ul.products.columns-4.vnn-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 479px) {
.woocommerce ul.products.vnn-grid,
.woocommerce ul.products.columns-4.vnn-grid {
grid-template-columns: 1fr;
}
}
/*--------------------------------------------------------------
Trang trong: header phải chiếm chỗ thật
--------------------------------------------------------------
layout7f0f.css:185 cho .main-header-wrapper position:absolute; top:0 — header
nằm ngoài luồng, không đẩy nội dung xuống. Theme bù lại bằng
layout7f0f.css:746: .header-on-slider .main-title-section-wrapper
{ padding-top:300px }, tức mọi trang trong của bản demo đều mang class
header-on-slider. Ta bỏ class đó (kèm transparent-header) để header không
trong suốt, nên dải tiêu đề chỉ còn padding-top 40px và header cao ~230px
đè lên tiêu đề rồi tràn xuống cả phần nội dung.
Sửa đúng chỗ theme đã làm cho trang chủ (layout7f0f.css:188
.home .main-header-wrapper { position: relative }): trả header về luồng.
Menu dính khi cuộn vẫn chạy — jquery.sticky chỉ đổi #menu-wrapper sang
position:fixed và để lại .sticky-wrapper giữ đúng chiều cao.
--------------------------------------------------------------*/
body:not(.home) .main-header-wrapper {
position: relative;
}
/*--------------------------------------------------------------
Header: hai khối liên hệ canh giữa theo logo
--------------------------------------------------------------
head-2.css:7418 để .header-align-center .main-header là block, ba khối con
xếp bằng float — mà float thì luôn dính mép trên của hàng. Theme bù bằng
head-2.css:7411 { padding-top: 45px }, một con số chỉ đúng với logo cao đúng
bằng logo mặc định của bản demo. Logo của ta cao hơn, nên hai khối liên hệ
treo lên phía trên, lệch hẳn so với tâm logo.
Chuyển hàng trên sang flex thì không cần con số nào nữa: align-items canh
giữa theo khối cao nhất, logo cao bao nhiêu cũng đúng. #menu-wrapper vẫn
xuống hàng riêng vì head-2.css:7398 cho nó width:100% — không lọt nổi vào
hàng đã có 34% + 29,8% + 34%, nên flex-wrap đẩy nó xuống.
Chỉ áp từ 992px trở lên: dưới ngưỡng đó theme xếp lại toàn bộ header (logo
chiếm cả hàng, xem head-2.css:20970) và không có gì để canh giữa nữa.
--------------------------------------------------------------*/
@media (min-width: 992px) {
.header-align-center .main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.header-align-center .header-left,
.header-align-center .header-right {
padding-top: 0;
padding-bottom: 0;
}
}
/* head-2.css:7240 để logo thụt xuống 25px, cân với khoảng trống phía trên
trong file logo của bản demo. Logo của ta đã cắt sát hình nên không cần
khoảng đó — 8px là vừa. Ngoài media query bên trên vì đây là khoảng cách
của riêng logo, đúng ở mọi khổ màn hình. */
.header-align-center .main-header #logo a {
padding-top: 8px;
}
/*--------------------------------------------------------------
Trang chi tiết: khổ ảnh sản phẩm
--------------------------------------------------------------
Ảnh đã tách nền nên chỉ còn thân chai: 337 ảnh có tỉ lệ cao/rộng trung vị
3,54 (cao nhất 4,52). woocommerce-default7f0f.css:212 đặt
div.product div.images img { width:100% }, mà cột ảnh rộng 49% (~573px ở
container 1170px) — thành ra chai cao hơn 2000px, quá hai màn hình.
Vậy chặn theo CHIỀU CAO và cho bề ngang tự co: khổ ảnh không phụ thuộc tỉ
lệ từng chai nữa, và hộp quà (tỉ lệ 1,25) vẫn nằm gọn trong cột.
--------------------------------------------------------------*/
.woo-type21.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper {
text-align: center;
}
.woo-type21.woocommerce.single-product div.product div.images img#pdp-main-image {
display: inline-block;
width: auto;
max-width: 100%;
height: 600px;
object-fit: contain;
}
/* Ảnh phụ nằm trong