/**
 * Tầng mặc định của WooCommerce — trang cửa hàng, danh mục chưa có khung riêng,
 * trang thẻ và trang tìm kiếm hàng.
 *
 * Ba mươi danh mục sản phẩm hiện chia làm ba tầng giao diện. Nhánh Phào chỉ PU
 * đi qua `.ak-dm`, nhánh Thiết bị vệ sinh đi qua `.ak-tb`, chín danh mục còn
 * lại của nhánh Tấm ốp tường, Đồ nội thất và Keo dán đa năng không khớp bộ lọc
 * nào nên rơi về template gốc của WooCommerce. Năm trong chín danh mục đó nằm
 * ngay trên menu chính, tức là khách bấm từ menu là thấy tầng này.
 *
 * File này không dựng lại bố cục — nó nhận đúng khối HTML mà Flatsome in ra rồi
 * kéo về cùng ngôn ngữ hình ảnh với `.ak-tb`: cùng mạch nội dung 1520px, cùng
 * băng đầu nền xám nhạt, cùng ô danh mục ảnh trên chữ dưới, cùng thẻ hàng ảnh
 * 3:2 có gạch chân chạy khi rê chuột, cùng kiểu phân trang. Ba tầng đứng cạnh
 * nhau thì đọc ra là một bộ.
 *
 * Mọi quy tắc nằm dưới `body.ak-ch`, lớp do `inc/cua-hang.php` gắn và chỉ gắn
 * đúng những màn thuộc tầng này. Nhờ vậy file không bao giờ chạm tới hai khung
 * riêng, tới trang chủ hay tới trang chi tiết hàng, dù các màn đó cũng dùng
 * chung mấy lớp `.product-small` của Flatsome.
 *
 * Nạp sau `flatsome-shop` nên đè được mà không phải nống độ ưu tiên, trừ đúng
 * hai chỗ chính Flatsome đã ghi `!important` trước.
 *
 * Màu, cỡ chữ, khoảng cách và bo góc đều lấy từ `tokens.css`.
 *
 * @package Flatsome\Child
 */

body.ak-ch {
	--ch-den: var(--ak-mau-muc);
	--ch-xam: var(--ak-mau-mo);
	--ch-nen: var(--ak-mau-nen);
	--ch-nen-anh: var(--ak-mau-nen-anh);
	--ch-dai: var(--ak-mau-vien);
	--ch-toi: var(--ak-mau-toi);
}

/* Mạch nội dung
   -------------------------------------------------------------------------

   Bề mặt bán hàng dùng mạch rộng 1520px, đúng như trang danh mục thiết bị.
   Flatsome mặc định bó vào mạch hẹp hơn nhiều nên trên màn rộng lưới ba cột bị
   dồn vào giữa, hai bên trống huơ. */

/*
 * Đệm hai bên đặt ở `#main`, không đặt lên chính hàng lưới. Hàng lưới của
 * Flatsome bù lề bằng lề âm ăn khớp với đệm của từng cột con, thêm đệm vào đó
 * là hàng con bên trong lòi ra khỏi khung nhìn ở màn hẹp.
 */
body.ak-ch main#main {
	padding-right: var(--ak-le-rong);
	padding-bottom: var(--ak-cach-9);
	padding-left: var(--ak-le-rong);
}

body.ak-ch .shop-page-title .page-title-inner {
	max-width: var(--ak-rong-rong);
	padding-right: var(--ak-le-rong);
	padding-left: var(--ak-le-rong);
}

body.ak-ch main#main > .row.category-page-row,
body.ak-ch .woocommerce-pagination {
	max-width: var(--ak-rong-rong);
}

/* Băng đầu trang
   -------------------------------------------------------------------------

   Flatsome in tiêu đề, đường dẫn phân cấp, dòng đếm và ô sắp xếp vào cùng một
   khối rồi để trần trên nền trắng, sát ngay dưới đầu trang nên không có chỗ
   thở. Nay khối đó thành một băng nền xám nhạt chạy hết bề ngang, giống băng
   đầu của trang danh mục thiết bị. */

