* woocommerce_template_loop_price()
* woocommerce_template_loop_product_link_close()
*
* So a square aspect-ratio with `overflow:hidden` on that link CLIPS THE NAME AND THE
* PRICE. Measured on staging before the fix, one related-products card:
*
* a.woocommerce-LoopProduct-link 291 x 291 aspect-ratio:1/1 overflow:hidden
* img 291 x 291
* h2.woocommerce-loop-product__title 291 x 39 ← outside the box, invisible
* span.price 291 x 26 ← outside the box, invisible
*
* 356px of content in a 291px box. Every product card on the site rendered as a
* photo and a button: no name, no price, on a shop. It reads as "the cards look
* ugly", which is how it was reported, and it survived five rounds of fixing
* properties on the parts that were still visible.
*
* The crop belongs on the IMAGE, which is the thing that needs to be square. The
* link stays `position:relative` because `.hs-card__tag` is absolutely positioned
* inside it; with the link now full-height, top/left 10px still lands on the top-left
* corner of the photo.
*/
.woocommerce ul.products li.product > a:first-of-type{
position:relative;
display:block;
}
.woocommerce ul.products li.product > a:first-of-type img{
display:block;
width:100%;
/* `aspect-ratio` + `height:auto`, NOT `height:100%`. The link has no fixed height
any more, so a percentage height would resolve against `auto` and the crop would
depend on the file's own proportions. */
aspect-ratio:1/1;
height:auto;
object-fit:cover;
background:#0c0d0e;
margin:0;
border-radius:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
padding:0 16px;
margin:6px 0;
font-size:15px;
font-weight:600;
line-height:1.3;
min-height:2.6em;
color:var(--hs-text);
}
.woocommerce ul.products li.product .price{
padding:0 16px;
margin:0;
color:var(--hs-accent);
font-weight:800;
font-size:16px;
}
.woocommerce ul.products li.product .price del{color:var(--hs-muted);font-weight:500;opacity:.7}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .star-rating{margin:6px 16px}
/* Our single action button, injected on woocommerce_after_shop_loop_item. */
.hs-card__acts{margin-top:auto;padding:14px 16px 16px}
.hs-card__acts .hs-btn{width:100%;padding:11px 8px;font-size:13px}
/* Badge stack. Woo prints its own sale flash; ours sits opposite it. */
.hs-card__badges{
position:absolute;
top:10px;right:10px;
z-index:2;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}
.woocommerce ul.products li.product .onsale{
position:absolute;
top:10px;left:10px;
min-height:0;min-width:0;
margin:0;
padding:5px 10px;
border-radius:999px;
background:var(--hs-felt);
color:#fff;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
line-height:1.5;
}
@media(max-width:1000px){
.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.woocommerce ul.products{grid-template-columns:minmax(0,1fr)}
}
/* ---- Star rating ----------------------------------------------------- */
.woocommerce .star-rating span,
.woocommerce .star-rating::before{color:var(--hs-accent)}
/* ---- Single product -------------------------------------------------- */
.woocommerce div.product .product_title{
font-size:clamp(24px,3.4vw,34px);
font-weight:800;
line-height:1.2;
margin-bottom:10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
color:var(--hs-accent);
font-size:30px;
font-weight:800;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--hs-muted)}
.woocommerce div.product .product_meta{
border-top:1px solid var(--hs-line);
margin-top:22px;
padding-top:18px;
color:var(--hs-muted);
font-size:14px;
}
.woocommerce div.product .product_meta a{color:var(--hs-accent)}
/* ---- Single product: two columns ----
*
* `prototype/product.html` uses `.pdp{display:grid;grid-template-columns:1fr 1fr;
* gap:40px;align-items:start}`. WooCommerce ships a FLOAT layout instead — the
* gallery `float:left;width:48%`, the summary `float:right;width:48%` — which gets
* close on width (measured 591 against the prototype's 596) but cannot align-start,
* needs a clearfix, and puts a percentage gap between the columns rather than 40px.
*
* Grid, with everything that is not the gallery or the summary spanning both tracks:
* `div.product` also contains the tabs, the #order section and the related products
* as siblings, and those are full-width bands.
*
* `row-gap: 0` on purpose. Those bands carry their own `.hs-section` padding, so a
* row gap would add 40px on top of it at every boundary.
*/
.woocommerce div.product{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:40px;
row-gap:0;
align-items:start;
}
.woocommerce div.product > *{grid-column:1 / -1}
.woocommerce div.product > .woocommerce-product-gallery{grid-column:1}
.woocommerce div.product > .summary{grid-column:2}
/*
* Undo the float layout the grid replaces.
*
* `!important` for the same reason the products grid above uses it: WooCommerce sets
* `float` and `width:48%` on both of these from `woocommerce-layout.css`, and a
* percentage width on a grid item resolves against the TRACK — so the 596px column
* rendered a 286px child inside it (48% of 596), measured. Matching Woo's specificity
* here means guessing at a selector that changes between releases, which is exactly
* the fragility the zero-template-override rule exists to avoid.
*/
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary{
float:none!important;
width:auto!important;
margin-bottom:0;
}
@media(max-width:820px){
.woocommerce div.product{grid-template-columns:minmax(0,1fr)}
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary{grid-column:1 / -1}
.woocommerce div.product > .summary{margin-top:24px}
}
/* ---- Single product: the gallery frame ----
*
* ── WHY THIS IS NOT `div.images img` ──
*
* It used to be exactly that: `.woocommerce div.product div.images img{radius:18px;
* border:1px}`. Modern WooCommerce keeps `images` as a legacy class ON the gallery
* (`woocommerce-product-gallery … images`), so the rule was not dead — it was
* OVER-BROAD. `div.images img` also matches every THUMBNAIL, so the thumbs rendered
* 148px wide with an 18px radius where the prototype has 70px and 10px, and the
* gallery column came out 739px tall against the prototype's 596.
*
* The frame belongs on the slider VIEWPORT, not on the images: FlexSlider builds a
* `.flex-viewport` with a 4700px-wide track inside it, so a border on the track is
* off-screen. `.woocommerce-product-gallery__wrapper` is the fallback for a product
* with one image, where FlexSlider does not initialise and there is no viewport.
*/
.woocommerce div.product .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery--columns-1 .woocommerce-product-gallery__wrapper{
border:1px solid var(--hs-line);
border-radius:18px;
overflow:hidden;
background:#0c0d0e;
}
.woocommerce div.product .woocommerce-product-gallery__image img{
display:block;
width:100%;
height:auto;
}
/* The zoom trigger sits inside the frame, so it needs to clear the radius. */
.woocommerce div.product .woocommerce-product-gallery{position:relative}
.woocommerce div.product .woocommerce-product-gallery__trigger{
top:14px;
right:14px;
z-index:3;
}
/* ---- Single product: thumbnails ----
* The prototype's `.thumbs span`: 70x70, 10px radius, 1px border, 10px apart, one row.
*/
.woocommerce div.product .flex-control-thumbs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:12px 0 0;
padding:0;
list-style:none;
}
/*
* `!important` on the BOX only.
*
* WooCommerce styles these through `.woocommerce div.product div.images
* .flex-control-thumbs li img` — four classes to this rule's three, so it wins on
* specificity no matter what order the stylesheets load in. Measured: the thumbs
* stayed 149px square against the prototype's 70px even with the rest of the gallery
* correct, which made the gallery column 743px tall against the prototype's 596.
*
* Adding `div.images` here would match its specificity and then depend on load order,
* which is worse: it breaks silently the day WooCommerce adds a class to that
* selector. Same call, and the same comment, as the products grid at the top of this
* file.
*/
.woocommerce div.product .flex-control-thumbs li{
width:70px!important;
margin:0!important;
float:none!important;
list-style:none;
}
.woocommerce div.product .flex-control-thumbs img{
width:70px!important;
height:70px!important;
object-fit:cover;
border:1px solid var(--hs-line);
border-radius:10px;
background:#0c0d0e;
/*
* Dimmed until chosen, so the frame above reads as the current image. WooCommerce
* ships `opacity:.5` on the inactive ones and `1` on hover; this keeps that idea
* but lifts the floor, because .5 on a dark background is close to invisible.
*/
opacity:.65;
cursor:pointer;
transition:opacity .18s ease,border-color .18s ease;
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active{
opacity:1;
border-color:var(--hs-accent);
}
@media(prefers-reduced-motion:reduce){
.woocommerce div.product .flex-control-thumbs img{transition:none}
}
/* Trust list, injected on woocommerce_single_product_summary. */
.hs-trustlist{
list-style:none;
margin:22px 0 0;
padding:18px 0 0;
border-top:1px solid var(--hs-line);
display:grid;
gap:10px;
}
.hs-trustlist li{display:flex;gap:10px;align-items:flex-start;color:var(--hs-muted);font-size:14px}
.hs-trustlist i{color:var(--hs-accent);width:20px;flex:0 0 20px;margin-top:3px}
/*
* NOT underlined. The prototype's `.pdp .meta` lines are plain text with the policy
* link inline, and the base `a{text-decoration:none}` applies — four underlined
* phrases in a row under the price read as a list of links rather than as
* reassurances, which is the opposite of what the block is for. The accent on hover
* is what marks them as clickable.
*/
.hs-trustlist a{color:var(--hs-muted);text-decoration:none}
.hs-trustlist a:hover,
.hs-trustlist a:focus-visible{color:var(--hs-accent);text-decoration:underline;text-underline-offset:3px}
/* ---- Tabs ------------------------------------------------------------
Three tabs now (Mô tả · Thông tin bổ sung · Đánh giá sản phẩm) and Vietnamese
labels are long, so the strip must scroll rather than wrap into a two-row
block that pushes the panel off screen on a phone. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
display:flex;
gap:6px;
margin:0 0 24px;
padding:0;
border-bottom:1px solid var(--hs-line);
overflow-x:auto;
scrollbar-width:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:none;
border:0;
border-bottom:2px solid transparent;
border-radius:0;
margin:0;
padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
display:block;
padding:14px 18px;
color:var(--hs-muted);
font-weight:700;
font-size:15px;
/*
* `line-height:1`, matching the prototype's `font:700 15px/1`. Inheriting the body
* 1.65 made every tab 56px tall against the prototype's 46 — a 10px difference on
* the one row that has to line up with the description below it.
*/
line-height:1;
white-space:nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--hs-accent)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--hs-accent)}
.woocommerce div.product .woocommerce-tabs .panel{color:var(--hs-dim)}
.woocommerce table.shop_attributes th{color:var(--hs-muted);font-weight:600}
.woocommerce table.shop_attributes td{color:var(--hs-text);font-style:normal}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{border-bottom:1px solid var(--hs-line);padding:13px 16px}
/* ---- Reviews ---------------------------------------------------------
Submission is closed (admin-curated only — see inc/woocommerce.php), so there
is no form to style. What matters is that the LIST reads well, because it is
the only social proof on the page. */
.woocommerce #reviews #comments ol.commentlist{padding:0;list-style:none}
.woocommerce #reviews #comments ol.commentlist li{margin-bottom:16px}
.woocommerce #reviews #comments ol.commentlist li .comment_container{
display:flex;
gap:14px;
background:var(--hs-card);
border:1px solid var(--hs-line);
border-radius:16px;
padding:22px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar{
position:static;
width:44px;height:44px;
border-radius:999px;
border:0;
padding:0;
background:var(--hs-elev);
}
.woocommerce #reviews #comments ol.commentlist li .comment-text{
border:0;
margin:0;
padding:0;
border-radius:0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{color:var(--hs-muted);font-size:13px}
.woocommerce #reviews #comments ol.commentlist li .comment-text .description{color:var(--hs-dim)}
.woocommerce-noreviews{color:var(--hs-muted)}
/* ---- Cart / checkout / account --------------------------------------
Kept minimal and structural. These screens carry real money, so the rule here
is legibility on the dark canvas, not decoration. */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:var(--hs-line);color:var(--hs-text)}
.woocommerce table.shop_table{
border-radius:14px;
border-collapse:collapse;
background:var(--hs-card);
}
.woocommerce table.shop_table th{color:var(--hs-muted)}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
background:var(--hs-card);
border:1px solid var(--hs-line);
border-radius:16px;
padding:22px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single{
background:var(--hs-bg);
border:1px solid var(--hs-line);
border-radius:10px;
color:var(--hs-text);
padding:12px 14px;
font-family:var(--hs-font);
min-height:auto;
height:auto;
}
.woocommerce form .form-row label{color:var(--hs-muted);font-size:13px;font-weight:600}
.woocommerce .quantity .qty{
background:var(--hs-bg);
border:1px solid var(--hs-line);
border-radius:10px;
color:var(--hs-text);
padding:10px;
}
/* select2 is WooCommerce's country/state dropdown; unstyled it renders as a
white box in the middle of the checkout. */
.select2-dropdown{background:var(--hs-card);border-color:var(--hs-line);color:var(--hs-text)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--hs-accent);color:var(--hs-accent-ink)}
/* ---- Breadcrumb / result count / ordering --------------------------- */
.woocommerce .woocommerce-breadcrumb{color:var(--hs-muted);font-size:13px}
.woocommerce .woocommerce-breadcrumb a{color:var(--hs-muted)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--hs-accent)}
.woocommerce .woocommerce-result-count{color:var(--hs-muted);font-size:14px}
.woocommerce .woocommerce-ordering select{
background:var(--hs-elev);
border:1px solid var(--hs-line);
border-radius:999px;
color:var(--hs-text);
padding:10px 14px;
font-family:var(--hs-font);
}
/* ---- Pagination ----------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
display:grid;
place-items:center;
min-width:42px;height:42px;
padding:0 12px;
border:1px solid var(--hs-line);
border-radius:999px;
color:var(--hs-muted);
font-weight:600;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
background:var(--hs-accent);
border-color:var(--hs-accent);
color:var(--hs-accent-ink);
}
/* ============================================================
PRODUCT DETAIL — the four blocks added on hooks
prototype/product.html has five sections; WooCommerce provides four of them once
the rules above are applied. These style the pieces added in inc/woocommerce.php:
the brand eyebrow, the rating row, the "Đặt mua" enquiry section and the
linked-posts rail.
============================================================ */
/* --- Brand eyebrow, directly above the h1 --- */
.hs-pdp__brand {
margin-bottom: 6px;
}
/*
* WooCommerce's own margin on the title would otherwise push the eyebrow away from
* the heading it labels. An eyebrow floating 20px above its title reads as an
* unrelated line of text.
*/
.hs-pdp__brand + .product_title,
.woocommerce div.product .hs-pdp__brand + .product_title {
margin-top: 0;
}
/* --- Rating row --- */
.hs-pdp__rating {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
}
/*
* The stars are one element with a clipped fill, not five glyphs.
*
* `--hs-star` is an inline SVG so the shape does not depend on Font Awesome having
* loaded — this row sits above the price and a missing icon font here would leave a
* naked "4,8/5" with no visual anchor. `background-size` pins one star to 1em so the
* track is exactly five stars wide at any font size.
*/
.hs-stars {
--hs-star: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ee6c19' d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E" );
position: relative;
display: inline-block;
width: 5em;
height: 1em;
flex: 0 0 auto;
/* The empty track: the same star, knocked back rather than a different shape. */
background: var( --hs-star ) repeat-x left center / 1em 1em;
opacity: 1;
}
/*
* The unfilled portion is the same star at low opacity, so a 3.5 rating reads as
* "three and a half of five" rather than "three and a half stars floating in space".
*/
.hs-stars::before {
content: "";
position: absolute;
inset: 0;
background: var( --hs-star ) repeat-x left center / 1em 1em;
opacity: 0.22;
}
.hs-stars i {
position: absolute;
inset: 0 auto 0 0;
display: block;
overflow: hidden;
background: var( --hs-star ) repeat-x left center / 1em 1em;
/* width is set inline from the score — see hoangsao_product_rating_row(). */
}
.hs-pdp__rating-link {
font-size: 14px;
color: var( --hs-muted );
text-decoration: none;
border-bottom: 1px solid var( --hs-line );
}
.hs-pdp__rating-link:hover,
.hs-pdp__rating-link:focus-visible {
color: var( --hs-accent );
}
/* ═══════════════════════════════════════════════════════════════════════
VERTICAL RHYTHM ON THE PRODUCT PAGE
Reported as "everything sticks together", and it is a real 84px-per-boundary
difference, not a perception.
THE PROTOTYPE'S MODEL: every band is `section.block { padding: 84px 0 }` and then
overrides `padding-top: 0`. So each band pays for the gap BELOW itself, and the
space between any two bands is the earlier one's 84px of bottom padding. All five
bands in prototype/product.html measure `0px / 84px`.
OUR PROBLEM: three of the five bands on the live page are WooCommerce's own markup,
which carries no `.hs-section` and therefore pays nothing — while our hook-added
`#order` section was given `--flush-top` on the assumption that the band above it
pays. Nobody paid. Measured on staging at 1440px:
band classes padding T / B
div.product (gal+summary) — 0 / 0
.woocommerce-tabs woocommerce-tabs wc-tabs-wrapper 0 / 0 ← Woo's
.hs-pdp-order hs-section hs-section--flush-top 0 / 84
.related related products 0 / 0 ← Woo's
boundary prototype staging
gallery/summary → tabs 84 33 (grid row slack only)
tabs → #order 84 0 ← "sticks together"
#order → related 84 84 ok
related → footer 84 0
So the tabs band and the related band are given the same 84px the prototype gives
them, and `#order` keeps its `--flush-top` because the band above it now pays.
`.woocommerce-tabs` has zero margin AND zero padding of its own (measured), so
there is nothing to double up against.
═══════════════════════════════════════════════════════════════════════ */
.woocommerce div.product .woocommerce-tabs {
padding: 84px 0;
}
.woocommerce div.product .related {
padding-bottom: 84px;
}
/* The same steps `.hs-section` uses in core.css, so the product page breathes like
every other page rather than keeping desktop spacing on a phone. */
@media ( max-width: 820px ) {
.woocommerce div.product .woocommerce-tabs {
padding: 60px 0;
}
.woocommerce div.product .related {
padding-bottom: 60px;
}
}
@media ( max-width: 560px ) {
.woocommerce div.product .woocommerce-tabs {
padding: 44px 0;
}
.woocommerce div.product .related {
padding-bottom: 44px;
}
}
/* --- "Đặt mua" enquiry section ---
*
* NO BACKGROUND, and that is the second half of the "everything sticks together"
* report. This used to paint the whole section `var(--hs-card)` with a top border,
* which put the left column's heading and paragraph on exactly the same fill as the
* form card on the right — so the band read as one flat grey slab 1232px wide
* instead of "text on the page, form in a card".
*
* prototype/product.html measures `rgba(0,0,0,0)` on `#order` and
* `rgb(27,30,34)` on `form.form` inside it. Only the form is a card.
*/
/*
* The form is capped and centred rather than full width. A 1280px-wide single-column
* form makes every field a 1200px input, which reads as a data-entry screen and
* measurably lowers completion.
*/
.hs-pdp-order .hs-bform {
max-width: 720px;
margin-inline: auto;
}
/*
* `scroll-margin-top` so the "#order" anchor does not land under the sticky header.
* The header is 90px; this matches `scroll-padding-top` in core.css. Do NOT also add
* scroll-padding to an ancestor — the two stack, and the section then sits 180px
* down the viewport.
*/
.hs-pdp-order {
scroll-margin-top: 90px;
}
/* --- Two columns: the pitch and the phone on the left, the form on the right ---
*
* `prototype/product.html` uses `.wrap.grid-2` here. It shipped as one centred
* column, which put 700px of explanation above the first field and pushed the submit
* button off a laptop screen.
*
* `align-items: start` so the two columns keep their own heights — stretched, the
* short left column would grow to match the form and the callout would float in the
* middle of it.
*/
.hs-pdp-order__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
/*
* The form is no longer centred by `.hs-bform`'s own max-width — it fills its column.
* Overriding here rather than changing `.hs-bform`, because the same form is centred
* on /booking/ where it IS the page and a full-width single-column form reads as a
* data-entry screen.
*/
.hs-pdp-order__form .hs-bform {
max-width: none;
margin-inline: 0;
}
.hs-pdp-order__pitch > p {
color: var( --hs-muted );
max-width: 46ch;
}
/* The call-us callout. Reuses `.hs-callout` from the shop archive — same component,
same left rail, and it already carries the accent border. */
.hs-pdp-order__call {
margin-top: 18px;
}
.hs-pdp-order__tel {
display: inline-block;
font-weight: 700;
font-size: 18px;
color: var( --hs-accent );
text-decoration: none;
}
.hs-pdp-order__tel:hover,
.hs-pdp-order__tel:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
.hs-pdp-order__hours {
display: block;
color: var( --hs-muted );
font-size: 14px;
margin-top: 4px;
}
@media ( max-width: 900px ) {
/*
* Stack, form FIRST. The pitch has done its job by the time someone has scrolled
* this far on a phone — they arrived by tapping "Đặt mua ngay" — so the fields
* should be what they land on, with the phone number still directly under them.
*/
.hs-pdp-order__grid {
grid-template-columns: minmax( 0, 1fr );
gap: 28px;
}
.hs-pdp-order__form {
order: -1;
}
}
/* --- The reassurance note under the buy row ---
*
* "Không cần thanh toán online — …". Pulled up against the buttons it explains; the
* buy row already carries 6px of bottom margin.
*/
.hs-pdp__note {
margin: -2px 0 0;
color: var( --hs-muted );
font-size: 13px;
line-height: 1.6;
max-width: 52ch;
}
/* --- Linked posts rail --- */
.hs-pdp-posts {
border-top: 1px solid var( --hs-line );
}
/*
* The eyebrow is a SIBLING of `section.related`, not a child of its h2 — see
* hoangsao_related_eyebrow() and the `.hs-related__head` block further down, which
* owns the spacing between the two.
*/
.hs-related__eyebrow {
display: block;
}
/* --- Buy row: "Đặt mua ngay" + "Gọi …" ---
*
* The primary call to action on this catalogue. YITH Catalog Mode hides
* add-to-cart, so without this the summary column runs price → description → SKU
* with nothing to click.
*/
.hs-pdp__buyrow {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 20px 0 6px;
}
/*
* `flex: 1 1 auto` with a floor, so the two buttons share the row on a wide column
* and stack cleanly when the column narrows — rather than a 50/50 split that leaves
* "Gọi 085 466 1234" wrapping onto two lines inside a pill.
*/
.hs-pdp__buyrow .hs-btn {
flex: 1 1 auto;
min-width: 190px;
min-height: 46px;
text-align: center;
white-space: nowrap;
}
/*
* WooCommerce's cart form sits directly above. When YITH hides the button the form
* still occupies the DOM at height 0 but keeps its margin, which would push the buy
* row away from the price it belongs to.
*/
.woocommerce div.product form.cart:empty,
.woocommerce div.product form.cart {
margin-bottom: 0;
}
/* --- Related products heading ---
*
* The eyebrow is a SIBLING of `section.related`, not a child of its h2: WooCommerce
* prints that heading through esc_html(), so no filter can put markup inside it.
* Pull the two together so they read as one heading block.
*/
.hs-related__head {
/* Eyebrow, then 10px, then the heading — the prototype's `.sec-head .eyebrow`
spacing. It was -18px, which pulled a 24px heading up against the eyebrow; with
the heading now at its proper 44px that reads as one collided block. */
margin-bottom: 10px;
}
/*
* "Sản phẩm liên quan" is a SECTION heading and must be sized like one.
*
* WooCommerce prints it as a bare `` with no class, so it fell through to the
* browser default and measured 24px/700 — while the "Đặt mua sản phẩm này" heading
* one band above it carries `.hs-h2` and measured 44px/800. The two were inverted
* against the prototype, which has the related heading at 44px and the order heading
* at 30px. That inversion is most of why the lower half of the page read as cramped:
* the biggest type on the page sat on a sub-heading and the real section heading
* looked like a caption.
*
* Values copied from `.hs-h2` in core.css rather than the class being added, because
* no filter can put a class on that heading — Woo passes it through esc_html().
*/
.woocommerce div.product .related > h2 {
font-size: clamp( 28px, 4.2vw, 44px );
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.01em;
/* 32px below, matching the prototype's `.sec-head { margin-bottom: 32px }`. */
margin: 0 0 32px;
}
/*
* And the order heading DOWN to the prototype's 30px. It is a sub-heading inside a
* two-column band, not a section heading — at 44px it competed with the product title
* and dwarfed the related-products heading below it.
*
* Overridden here rather than by swapping the class in inc/woocommerce.php: `.hs-h2`
* carries the weight, line-height and letter-spacing that are correct, and `.hs-h3`
* (24px) is too small. Only the size is wrong.
*/
.hs-pdp-order__pitch .hs-h2 {
font-size: clamp( 24px, 2.6vw, 30px );
margin: 10px 0 14px;
}
/* ============================================================
SHOP ARCHIVE CHROME
============================================================
The prototype's `.filterbar`, `.callout` and card `.tag`. Measured on staging the
archive had none of them: no brand filter, no price filter, no note about where
tables went, and not one card showing its brand.
------------------------------------------------------------ */
/* ---- Filter bar ---- */
.hs-filterbar{
background:var(--hs-surface,var(--hs-card));
border:1px solid var(--hs-line);
border-radius:16px;
padding:20px 22px;
margin-bottom:32px;
}
.hs-filterbar__row{
display:flex;
gap:26px;
align-items:flex-end;
flex-wrap:wrap;
}
.hs-filterbar__col{flex:1 1 240px;min-width:220px}
/* The brand column takes twice the room: seven chips against two number inputs. */
.hs-filterbar__col--brands{flex:2 1 420px}
.hs-filterbar h4{
font-weight:700;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--hs-accent);
margin:0 0 12px;
}
/* The chips already carry 28px of bottom margin for the home-page grid. Inside the
filter bar they are the last thing in their column, so the bar's own padding does
the spacing — same override the prototype makes with `.filterbar .chips`. */
.hs-filterbar .hs-chips{margin-bottom:0}
/* ---- Price filter ---- */
.hs-pricefilter__inputs{
display:flex;
gap:10px;
align-items:center;
}
.hs-pricefilter__inputs input{
flex:1;
min-width:0;
background:var(--hs-bg);
border:1px solid var(--hs-line);
border-radius:10px;
padding:10px 12px;
color:var(--hs-text);
font:inherit;
font-size:14px;
}
.hs-pricefilter__inputs input:focus-visible{
outline:2px solid var(--hs-accent);
outline-offset:1px;
}
/* `flex:none` so the button keeps its label instead of being squeezed by the two
inputs either side of it. */
.hs-pricefilter__go{flex:none;padding:10px 16px;min-height:42px}
.hs-pricefilter__range{
width:100%;
margin-top:14px;
accent-color:var(--hs-accent);
}
.hs-pricefilter__out{
color:var(--hs-accent);
font-weight:700;
font-size:14px;
margin-top:10px;
}
.hs-pricefilter__presets{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:12px;
}
@media(max-width:560px){
/* Stack, and let the button take the full width. Three controls on one row at
360px leaves each input about 90px wide, which cannot show "60.000.000". */
.hs-pricefilter__inputs{flex-wrap:wrap}
.hs-pricefilter__go{flex:1 0 100%}
}
/* ---- Callout: "tables live under Setup CLB" ---- */
.hs-callout{
background:var(--hs-surface,var(--hs-card));
border:1px solid var(--hs-line);
border-left:3px solid var(--hs-accent);
border-radius:0 12px 12px 0;
padding:18px 20px;
margin:0 0 40px;
color:var(--hs-muted);
}
.hs-callout a{
color:var(--hs-accent);
font-weight:700;
}
.hs-callout a:hover,
.hs-callout a:focus-visible{text-decoration:underline}
/* ---- Brand tag on a product card ----
Top-LEFT, where the badges (hs-card__badges) are top-right, so the two never
collide without either having to know about the other. */
.hs-card__tag{
position:absolute;
top:10px;
left:10px;
z-index:2;
background:rgba(14,15,17,.82);
border:1px solid var(--hs-line);
border-radius:999px;
color:var(--hs-accent);
font-weight:700;
font-size:10px;
letter-spacing:.06em;
text-transform:uppercase;
padding:5px 10px;
line-height:1.5;
white-space:nowrap;
}
/* ---- "Thông tin bổ sung": the spec table ----
*
* The prototype's `table.spec` — capped at 720px, the label column at 40%, generous
* row padding. WooCommerce renders `table.shop_attributes` here, and this is the tab
* the SKU moved into (hoangsao_product_sku_attribute), so it is now the first row of
* a table a buyer reads rather than a line interrupting the CTA.
*
* Unstyled, WooCommerce's own table draws alternating row backgrounds and italicises
* the value cell, which on the dark palette reads as a debug dump.
*/
.woocommerce div.product .woocommerce-tabs .shop_attributes {
width: 100%;
max-width: 720px;
border-collapse: collapse;
margin: 0;
border: 0;
}
.woocommerce div.product .woocommerce-tabs .shop_attributes tr,
.woocommerce div.product .woocommerce-tabs .shop_attributes th,
.woocommerce div.product .woocommerce-tabs .shop_attributes td {
background: none;
border: 0;
border-bottom: 1px solid var( --hs-line );
}
.woocommerce div.product .woocommerce-tabs .shop_attributes th {
width: 40%;
padding: 13px 16px;
text-align: left;
vertical-align: top;
color: var( --hs-muted );
font-weight: 600;
font-size: 14px;
}
.woocommerce div.product .woocommerce-tabs .shop_attributes td {
padding: 13px 16px;
font-size: 14px;
color: var( --hs-text );
}
/*
* WooCommerce wraps the value in a `
`, which brings the body margin with it and
* makes every row taller than its label. The cell padding is doing that job.
*/
.woocommerce div.product .woocommerce-tabs .shop_attributes td p {
margin: 0;
font-style: normal;
}