/* ==========================================================================
   SaLy Academy - tuy bien giao dien
   Moi rule deu co ly do o comment. Khong them rule "cho dep" ma khong dung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. An sao danh gia khi khoa hoc chua co danh gia nao.
   Tutor render 5 sao rong khi rating_count = 0, khien khoa hoc trong nhu bi
   cham 0/5. Card co danh gia that se co them .tutor-ratings-average, nen chi
   an khi khong co phan tu do. Trinh duyet khong ho tro :has() se giu nguyen
   hien trang cu - khong gay loi.
   -------------------------------------------------------------------------- */
.tutor-course-card .tutor-ratings:not(:has(.tutor-ratings-average)) {
	display: none;
}

/* --------------------------------------------------------------------------
   2. Vung cham cho nut "Loai bo" trong gio hang.
   Truoc day la link chu nho (~14px cao) nam ngay duoi gia tien - de bam nham.
   Dat toi thieu 44px theo chuan cham cua Apple HIG / Material.
   -------------------------------------------------------------------------- */
.cart-product-remove a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	color: #b42318;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cart-product-remove a:hover,
.cart-product-remove a:focus-visible {
	color: #7a1610;
}

/* --------------------------------------------------------------------------
   3. Focus ring nhin thay duoc tren toan bo phan tu tuong tac.
   Theme cha khong dinh nghia :focus-visible, nguoi dung ban phim bi lac huong.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Chieu cao toi thieu cho o nhap tren mobile.
   Duoi 16px iOS tu dong zoom trang khi focus; duoi 44px kho cham chinh xac.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea,
	#coupon_code {
		min-height: 44px;
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   5. Nhan chi danh cho trinh doc man hinh.
   Dung cho label cua o tim kiem: an truc quan nhung van doc duoc, va van
   nhan duoc focus khi nguoi dung tab toi (khong dung display:none).
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   6. Thu tu khoi tom luoc gio hang.
   Mac dinh: tong tien -> nut thanh toan -> o ma giam gia (nam duoi nut, de bi
   bo qua). Dua o ma giam gia len truoc de nguoi mua nhap ma, thay tong tien
   cap nhat, roi moi bam thanh toan.
   -------------------------------------------------------------------------- */
.cart-collaterals {
	display: flex;
	flex-direction: column;
}

.cart-collaterals .cart-coupon {
	order: -1;
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   7. Dai tran an cho san pham so.
   -------------------------------------------------------------------------- */
.saly-reassurance {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.saly-reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #14532d;
}

.saly-reassurance__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #16a34a;
}

/* --------------------------------------------------------------------------
   8. Trat tu tieu de trang gio hang / thanh toan.
   Truoc day ten trang (h1) hien nho hon tieu de muc ben duoi (h3), nguoc voi
   thu bac that. Tra lai dung trong so truc quan.
   -------------------------------------------------------------------------- */
.cart-page-heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 16px;
}

.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. Nut dat hang luon trong tam nhin tren mobile.
   Truoc day nut nam duoi man hinh dau, nguoi dung phai cuon tim. Ghim day
   man hinh o mobile de hanh dong chinh luon san sang.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.woocommerce-checkout #payment .form-row.place-order {
		position: sticky;
		bottom: 0;
		z-index: 20;
		margin: 0 -16px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
	}

	.woocommerce-checkout #place_order {
		width: 100%;
		min-height: 48px;
	}
}

/* --------------------------------------------------------------------------
   10. Con so uy tin dung chu so co do rong deu.
   Widget counter dem tu 0 len, moi buoc so co do rong khac nhau nen khoi so
   bi nhay ngang trong luc chay. tabular-nums giu moi chu so cung do rong.
   -------------------------------------------------------------------------- */
.saly-stats-section .elementor-counter-number-wrapper {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
   11. The giang vien: can day cac the cho deu nhau khi tieu su dai ngan khac nhau.
   -------------------------------------------------------------------------- */
.saly-teachers-section .elementor-widget-image-box,
.saly-teachers-section .elementor-image-box-wrapper {
	height: 100%;
}

/* --------------------------------------------------------------------------
   12. Khoang cach giua cac the danh gia.
   KHONG dung height:100% o day: moi cot chua 2 the, neu the nao cung cao 100%
   cot thi tong chieu cao thanh 200%, tran ra ngoai section va de len muc
   "THANH PHAM HOC VIEN ONLINE" ben duoi.
   -------------------------------------------------------------------------- */
.saly-testimonials-grid .elementor-widget-testimonial:not(:last-child) {
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   13. Khoi cam ket tren mobile: xep doc, giam khoang cach cho gon.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.saly-commitments-section .elementor-icon-box-wrapper {
		margin-bottom: 18px;
	}

	.saly-stats-section .elementor-counter-number-wrapper {
		font-size: 30px;
	}
}

/* --------------------------------------------------------------------------
   14. Tieu de khoi cam ket.
   Theme cha ap style h3 chung nen tieu de bi to va xuong 3 dong, day khoi cao
   khong can thiet. Ep ve dung co da chon.
   -------------------------------------------------------------------------- */
.saly-commitments-section .elementor-icon-box-title,
.saly-commitments-section .elementor-icon-box-title a {
	font-size: 17px;
	line-height: 1.4;
	margin-bottom: 6px;
}


/* --------------------------------------------------------------------------
   15. Co chu tieu de trong cac the image-box tu tao.
   Theme cha co rule chung cho h3 (36px) de len cai dat cua widget, khien ten
   giang vien / hoc vien to bang tieu de muc va xuong nhieu dong. Ep ve dung co.
   -------------------------------------------------------------------------- */
.saly-testimonials-grid .elementor-image-box-title,
.saly-teachers-section .elementor-image-box-title {
	font-size: 18px;
	line-height: 1.35;
	margin-bottom: 8px;
}

.saly-teachers-section .elementor-image-box-title {
	font-size: 22px;
}

/* --------------------------------------------------------------------------
   16. Cac the danh gia trong cung hang cao bang nhau.
   An toan vi moi cot chi chua DUNG MOT widget - khac voi loi tran o muc 12.
   -------------------------------------------------------------------------- */
.saly-testimonials-grid > .elementor-container {
	align-items: stretch;
}

.saly-testimonials-grid .elementor-column > .elementor-widget-wrap,
.saly-testimonials-grid .elementor-widget-image-box {
	height: 100%;
}

.saly-testimonials-grid .elementor-image-box-img img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}