/*
 * Cố ý **không** động tới `padding-top` của băng này, kể cả bằng cách viết tắt
 * `padding`. `dau-trang.css` đặt `padding-top: 114px` ngay trên chính nó để
 * chừa chỗ cho đầu trang cố định, vì băng do Flatsome in ra từ móc
 * `flatsome_after_header` nên nằm ngoài thẻ `main` và không hưởng phần chừa
 * chỗ của `main`. Ghi đè lên là thẻ h1 tụt vào đúng vùng đầu trang đang che:
 * vẫn có trong mã nguồn, vẫn đọc được bằng trình đọc màn hình, nhưng không ai
 * nhìn thấy. Xem QĐ-39.
 *
 * Hai lớp gốc lại có độ đặc hiệu bằng nhau nên thắng thua chỉ do thứ tự nạp —
 * quá mong manh để dựa vào. Khoảng thở phía trên vì thế đặt ở khối con.
 */
body.ak-ch .shop-page-title.page-title {
	margin-bottom: var(--ak-cach-7);
	padding-bottom: var(--ak-cach-8);
	background: var(--ch-nen);
	border-bottom: 0;
}

body.ak-ch .shop-page-title .page-title-inner {
	align-items: flex-end;
	min-height: 0;
	padding-top: var(--ak-cach-6);
	padding-bottom: 0;
}

body.ak-ch h1.shop-page-title {
	margin: 0 0 var(--ak-cach-3);
	color: var(--ch-den);
	font-size: var(--ak-co-hero);
	font-weight: var(--ak-dam-rat);
	line-height: var(--ak-dong-chat);
	letter-spacing: var(--ak-gian-sit);
	text-transform: none;
}

/* Đường dẫn phân cấp. Bản gốc in hoa cỡ chữ thường nên nặng ngang tiêu đề. */
body.ak-ch .woocommerce-breadcrumb {
	margin: 0;
	color: var(--ch-xam);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: none;
}

body.ak-ch .woocommerce-breadcrumb a {
	color: var(--ch-xam);
	transition: color var(--ak-chuyen-nhanh);
}

body.ak-ch .woocommerce-breadcrumb a:hover {
	color: var(--ak-mau-do-dam);
}

body.ak-ch .woocommerce-breadcrumb .divider {
	margin: 0 var(--ak-cach-2);
	color: var(--ak-mau-vien-dam);
}

/* Dòng đếm kết quả và ô sắp xếp
   ------------------------------------------------------------------------- */

body.ak-ch .woocommerce-result-count {
	margin: 0 0 var(--ak-cach-2);
	color: var(--ch-xam);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-align: right;
}

body.ak-ch .woocommerce-ordering select.orderby {
	height: var(--ak-o-cao);
	min-width: 240px;
	padding: 0 var(--ak-cach-7) 0 var(--ak-cach-4);
	background-color: var(--ak-o-nen);
	border: 1px solid var(--ak-o-vien);
	border-radius: var(--ak-goc-sac);
	color: var(--ak-o-chu);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	letter-spacing: var(--ak-gian-nhe);
	box-shadow: none;
	transition: border-color var(--ak-chuyen-nhanh), box-shadow var(--ak-chuyen-nhanh);
}

body.ak-ch .woocommerce-ordering select.orderby:hover {
	border-color: var(--ak-o-vien-re);
}

body.ak-ch .woocommerce-ordering select.orderby:focus-visible {
	border-color: var(--ak-o-vien-tieu-diem);
	box-shadow: var(--ak-vong-tieu-diem);
	outline: none;
}

/* Nút Lọc của màn hẹp. Bản gốc là chữ in hoa trần, không ai nhận ra là nút. */
body.ak-ch .category-filtering .filter-button {
	display: inline-flex;
	align-items: center;
	gap: var(--ak-cach-2);
	margin-top: var(--ak-cach-3);
	padding: var(--ak-cach-2) var(--ak-cach-4);
	background: var(--ak-nut-vien-nen);
	border: 1px solid var(--ak-nut-vien-vien);
	border-radius: var(--ak-goc-sac);
	color: var(--ak-nut-vien-chu);
	font-size: var(--ak-co-vua-nho);
	letter-spacing: var(--ak-gian-vua);
	transition: background var(--ak-chuyen-nhanh), border-color var(--ak-chuyen-nhanh), color var(--ak-chuyen-nhanh);
}

body.ak-ch .category-filtering .filter-button:hover {
	background: var(--ak-nut-vien-nen-re);
	border-color: var(--ak-nut-vien-vien-re);
	color: var(--ak-nut-vien-chu-re);
}

/* Cột lọc bên trái
   ------------------------------------------------------------------------- */

body.ak-ch .shop-sidebar .widget {
	margin-bottom: var(--ak-cach-7);
}

