/* ==========================================================================
   TRANG CHI TIET SAN PHAM - GIAO DIEN 1                       02/09/2026
   ==========================================================================
   Chi nap o trang chi tiet san pham (xem library/tai-nguyen.php, nhom
   'san-pham').

   Xu ly hai chuyen tren dien thoai:

   1. BON KHOI NOI DUNG BI CAT CUT GIUA CHU.
      css/ke-thua/style.css cho .content-descr / .content-special /
      .content-noibat / .content-phukien "max-height: 552px; overflow: hidden"
      va mot nut "Xem them ... ▼" de mo ra. Van de la MEP CAT khong co dau
      hieu gi: chu bi xen ngang than ("Đèn lest pha trước" chi con nua tren),
      nhin nhu trang loi chu khong phai "con noi dung ben duoi". Nut thi lai
      dat "margin-top: -1px" nen no de LEN chinh dong chu bi cat do.

      Cach sua: mot dai mo trang o mep duoi khoi (::after), va tach nut ra
      khoi mep cat. Mo roi (lop .expand do js/ke-thua/main-script.js gan) thi
      dai mo bien mat.

   2. LE TRAI/PHAI MOI KHOI MOT KIEU.
      Do duoc tren man hinh 500px: 5 / 10 / 20 / 30px tuy khoi - vi moi khoi
      nam o mot do sau khac nhau trong he thong cot Bootstrap. Chot lai mot
      moc chung.
   ========================================================================== */

/* ---- Dai mo o mep cat --------------------------------------------------- */

/* position:relative de dai mo (::after) bam theo khoi. overflow:hidden da co
   san tu style.css nen dai mo nam trong khoi, khong tho ra ngoai. */
.product-single .content-descr,
.product-single .content-special,
.product-single .content-noibat,
.product-single .content-phukien {
	position: relative;
}

.product-single .content-descr::after,
.product-single .content-special::after,
.product-single .content-noibat::after,
.product-single .content-phukien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;   /* khong chan cu bam vao anh/lien ket ben duoi */
}

/* Da bam "Xem them" -> khoi mo het, khong con mep cat nao de bao hieu. */
.product-single .content-descr.expand::after,
.product-single .content-special.expand::after,
.product-single .content-noibat.expand::after,
.product-single .content-phukien.expand::after {
	display: none;
}

/* ---- Nut "Xem them ... ▼" ---------------------------------------------- */

/* style.css dat "margin: -1px auto 0" - nut keo len de trong nhu mot cai tai
   dinh vao vien duoi cua khoi. O day khoi khong co vien nhin thay duoc, nen
   cai "tai" do thanh ra mot mieng den noi giua doan chu bi cat. Dua nut
   xuong duoi han va bo bo goc mot ben. */
/* max-width 320px la phan quan trong: style.css cho nut "width: 50%", doi
   thanh "auto" khong thi tren man hinh 1366px nut keo dai het ca hang
   (do duoc 9..1342) - mot cai nut den dai 1.3 met qua man hinh. The <a> nay
   la display:block nen width:auto = choan het cho; max-width moi la thu
   giu no lai thanh mot vien thuoc gon o giua. */
body .product-single .descr-show-more {
	width: auto;
	min-width: 200px;
	max-width: 320px;
	margin: 12px auto 0;
	padding: 9px 22px;
	border-radius: 20px;
}

/* ---- Bon khoi noi dung ve chung MOT LE ---------------------------------
   Do duoc tren man hinh 500px truoc khi sua: chu trong .content-noibat bat
   dau o 20px, con trong .content-descr / .content-special o 30px, va hai
   dong tieu de <h3> lai o 40px. Ba muc thut le khac nhau trong bon khoi le
   ra phai giong het nhau.

   Nguyen nhan: .content-noibat nam thang trong ".row", con hai khoi kia bi
   boc them mot ".col-md-12" (padding 10px). Rieng <h3> thi tu no cung co
   them padding 10px nua.

   Sua: go padding cua CAI COT boc hai khoi kia (dung :has de chi dung toi
   cot do, khong dung toi cot cua luoi san pham lien quan ben duoi - go
   padding o day se lam cac o san pham dinh sat vao nhau), va go padding
   rieng cua <h3> vi khoi cha da co padding roi.

   Trinh duyet khong ho tro :has() thi bo qua luat nay va giu nguyen nhu
   truoc - lech le mot chut, khong vo bo cuc. */
@media (max-width: 767px) {
	.product-single .row > div[class*="col-"]:has(> .content-descr),
	.product-single .row > div[class*="col-"]:has(> .content-special),
	.product-single .row > div[class*="col-"]:has(> .content-noibat),
	.product-single .row > div[class*="col-"]:has(> .content-phukien) {
		padding-left: 0;
		padding-right: 0;
	}

	body .product-single .content-descr,
	body .product-single .content-special,
	body .product-single .content-noibat,
	body .product-single .content-phukien {
		margin-left: 0;
		margin-right: 0;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Khoi cha da co padding 10px - <h3> khong can them lan nua. */
	body .product-single .content-block-title {
		padding-left: 0;
		padding-right: 0;
	}

	/* Anh trong noi dung do quan tri dan vao thuong mang width/height co dinh
	   (vd width="800") - tren man hinh 500px chung tran ra ngoai khoi. */
	body .product-single .content-descr img,
	body .product-single .content-special img,
	body .product-single .content-noibat img,
	body .product-single .content-phukien img {
		max-width: 100%;
		height: auto;
	}

	/* Bang thong so do quan tri dan vao: cho cuon ngang trong khung rieng
	   thay vi day rong ca trang. */
	body .product-single .content-descr table,
	body .product-single .content-special table {
		max-width: 100%;
		display: block;
		overflow-x: auto;
	}

	body .product-single .descr-show-more {
		min-width: 0;
		width: calc(100% - 20px);
	}
}