body.ak-ch .shop-sidebar .widget-title {
	display: block;
	margin-bottom: var(--ak-cach-3);
	color: var(--ch-den);
	font-size: var(--ak-co-vua-nho);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

/* Gạch chia của Flatsome dày 3px và ngả màu chủ đạo cũ. Rút về một nét mảnh. */
body.ak-ch .shop-sidebar .is-divider {
	width: 100%;
	max-width: 100%;
	height: 1px;
	margin: 0 0 var(--ak-cach-4);
	background-color: var(--ch-dai);
}

body.ak-ch .shop-sidebar .searchform .search-field {
	height: var(--ak-o-cao);
	margin: 0;
	padding: 0 var(--ak-cach-4);
	background: var(--ak-o-nen);
	border: 1px solid var(--ak-o-vien);
	border-right: 0;
	border-radius: var(--ak-goc-sac) 0 0 var(--ak-goc-sac);
	color: var(--ak-o-chu);
	font-size: var(--ak-co-nho);
	box-shadow: none;
}

body.ak-ch .shop-sidebar .searchform .search-field:focus-visible {
	border-color: var(--ak-o-vien-tieu-diem);
	outline: none;
}

body.ak-ch .shop-sidebar .searchform .ux-search-submit {
	height: var(--ak-o-cao);
	min-height: var(--ak-o-cao);
	padding: 0 var(--ak-cach-4);
	background-color: var(--ak-nut-phu-nen);
	border: 0;
	border-radius: 0 var(--ak-goc-sac) var(--ak-goc-sac) 0;
	color: var(--ak-nut-phu-chu);
	transition: background-color var(--ak-chuyen-nhanh);
}

body.ak-ch .shop-sidebar .searchform .ux-search-submit:hover {
	background-color: var(--ak-nut-phu-nen-re);
}

/* Cây danh mục
   ------------------------------------------------------------------------- */

body.ak-ch .widget_product_categories .product-categories li {
	border-top: 0;
}

body.ak-ch .widget_product_categories .product-categories > li {
	border-bottom: 1px solid var(--ak-mau-vien-nhat);
}

body.ak-ch .widget_product_categories .product-categories a {
	padding: var(--ak-cach-3) 0;
	color: var(--ak-mau-chu);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	transition: color var(--ak-chuyen-nhanh);
}

body.ak-ch .widget_product_categories .product-categories a:hover {
	color: var(--ak-mau-do-dam);
}

body.ak-ch .widget_product_categories .children a {
	padding-left: var(--ak-cach-4);
	color: var(--ch-xam);
	font-size: var(--ak-co-vua-nho);
}

/* Danh mục đang xem: đây là chỗ duy nhất trong cột lọc được dùng đỏ. */
body.ak-ch .widget_product_categories .current-cat > a {
	color: var(--ak-mau-do-dam);
	font-weight: var(--ak-dam-vua);
}

body.ak-ch .widget_product_categories .count {
	color: var(--ak-mau-mo-nhat);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-nhe);
}

/* Mô tả danh mục
   ------------------------------------------------------------------------- */

body.ak-ch .term-description {
	max-width: var(--ak-rong-doc);
	margin-bottom: var(--ak-cach-6);
	color: var(--ak-mau-chu);
	font-size: var(--ak-co-vua);
	font-weight: var(--ak-dam-nhe);
	line-height: var(--ak-dong-thoang);
	letter-spacing: var(--ak-gian-nhe);
}

body.ak-ch .term-description p:last-child {
	margin-bottom: 0;
}

/* Lưới hàng
   -------------------------------------------------------------------------

   Bản gốc để mỗi thẻ tự cao theo nội dung, mà ảnh thì không cắt nên mười hai
   ảnh ra mười hai chiều cao. Hàng thứ hai của lưới vì thế so le hẳn một đoạn.
   Nay ô ảnh chốt tỉ lệ 3:2 và cả thẻ căng đều chiều cao. */

body.ak-ch .products.row {
	align-items: stretch;
}

body.ak-ch .products .product-small.col,
body.ak-ch .products .product-category.col {
	margin-bottom: var(--ak-cach-6);
}

body.ak-ch .products .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.ak-ch .products .box {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

body.ak-ch .products .box-image {
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--ch-nen-anh);
	border-radius: var(--ak-goc-sac);
	overflow: hidden;
}

/*
 * Chỉ căng khối bọc ảnh, chừa ra ba khối `.image-tools` mà Flatsome đặt chồng
 * lên ảnh. Quét trúng chúng thì nút "Xem nhanh" bị kéo cao bằng cả ô ảnh và rê
 * chuột vào là ô ảnh hoá một tấm đỏ đặc. Cùng cái bẫy đã gặp ở trang chủ, xem
 * QĐ-30.
 */
body.ak-ch .products .box-image > div:not(.image-tools),
body.ak-ch .products .box-image > div:not(.image-tools) > a,
body.ak-ch .products .box-image > a {
	display: block;
	height: 100%;
}

body.ak-ch .products .box-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nhãn giảm giá
   -------------------------------------------------------------------------

   Bản gốc là một vòng tròn đỏ đặc đường kính hơn 60px đè lên góc ảnh. Một lưới
   mười hai mặt hàng đang giảm giá là mười hai vòng đỏ nhảy ra cùng lúc, phá tỉ
   lệ đỏ của cả trang. Nay là một nhãn chữ nhật nhỏ nằm sát mép. */

body.ak-ch .products .badge-container {
	margin: 0;
	pointer-events: none;
}

body.ak-ch .products .badge,
body.ak-ch .products .badge.badge-circle {
	width: auto;
	height: auto;
	margin: 0;
}

body.ak-ch .products .badge .badge-inner {
	width: auto;
	height: auto;
	min-height: 0;
	padding: var(--ak-cach-1) var(--ak-cach-2);
	background-color: var(--ak-mau-do-dam);
	border: 0;
	border-radius: 0 0 var(--ak-goc-sac) 0;
	color: var(--ak-mau-trang);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-manh);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-vua);
	text-transform: uppercase;
}

/* Phần chữ của thẻ hàng
   ------------------------------------------------------------------------- */

body.ak-ch .products .box-text {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
	flex: 1 0 auto;
	padding: var(--ak-cach-3) 0 0;
	text-align: left;
}

/* Flatsome nhét dòng danh mục vào trong `.title-wrapper`, ngay trên tên hàng.
   Đảo lại bằng thứ tự flexbox cho khớp thẻ hàng của trang chủ và của khung
   thiết bị: tên trước, danh mục sau, giá cuối. */
body.ak-ch .products .box-text .title-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--ak-cach-1);
	order: 1;
}

body.ak-ch .products .title-wrapper .name {
	order: 1;
}

body.ak-ch .products .box-text .category {
	order: 2;
	margin: 0;
	opacity: 1;
	color: var(--ch-xam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: uppercase;
}

body.ak-ch .products .box-text .price-wrapper {
	order: 3;
	margin-top: auto;
	padding-top: var(--ak-cach-2);
}

body.ak-ch .products .name.product-title {
	margin: 0;
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
}

/* Gạch chân chạy từ trái sang khi rê chuột, đúng như khung thiết bị. Vẽ bằng
   ảnh nền chứ không bằng `text-decoration` để chạy được thành chuyển động. */
body.ak-ch .products .name.product-title a {
	display: inline;
	background-image: linear-gradient(var(--ch-den), var(--ch-den));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	color: var(--ch-den);
	transition: background-size var(--ak-chuyen);
}

body.ak-ch .products .col:hover .name.product-title a {
	background-size: 100% 1px;
}

body.ak-ch .products .price-wrapper .price {
	margin: 0;
	color: var(--ch-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: 18px; /* Cố ý giữ px: bên trong là bdi, del, ins của WooCommerce với cỡ chữ khác nhau. Xem QĐ-37. */
	letter-spacing: var(--ak-gian-nhe);
}

body.ak-ch .products .price-wrapper del,
body.ak-ch .products .price-wrapper del .amount {
	color: var(--ch-xam);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-nhe);
	opacity: 1;
}

body.ak-ch .products .price-wrapper ins {
	background: none;
	text-decoration: none;
}

/* Chưa có đánh giá thật nào nên dải sao luôn rỗng, giấu đi cho khỏi chiếm chỗ.
   Cùng cách xử lý với thẻ hàng trang chủ. */
body.ak-ch .products .star-rating,
body.ak-ch .products .rating-wrapper {
	display: none;
}

/* Ô danh mục con
   -------------------------------------------------------------------------

   Trang danh mục cha in ra một lưới ô danh mục thay cho lưới hàng. Dựng lại
   theo đúng ô danh mục của khung thiết bị: ảnh phía trên, dải chữ nền xám phía
   dưới, rê chuột thì dải chữ thành nền đen chữ trắng. */

body.ak-ch .products .product-category .col-inner > a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.ak-ch .products .product-category .box {
	overflow: hidden;
	background: var(--ak-mau-trang);
	border-radius: var(--ak-goc-sac);
}

/*
 * Flatsome dựng ô danh mục theo kiểu `box-badge`: dải chữ là khối định vị tuyệt
 * đối, đặt đè lên ảnh ở mức 15% tính từ đáy. Trả nó về dòng chảy bình thường
 * thì mới nằm được dưới ảnh như ô danh mục của khung thiết bị.
 */
body.ak-ch .products .product-category .box-text {
	position: static;
	bottom: auto;
	flex: 0 0 auto;
	padding: var(--ak-cach-4) var(--ak-cach-5);
	background: var(--ch-dai);
	text-align: left;
	transition: background var(--ak-chuyen-nhanh);
}

body.ak-ch .products .product-category .box-text .header-title {
	margin: 0;
	color: var(--ch-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-vua);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: uppercase;
	transition: color var(--ak-chuyen-nhanh);
}

body.ak-ch .products .product-category .box-text .count {
	margin: var(--ak-cach-1) 0 0;
	color: var(--ch-xam);
	font-size: var(--ak-co-vi);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	text-transform: uppercase;
	transition: color var(--ak-chuyen-nhanh);
}

body.ak-ch .products .product-category .col-inner:hover .box-text {
	background: var(--ch-toi);
}

body.ak-ch .products .product-category .col-inner:hover .box-text .header-title,
body.ak-ch .products .product-category .col-inner:hover .box-text .count {
	color: var(--ak-mau-trang);
}

/* Lớp phủ tối mà Flatsome đổ lên ảnh ô danh mục: bỏ hẳn, dải chữ bên dưới đã
   làm xong việc phân tách. */
body.ak-ch .products .product-category .box-image .overlay,
body.ak-ch .products .product-category .box-image .bg-fill {
	display: none;
}

/* Phân trang
   -------------------------------------------------------------------------

   Bản gốc là các viên tròn nền đỏ đặc. Đổi sang kiểu của khung thiết bị: số
   trần, trang đang xem gạch chân một nét đen. */

body.ak-ch .woocommerce-pagination {
	margin-top: var(--ak-cach-7);
}

body.ak-ch .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ak-cach-2);
	margin: 0;
	border: 0;
}

body.ak-ch .woocommerce-pagination ul.page-numbers > li {
	margin: 0;
	border: 0;
}

body.ak-ch .woocommerce-pagination .page-number {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none !important; /* Flatsome đặt nền cho viên trang đang xem kèm !important. */
	border: 0;
	border-radius: 0;
	color: var(--ch-den);
	font-size: var(--ak-co-nho);
	font-weight: var(--ak-dam-thuong);
	line-height: var(--ak-dong-vua);
	letter-spacing: var(--ak-gian-nhe);
	transition: border-color var(--ak-chuyen-nhanh);
}

body.ak-ch .woocommerce-pagination .page-number:hover,
body.ak-ch .woocommerce-pagination .page-number.current {
	border-bottom: 1px solid var(--ch-den);
	color: var(--ch-den) !important; /* Cùng lý do: chữ trắng của viên đang xem cũng kèm !important. */
}

body.ak-ch .woocommerce-pagination .page-number i {
	font-size: var(--ak-co-h5);
}

/* Màn hẹp
   -------------------------------------------------------------------------

   Hai mốc bắt buộc của site, xem quy ước điểm ngắt trong `tokens.css`. */

@media (max-width: 849px) {
	body.ak-ch .shop-page-title.page-title {
		margin-bottom: var(--ak-cach-6);
		padding-bottom: var(--ak-cach-7);
	}

	body.ak-ch .shop-page-title .page-title-inner {
		padding-top: var(--ak-cach-5);
	}

	body.ak-ch .woocommerce-result-count {
		text-align: left;
	}

	body.ak-ch .woocommerce-ordering select.orderby {
		width: 100%;
		min-width: 0;
	}

	body.ak-ch main#main {
		padding-bottom: var(--ak-cach-8);
	}
}

@media (max-width: 549px) {
	body.ak-ch .products .product-small.col,
	body.ak-ch .products .product-category.col {
		margin-bottom: var(--ak-cach-5);
	}

	body.ak-ch .products .product-category .box-text {
		padding: var(--ak-cach-3) var(--ak-cach-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ak-ch .products .name.product-title a {
		transition: none;
	}
}