@charset "UTF-8";

/* ============================================================================
   TRANG SAN PHAM - style RIENG
   ----------------------------------------------------------------------------
   Chi nap trong Product.cshtml. Hien lo phan LUOI SAN PHAM cua trang nhom.

   Thong so chep tu ban dang chay, doc trong tep luu trang (group.html):
	 .product-page .col-inner {
		 background: #fff;
		 border: 1px solid #ff7e09;
		 padding: 30px;
		 border-radius: 10px;
		 transition: 0.15s ease-in-out;
	 }
	 .product-title a { font-size: 16px; font-weight: 600; color: #ff7e09; }

   Ban ta dang de vien XAM, dem 10px va ten chu 14px mau chu thuong - nen the
   nhin thap va nhat hon han ban goc.
   ========================================================================== */

@layer overrides {

	/* Vien CAM chu khong phai xam, dem rong gap ba, bo goc 10px.
	   'position: relative' lay theo .col-inner ben ban goc - de sau nay muon
	   dat nhan (moi / giam gia) vao goc the thi khong phai sua lai. */
	.az-template-product .az-template-item {
		position: relative;
		padding: 30px;
		background: #fff;
		border: 1px solid var(--az-template-brand);
		border-radius: 10px;
		transition: .15s ease-in-out;
	}

	/* Ban goc doi bong khi re chuot, vien giu nguyen mau cam */
	.az-template-product .az-template-item:hover {
		border-color: var(--az-template-brand);
		box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
	}

	/* Ten san pham: to hon mot bac, dam hon, mau cam va CAN GIUA.
	   Ban goc dat text-align: left cho ca the nhung khoi chu ben trong
	   (.box-text cua khung Flatsome) lai can giua - nhin tren anh chup thay ro
	   o muc ten dai hai dong. */
	.az-template-product .az-template-name {
		margin-top: 18px;
		text-align: center;
		font-size: 16px;
		/* Dam han mot bac so voi 600 - de ten noi len tren nen trang cua the */
		font-weight: 700;
		line-height: 1.5;
	}

	/* Dat do dam thang tren the <a>: 'font-weight' o the cha khong chac an,
	   vi style.css co the khai rieng cho the <a> ben trong. */
	.az-template-product .az-template-name a {
		color: var(--az-template-brand);
		font-weight: bold;
	}

	.az-template-product .az-template-name a:hover { color: var(--az-template-brand-dark); }

	/* ---- KHUNG ANH ----
	   Ban goc KHONG ep anh vao khung vuong: the .box-image de anh cao theo ti le
	   that (khong co lop 'has-equal-box-heights' trong markup cua ho), va khong
	   co nen xam phia sau vi ca the da nen trang.

	   Ban ta dang dat aspect-ratio: 1/1 cong object-fit: contain, nen anh ngang
	   bi don vao giua mot o vuong - thua hai dai trong tren duoi, the nhin
	   trong hon va anh be di. Tra ve cach cua ban goc.

	   Luu y: bo khung vuong thi anh cao thap khac nhau tuy ti le tung tam. Cac
	   the van bang chieu cao (luoi tu keo deu), chi ranh anh la khong thang
	   hang - dung nhu ban dang chay. Muon thang hang tro lai thi dat lai
	   aspect-ratio o day. */
	/* ---- KHUNG ANH: TI LE CO DINH 16:9 ----
	   Ban dang chay khoa ti le bang ky thuat dem tren:
	     <div class="image-zoom image-cover" style="padding-top:56.25%">
	   56,25% chinh la 9/16 -> khung 16:9. Nho vay anh nao cung chiem dung mot
	   khung, cac the bang chieu cao va hang ten thang mot dong.

	   Ban 88 toi da GO khoa ti le o day vi doan ban goc de anh cao tu nhien -
	   doan sai. Anh chup 17/08 cho thay anh cao thap khac nhau lam ca luoi
	   nhay, dung cai can tranh.

	   Loai tru khoi "San pham tuong tu": khoi do dung ti le 1:1 rieng. */
	.az-template-product:not(.az-template-related) .az-template-image {
		aspect-ratio: 16 / 9;
		background: transparent;
		border-radius: 0;
	}

	/* 'contain' chu khong 'cover': anh hop san pham co chu va logo, cat di la
	   mat thong tin - anh doc se bi xen mat tren duoi. Doi sang 'cover' neu
	   muon anh lap day khung dung nhu ban goc, doi lai la chap nhan bi cat. */
	.az-template-product:not(.az-template-related) .az-template-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* ======================================================================
	   CHI TIET SAN PHAM - THU VIEN ANH
	   ----------------------------------------------------------------------
	   Ban dang chay xep dai anh nho THANG DUNG BEN TRAI anh chinh, co thanh
	   cuon mau cam khi nhieu anh. Ban ta dang xep NGANG va dat DUOI anh chinh.

	   Anh phu von da co trong CSDL (405 anh / 109 san pham) nhung khong hien,
	   vi spGuestProductDetail chi doc Feature 'Product/Update' trong khi anh
	   cua site nay nam o Feature 'Product' - xem ban va SP kem theo.
	   ====================================================================== */
	/* Cot anh nho phai cao DUNG BANG anh chinh.
	   Khong dung flex duoc: du dat 'stretch' hay 'flex-start', chieu cao hang
	   van lay theo phan tu CAO NHAT - nam anh nho chong len nhau cao hon anh
	   chinh nen cot bi tho dai xuong duoi (thay ro trong anh chup 17/08).
	   Cach chac: tha noi cot anh nho, keo cang tu dinh xuong day cua khoi.
	   Khoi luc nay chi con anh chinh trong dong chay nen chieu cao cua no
	   CHINH LA chieu cao anh chinh. */
	.az-template-infoimage {
		/* ---- BA SO GOC CUA VUNG ANH ----
		   Khai mot cho de chung luon an khop nhau:
		     --az-thumb      : canh mot o anh nho (vuong)
		     --az-thumb-gap  : khoang cach giua cac o
		     --az-main-h     : chieu cao khung anh chinh = DUNG 4 o anh nho
		                       (4 canh + 3 khoang giua) = 4*112 + 3*10 = 478px
		   Doi --az-thumb hoac so 4 thi ca cot anh nho lan khung anh chinh tu
		   dieu chinh theo, khong phai sua nhieu cho. */
		--az-thumb: 112px;
		--az-thumb-gap: 10px;
		--az-main-h: calc(var(--az-thumb) * 4 + var(--az-thumb-gap) * 3);

		position: relative;
		display: block;
		/* Chua cho cot anh nho cong khoang cach 14px */
		padding-left: calc(var(--az-thumb) + 14px);

		/* ---- CHAN TRAN BE NGANG ----
		   .az-template-infoproduct la LUOI, nen khoi nay la mot o luoi. O luoi
		   mac dinh co 'min-width: auto': no KHONG chiu co nho hon noi dung ben
		   trong. Tren dien thoai, dai anh nho xep ngang rong 6x92 + 5x10 = 602px
		   -> ca khoi bi nong ra 602 trong khi khung nhin chi 370 (do duoc
		   17/08). Slick sau do do cai 602 do, dat track, khoi lai nong them,
		   setPosition do lai... vong lap day len 22 TRIEU pixel.
		   'min-width: 0' cat dung vong do ngay tu goc. */
		min-width: 0;
		max-width: 100%;
	}

	/* Cot anh nho: khong co giai, tu cuon khi nhieu anh.
	   Ban truoc dung align-items: stretch de cot cao bang anh chinh - nhung
	   anh chinh nap luoi (data-src), luc dung khung no chua co chieu cao, keo
	   theo cot anh nho cao 0 va bi overflow cat sach: the van nam trong DOM
	   ma khong nhin thay gi. Doi sang chieu cao rieng, khong con phu thuoc
	   vao anh chinh tai xong hay chua.
	   520px = 5 anh 92px + 4 khoang 10px, vua het mot man thuong. */
	.az-template-thumbnails {
		/* Tha noi ben trai, keo cang tu dinh xuong day -> cao bang anh chinh.
		   Be rong CO DINH 112px: truoc day dat 22% nen tren khung rong no
		   chiem toi ~132px, an mat be ngang cua anh chinh (do duoc 455 so voi
		   587 ben ban goc). So co dinh giu cot anh nho khong doi du khung to
		   nho the nao. */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--az-thumb);

		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--az-thumb-gap);
		margin-top: 0;
		overflow-y: auto;

		/* Thanh cuon mau thuong hieu, giong ban goc */
		scrollbar-width: thin;
		scrollbar-color: var(--az-template-brand) rgba(0, 0, 0, .08);
	}

	/* Ban goc dat 10px: .vertical-thumbnails::-webkit-scrollbar { width: 10px } */
	.az-template-thumbnails::-webkit-scrollbar { width: 10px; }
	.az-template-thumbnails::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); }
	.az-template-thumbnails::-webkit-scrollbar-thumb { background: var(--az-template-brand); border-radius: 99px; }

	/* O anh nho lap day be rong cot (112px), giu khung vuong nhu ban goc.
	   'flex: 0 0 auto' de cac o khong bi ep det khi nhieu anh. */
	.az-template-thumbnails a {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		flex: 0 0 auto;
	}

	/* Anh dang xem duoc danh dau bang vien cam dam hon */
	.az-template-thumbnails a.on { border-color: var(--az-template-brand); }

	/* Anh chinh: chiem phan con lai, vien cam bo goc nhu ban goc.
	   'min-width: 0' cho phep no co lai trong flex, khong thi anh rong day
	   phan tu ra va cot anh nho bi day ra ngoai. */
	.az-template-infoimage .az-template-image {
		flex: 1 1 auto;
		min-width: 0;
		border: 1px solid var(--az-template-brand);
		border-radius: 10px;
		overflow: hidden;
	}

	/* ---- TI LE KHUNG ANH CHINH: DAT THANG LEN <img> ----
	   Do tren ban dang chay: div.flickity-slider = 587,43 x 440,56 -> 4:3.
	   Khung co ti le CO DINH, khong cao theo tung tam anh, nen khoi anh khong
	   nhay len xuong khi doi anh.

	   Ban truoc toi dat aspect-ratio o KHUNG NGOAI roi bat tung tang cua slick
	   ke thua height:100% (.slick-list > .slick-track > .slick-slide > img).
	   Chuoi do dai va chi can MOT tang hut la anh ve 0 - dung cai da xay ra
	   tren dien thoai: khung vien cam co chieu cao ma trong rong tron.

	   Gio dat ti le thang len <img>: anh tu co chieu cao that, moi tang bao
	   ngoai tu cao theo. Chieu cao di tu TRONG ra NGOAI nen khong con phu
	   thuoc vao chuoi ke thua nao. */
	.az-template-infoimage .az-template-image img {
		display: block;
		width: 100%;
		/* Chieu cao CO DINH thay cho aspect-ratio: khung da co be rong tinh
		   san nen khong can suy chieu cao tu be rong nua. Dat thang len <img>
		   de chieu cao di tu TRONG ra NGOAI - moi tang cua slick tu cao theo,
		   khong phai keo chuoi height:100% qua bon tang (bai hoc ban 106). */
		height: var(--az-main-h);
		aspect-ratio: auto;
		/* 'contain' chu khong 'cover': anh san pham co chu va hop, cat di la
		   mat thong tin. Anh khong dung 4:3 se co vien trang hai ben. */
		object-fit: contain;
	}

	/* ---- KHUNG HAI COT ----
	   Ban goc: .single-product .product-main { padding: 80px 0 }
	   Ban ta dang 30px nen vung anh sat tren duoi han so voi ho.

	   'align-items: flex-start' de hai cot cung bat dau tu DINH. Mac dinh flex
	   la 'stretch': cot chu bi keo cao bang cot anh roi noi dung tu doi cho ben
	   trong - nhin ra thanh tho thut khong deu. */
	.az-template-infoproduct {
		padding: 80px 0;
		align-items: flex-start;
	}

	/* ---- CHIA COT ----
	   style.css dung LUOI, khong phai flex:
	     .az-template-infoproduct {
	         display: grid;
	         grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	         gap: 34px;
	     }
	   Hai cot chia DOI BANG NHAU: (1240 - 34) / 2 = 603px moi ben - dung con
	   so do duoc trong log 17/08. Ghi chu "ban goc chia 7/5" cung voi
	   'flex: 7 1 0' o cuoi style.css la VO NGHIA: o luoi khong dung 'flex'.
	   Ban truoc toi doi thanh 'flex: 9 1 0' nen cung khong an gi.

	   Vi sao khung anh khong rong duoc: cot trai 603, tru 126 dem trai con
	   477 - trong khi khung can 637,3. 'max-width: 100%' cat xuong 477, va do
	   la ly do anh mai khong to ra du chieu cao da dung.

	   Cot trai can: 126 (dem) + 637,3 (khung 4:3 cao 478) = 763,3 -> lay 764.
	   'minmax(0, 764px)' cho phep no CO LAI khi khung nhin hep hon 1270 -
	   dat cung 764px thi man 1024 se tran. */
	.az-template-infoproduct {
		grid-template-columns: minmax(0, 764px) minmax(0, 1fr);
		/* style.css dat 34px - noi them cho khoi anh va khoi chu tho hon */
		gap: 40px;
	}

	/* slick boc moi anh trong mot the con - keo chieu cao xuyen qua, khong thi
	   anh khong biet lay chieu cao o dau. */
	.az-template-infoimage .az-template-image .slick-slide > div { line-height: 0; }

	/* ---- NUT PHONG TO ----
	   Ban goc dat o goc DUOI TRAI cua anh chinh, hinh tron mau cam, bieu tuong
	   mui ten bon huong mau trang. Neo theo .az-template-infoimage (da
	   position: relative) chu khong theo .az-template-image - slick doi cau
	   truc ben trong khoi do nen neo vao se troi. */
	/* ---- KHUNG ANH CHINH ----
	   Chieu cao lay DUNG bang cot 4 o anh nho, roi be rong suy ra tu ti le
	   4:3 (478 x 4/3 = 637,3px). Nhu vay cot anh nho luon hien tron 4 o, khong
	   du khong thieu.

	   Be rong TINH SAN thay vi 'fit-content': slick can mot so do cu the ngay
	   luc khoi tao; de no tu do theo noi dung thi so do doi qua lai va sinh
	   vong lap - dung loi da gap ban 108. */
	.az-template-imagewrap {
		position: relative;
		height: var(--az-main-h);

		/* Be rong suy ra tu chieu cao qua 'aspect-ratio', KHONG tinh bang
		   calc(var(--az-main-h) * 4 / 3).
		   Ly do: --az-main-h ban than no da la mot calc(), nen viet nhu tren
		   thanh calc() LONG calc() - Chrome bo ca dong do, khung tro ve vuong
		   (do duoc 715 x 715 thay vi 637 x 478). Cung dung bay da ghi trong
		   Intro.css o cho 'max(-150px, calc(-8vw))'.
		   'aspect-ratio' cong chieu cao co dinh cho ra be rong ma khong can
		   phep tinh nao. */
		aspect-ratio: 4 / 3;
		width: auto;

		min-width: 0;
		max-width: 100%;
	}

	.az-template-zoom {
		position: absolute;
		left: 16px;
		bottom: 16px;
		z-index: 3;

		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: var(--az-template-brand);
		color: #fff;
		font-size: 18px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
		transition: background .2s ease, transform .2s ease;
	}

	.az-template-zoom:hover {
		background: var(--az-template-brand-dark);
		color: #fff;
		transform: scale(1.06);
	}

	/* ---- DANH SACH TRONG MO TA NGAN ----
	   Cac muc "Thiet ke sang trong", "He thong chip LED"... dang dinh sat nhau
	   va thut le hoi sau. Ban dang chay de chung thoang hon: dau cham tron gan
	   le trai cua khoi chu, va moi muc cach nhau mot khoang ro rang. */
	/* style.css dat lai cho MOI danh sach trong site:
	     ul { list-style: none; margin: 0; padding: 0 }
	   Do la reset co y cho menu, duong dan, thanh nut - KHONG nen sua o do.
	   Nhung no cung tat luon DAU CHAM TRON cua danh sach trong bai, ma ban
	   truoc toi chi khai margin/padding nen quen khoi phuc 'list-style'.

	   Neo qua ca hai lop cha (.az-template-shortdesc nam trong
	   .az-template-infosummary) de do dac hieu du cao, khong phai dua vao
	   moi thu tu lop @layer. */
	.az-template-infosummary .az-template-shortdesc ul,
	.az-template-infosummary ul {
		list-style: disc;
		margin: 12px 0 16px;
		padding-left: 22px;
	}

	.az-template-infosummary .az-template-shortdesc ol,
	.az-template-infosummary ol {
		list-style: decimal;
		margin: 12px 0 16px;
		padding-left: 22px;
	}

	.az-template-infosummary .az-template-shortdesc li,
	.az-template-infosummary li {
		display: list-item;
		margin-bottom: 10px;
		line-height: 1.6;
	}

	.az-template-infosummary li:last-child { margin-bottom: 0; }

	/* Danh sach trong khoi noi dung tab cung dinh cung mot reset */
	.az-template-tabs .az-template-content ul {
		list-style: disc;
		margin: 12px 0 16px;
		padding-left: 22px;
	}

	.az-template-tabs .az-template-content ol {
		list-style: decimal;
		margin: 12px 0 16px;
		padding-left: 22px;
	}

	.az-template-tabs .az-template-content li { display: list-item; }

	/* ======================================================================
	   VUNG NOI DUNG TAB (mo ta + thong so ky thuat)
	   ----------------------------------------------------------------------
	   Thong so chep tu tep luu trang cua ban goc:
	     .single-product .woocommerce-tabs .tabs   { display: none }
	     .single-product .woocommerce-Tabs-panel table
	         { border-color: #f37321; width: 90%; margin: auto }
	     .single-product .woocommerce-Tabs-panel td
	         { border-color: #ff7e09; text-align: center; padding: 16px;
	           font-size: 20px; color: #0a0a0a }
	     .tab-panels .entry-content { padding: 0 }
	   ====================================================================== */

	/* Ban goc AN han thanh tab tren trang chi tiet - do la ly do ben do khong
	   thay chu "Mo ta", noi dung bat dau thang tu tieu de trong bai. */
	.az-template-tabs .az-template-tabhead { display: none; }

	.az-template-tabs { margin-top: 0; }

	/* ---- TIEU DE TRONG NOI DUNG ----
	   Thong so lay tu DevTools ban goc:
	     h1..h6, .heading-font { font-weight: 700; font-family: Montserrat;
	                             color: #0a0a0a; margin-top: 0;
	                             margin-bottom: .5em; width: 100% }
	     .h3, h3               { font-size: 1.25em }
	   Co chu de theo 'em' chu khong px: khung Flatsome dat h2 = 1.6em,
	   h3 = 1.25em, nen doi sang px se lech khi co chu goc thay doi. */
	.az-template-tabs .az-template-content h2,
	.az-template-tabs .az-template-content h3,
	.az-template-tabs .az-template-content h4 {
		margin-top: 0;
		margin-bottom: .5em;
		width: 100%;
		color: var(--az-template-text);
		font-weight: 700;
		font-family: var(--az-template-font);
	}

	/* ---- h2: co luat RIENG trong tab, khong dung co mac dinh ----
	   Tim thay trong tep luu trang ban goc:
	     #tab-description h2 { padding-bottom: 50px; text-transform: uppercase;
	                           font-size: 24px; line-height: 30px;
	                           text-align: center }
	   Hai diem truoc do toi bo sot:
	     - 'line-height: 30px' (thay vi 1.6 mac dinh = ~41px): dong chu gon lai,
	       chu trong THANH hon han - dung cai ban thay "manh hon".
	     - 'padding-bottom: 50px': khoang cach lon xuong khoi ben duoi.
	   Co chu cung la 24px chu khong phai 1.6em (~25,6px). */
	.az-template-tabs .az-template-content h2 {
		text-align: center;
		text-transform: uppercase;
		font-size: 24px;
		line-height: 30px;
		padding-bottom: 50px;
		margin-bottom: 0;
	}

	/* ---- h3: CAN TRAI ----
	   Ban goc khong dat luat rieng cho h3 trong tab nen no dung mac dinh cua
	   khung: font-size 1.25em, margin-top 0, margin-bottom .5em.
	   Khoang cach phia TREN ben do den tu the <p>&nbsp;</p> nam san trong noi
	   dung. Ban ta khong chac co the do (tuy luc nhap lieu) nen dat margin-top
	   tuong duong - nhin thay khoang tho giong ban goc.
	   Chu nghieng dam la do <em><strong> trong noi dung, khong phai CSS. */
	.az-template-tabs .az-template-content h3 {
		text-align: left;
		font-size: 1.25em;
		line-height: 1.4;
		margin-top: 1.8em;
		margin-bottom: .6em;
	}

	/* Tieu de dau tien trong khoi thi khong can day xuong */
	.az-template-tabs .az-template-content > h3:first-child { margin-top: 0; }

	/* ---- DO DAM CUA <strong> TRONG TIEU DE ----
	   Doi chieu DevTools hai ban (17/08):
	     ban ta  : font-weight 900 -> dung Montserrat-Thin-BLACK
	     ban goc : font-weight 900 -> dung Montserrat-Thin-BOLD
	   Cung khai 900 nhung phong dung ra KHAC nhau: ban goc khong nap do 900
	   nen trinh duyet lui ve Bold (700), con ta nap du 400;500;600;700;900 nen
	   lay dung Black. Do la ly do chu ben ta day hon han.

	   So 900 den tu the <strong> trong tieu de: <h2><strong>...</strong></h2>.
	   Mac dinh 'strong' la 'bolder', cha da 700 nen 'bolder' nhay len 900.
	   Ghim ve 700 de dung do dam ma ban goc thuc su dung.

	   Sua o DAY chu khong bo do 900 khoi duong nap phong: cho khac trong trang
	   van co the can den no. */
	.az-template-tabs .az-template-content :is(h2, h3, h4) :is(strong, b) {
		font-weight: 700;
	}

	.az-template-tabs .az-template-content h4 { font-size: 1.1em; }

	/* Doan van va danh sach: giu co chu goc cua than trang, dong thoang */
	.az-template-tabs .az-template-content p,
	.az-template-tabs .az-template-content li {
		font-size: 1em;
		line-height: 1.6;
		color: var(--az-template-text);
	}

	.az-template-tabs .az-template-content li { margin-bottom: .4em; }

	/* Bang thong so: rong 90% va CAN GIUA, vien cam. Ban ta dang vien xam va
	   trai het be ngang khoi. */
	.az-template-tabs .az-template-content table {
		width: 90%;
		margin: 0 auto;
		border-collapse: collapse;
		border: 1px solid var(--az-template-brand);
	}

	/* O bang: CAN GIUA, dem 16px, chu 20px. Ban ta dang can trai va chu nho. */
	.az-template-tabs .az-template-content td,
	.az-template-tabs .az-template-content th {
		border: 1px solid var(--az-template-brand);
		padding: 16px;
		text-align: center;
		font-size: 20px;
		line-height: 1.5;
		color: var(--az-template-text);
		background: transparent;
	}

	/* Ban goc khong to dam hay doi nen cho hang dau - moi o nhu nhau */
	.az-template-tabs .az-template-content th { font-weight: 400; }

	.az-template-tabs .az-template-content tr:nth-child(even) td { background: transparent; }

	/* ======================================================================
	   KHOI "SAN PHAM TUONG TU"
	   ----------------------------------------------------------------------
	   Ban goc:
	     <h3 class="product-section-title ... pt-half pb-half uppercase">
	     <div class="row has-equal-box-heights large-columns-3 ...">
	   Tieu de KHONG co gach chan, va o san pham KHONG co vien - de tran, chi
	   anh va ten. Khac han luoi o trang nhom (vien cam, dem 30px).

	   Ban ta dung chung lop .az-template-product cho ca hai cho nen khoi nay
	   an theo kieu the co vien cua trang nhom. Go rieng o day.
	   ====================================================================== */

	/* CANH BAO CHO NGUOI SUA SAU:
	   Moi luat trong khoi nay neo theo '.az-template-related' - lop RIENG cua
	   khoi "San pham tuong tu". KHONG doi sang '.az-template-productgrid':
	   lop do dung CHUNG voi luoi chinh cua trang nhom, va ban 103-104 da tung
	   dinh dung loi nay - go mat vien cam cua trang nhom va bien no thanh bang
	   truot. Hai khoi trong giong nhau nhung kieu nguoc nhau.

	   Tieu de: bo gach chan cam cua .az-template-title, giu chu hoa can trai */
	.az-template-relatedtitle {
		margin: 40px 0 20px;
		padding-bottom: 0;
		border-bottom: none;
	}

	/* O san pham: de tran nhu ban goc */
	.az-template-related .az-template-item {
		padding: 0;
		background: transparent;
		border: none;
		border-radius: 0;
	}

	.az-template-related .az-template-item:hover {
		box-shadow: none;
		transform: none;
	}

	/* Ten san pham: CAN TRAI (luoi trang nhom can giua) */
	.az-template-related .az-template-name {
		margin-top: 12px;
		text-align: left;
	}

	/* ---- KHUNG ANH BANG NHAU ----
	   Ban goc dat lop 'has-equal-box-heights' cho hang nay: moi o cao bang
	   nhau nen ten san pham nam thang mot hang, khong so le.
	   O trang nhom ta da BO khoa ti le (anh cao theo ti le that) - dung cho
	   cho do, nhung o day thi khong: chi can mot anh cao hon la ca hang ten
	   bi lech.
	   Dung 'contain' chu khong 'cover': anh hop san pham co chu, cat di la mat
	   thong tin. */
	.az-template-related .az-template-image {
		aspect-ratio: 1 / 1;
		background: transparent;
	}

	.az-template-related .az-template-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* ---- BANG TRUOT ----
	   Product.js gan lop nay sau khi slick khoi tao xong. Phai go 'display:
	   grid' di: slick chuyen cac o vao .slick-track cua no, de nguyen luoi thi
	   ca bang truot bi nhet vao MOT o luoi. */
	.az-template-related.az-template-slickon {
		display: block;
		grid-template-columns: none;
	}

	/* slick boc moi o them mot the con - keo chieu cao xuyen qua de cac o
	   trong mot man cao bang nhau. */
	.az-template-related.az-template-slickon .slick-track {
		display: flex;
		align-items: stretch;
	}

	.az-template-related.az-template-slickon .slick-slide {
		height: auto;
		padding: 0 10px;
	}

	.az-template-related.az-template-slickon .slick-slide > div { height: 100%; }

	/* ======================================================================
	   MAN HEP
	   ====================================================================== */
	@media (max-width: 900px) {

		/* Ban ta chi co dem 15px cua .az-template-container nen the gan cham
		   mep man. Ban goc cong them dem cua cot (khung Flatsome: khung ngoai
		   15px + cot 10px o hang 'row-small') nen le rong hon han - thay ro khi
		   dat hai anh chup 16/08 canh nhau.
		   Them 10px cho luoi -> tong 25px moi ben, bang ban goc. */
		.az-template-product {
			padding: 0 10px;

			/* Mot cot tren man hep nen 'gap' thanh khoang cach DOC giua cac the.
			   Mac dinh 16px hoi sat; ban goc thoang hon. */
			gap: 20px;

			/* Cach khoi phia tren (bang anh nhom hoac doan gioi thieu) - ban goc
			   chua mot khoang ro rang o day, ban ta dang dinh sat. */
			padding-top: 16px;
		}

		/* Dem trong the 30px la vua o man rong, nhung tren dien thoai an mat
		   qua nhieu be ngang - anh bi thu nho lai. Ha mot bac, van giu duoc
		   khoang tho quanh anh. */
		.az-template-product .az-template-item { padding: 20px; }

		/* Tru khoi "San pham tuong tu" - o do khong co the nen khong co dem */
		.az-template-related .az-template-item { padding: 0; }

		/* Man hep khong du cho cho cot anh nho ben trai - tra ve xep ngang
		   duoi anh chinh, cuon ngang khi nhieu anh. */
		/* TRA VE MOT COT.
		   style.css da co '.az-template-infoproduct { grid-template-columns:
		   1fr }' cho man hep, NHUNG luat cua ta nam trong @layer overrides nen
		   thang luat do o MOI be ngang - khong khai lai o day thi dien thoai
		   van chia hai cot 764px va vo hoan toan. */
		.az-template-infoproduct {
			grid-template-columns: 1fr;
		}

		.az-template-infoimage {
			display: block;
			padding-left: 0;
		}

		/* HUY chieu cao va be rong co dinh cua ban may tinh.
		   478px cao va 637px rong la tinh theo cot 4 o anh nho ben trai - man
		   hep khong con cot do, va 637px thi tran han ra ngoai khung nhin.
		   Tra ve cach dang chay tot: be rong theo cha, chieu cao theo ti le. */
		.az-template-imagewrap {
			height: auto;
			width: auto;
			/* Huy ca ti le: o day chieu cao do chinh <img> quyet dinh (img giu
			   4:3), khong con lay tu cot anh nho ben trai nua. De nguyen ti le
			   o the boc thi hai ben cung doi khoa nhau. */
			aspect-ratio: auto;
		}

		.az-template-infoimage .az-template-image img {
			height: auto;
			aspect-ratio: 4 / 3;
		}

		.az-template-thumbnails {
			position: static;
			flex-direction: row;
			flex-wrap: nowrap;
			margin-top: 10px;
			overflow-x: auto;
			overflow-y: hidden;

			/* 'width: auto' o day la sai: khoi flex khong xuong dong se rong
			   theo TONG cac o (602px) va nong ca khoi cha ra - 'overflow-x'
			   khong bao gio kich hoat vi phan tu co bi chat dau ma phai cuon.
			   Ghim 100% va min-width 0 thi no gioi han trong be ngang cha,
			   phan thua moi chuyen thanh cuon ngang. */
			width: 100%;
			min-width: 0;
			max-width: 100%;
		}

		.az-template-thumbnails a { width: 92px; flex: 0 0 92px; }

		/* Bang thong so: man hep thi 90% van con chat, tra ve trai het be ngang
		   va ha co chu - de nguyen 20px thi chu xuong dong lung tung. */
		.az-template-tabs .az-template-content table { width: 100%; }

		.az-template-tabs .az-template-content td,
		.az-template-tabs .az-template-content th {
			padding: 10px 8px;
			font-size: 15px;
		}

		/* h2 dat px co dinh (theo ban goc) nen phai ha tay o man hep;
		   dem 50px cung qua nhieu khi man ngan. */
		.az-template-tabs .az-template-content h2 {
			font-size: 20px;
			line-height: 26px;
			padding-bottom: 28px;
		}

		.az-template-tabs .az-template-content h3 { margin-top: 1.4em; }

		/* Nut da neo theo the boc nen tu bam goc anh chinh, chi thu nho lai */
		.az-template-zoom {
			left: 12px;
			bottom: 12px;
			width: 42px;
			height: 42px;
			font-size: 16px;
		}
	}
}

/* ============================================================================
   MUI TEN CHUYEN ANH - DAT NGOAI @layer, CO Y
   ----------------------------------------------------------------------------
   Trong CSS Cascade Layers, luat KHONG thuoc layer nao thang MOI luat nam
   trong layer - ke ca layer dung cuoi. slick.css / slick-theme.css do
   AZ.LoadPlugin nap thang bang the <link>, khong boc layer, nen chung de bep
   ca @layer overrides.

   Day la ly do mui ten khong hien o ban 95: slick-theme.css dat
	 .slick-prev:before { color: white }
   mau trang tren nen anh sang -> vo hinh. Luat doi mau cua ta nam trong layer
   nen thua.

   Bay gio dua ra ngoai layer va nang do dac hieu len ba lop, khong can
   !important (da doi chieu: slick khong dung !important o bat ky dau).

   LUU Y CHO NGUOI SUA SAU: moi luat de bep plugin nap dong (slick, magnific,
   select2) deu phai viet NGOAI @layer. Da vap dung loi nay hai lan trong dot
   16-17/08: mot lan o cham dieu huong trang Gioi thieu, mot lan o day.
   ========================================================================== */
@media (min-width: 901px) {

	/* Thong so lay tu DevTools ban goc (.flickity-prev-next-button):
	     width: 36px; top: 40%; bottom: 40%; color: #111;
	     background: transparent; border: none; opacity: 0;
	   Truoc do toi doan mau cam - sai, ho dung mau chu toi.
	   'top/bottom: 40%' cho nut cao dung 20% chieu cao anh, khong phai mot o
	   vuong co dinh. */
	.az-template-infoimage .az-template-image .slick-prev,
	.az-template-infoimage .az-template-image .slick-next {
		z-index: 2;
		width: 36px;
		height: auto;
		top: 40%;
		bottom: 40%;
		margin: 0;
		padding: 0;
		background: transparent;
		border: none;
		opacity: 0;
		transform: none;
		transition: opacity .3s ease;
	}

	.az-template-infoimage .az-template-image:hover .slick-prev,
	.az-template-infoimage .az-template-image:hover .slick-next {
		opacity: 1;
	}

	.az-template-infoimage .az-template-image .slick-prev { left: 8px; }
	.az-template-infoimage .az-template-image .slick-next { right: 8px; }

	/* slick-theme.css ve mui ten bang ky tu cua phong chu rieng 'slick', mac
	   dinh mau TRANG - vo hinh tren nen anh sang. Doi sang dau ngoac nhon giong
	   hinh mui ten cua ban goc, mau chu toi. Phai dat lai font-family: ky tu
	   nay khong co trong phong chu 'slick'. */
	.az-template-infoimage .az-template-image .slick-prev:before,
	.az-template-infoimage .az-template-image .slick-next:before {
		font-family: inherit;
		font-size: 52px;
		font-weight: 300;
		line-height: 1;
		color: var(--az-template-text);
		opacity: 1;
	}

	.az-template-infoimage .az-template-image .slick-prev:before { content: '\2039'; }
	.az-template-infoimage .az-template-image .slick-next:before { content: '\203A'; }
}

/* Man cam ung khong co :hover - luon hien mui ten, nhung nho hon */
@media (max-width: 900px) {

	.az-template-infoimage .az-template-image .slick-prev,
	.az-template-infoimage .az-template-image .slick-next {
		z-index: 2;
		width: 36px;
		height: 36px;
		opacity: 1;
	}

	.az-template-infoimage .az-template-image .slick-prev { left: 6px; }
	.az-template-infoimage .az-template-image .slick-next { right: 6px; }

	.az-template-infoimage .az-template-image .slick-prev:before,
	.az-template-infoimage .az-template-image .slick-next:before {
		font-family: inherit;
		font-size: 40px;
		font-weight: 300;
		line-height: 1;
		color: var(--az-template-text);
		opacity: 1;
		text-shadow: 0 1px 4px rgba(255, 255, 255, .6);
	}

	.az-template-infoimage .az-template-image .slick-prev:before { content: '\2039'; }
	.az-template-infoimage .az-template-image .slick-next:before { content: '\203A'; }
}

/* ============================================================================
   MUI TEN CUA BANG TRUOT "SAN PHAM TUONG TU" - NGOAI @layer
   ----------------------------------------------------------------------------
   Cung ly do nhu mui ten cua anh san pham: slick-theme.css khong boc layer nen
   de bep @layer overrides. Xem ghi chu day du o khoi tren.
   Ban goc dung 'slider-nav-reveal': mui ten nam HAI BEN, hien mo va ro han khi
   re chuot vao ca khoi.
   ========================================================================== */
.az-template-related .slick-prev,
.az-template-related .slick-next {
	z-index: 2;
	width: 36px;
	height: 60px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	opacity: .35;
	transform: translateY(-50%);
	transition: opacity .3s ease;
}

.az-template-related:hover .slick-prev,
.az-template-related:hover .slick-next { opacity: 1; }

.az-template-related .slick-prev { left: -30px; }
.az-template-related .slick-next { right: -30px; }

.az-template-related .slick-prev:before,
.az-template-related .slick-next:before {
	font-family: inherit;
	font-size: 48px;
	font-weight: 300;
	line-height: 1;
	color: var(--az-template-text);
	opacity: 1;
}

.az-template-related .slick-prev:before { content: '\2039'; }
.az-template-related .slick-next:before { content: '\203A'; }

/* Man hep khong con cho cho mui ten nam ngoai - keo vao trong mep anh */
@media (max-width: 900px) {

	.az-template-related .slick-prev,
	.az-template-related .slick-next { opacity: 1; }

	.az-template-related .slick-prev { left: 2px; }
	.az-template-related .slick-next { right: 2px; }

	.az-template-related .slick-prev:before,
	.az-template-related .slick-next:before {
		font-size: 36px;
		text-shadow: 0 1px 4px rgba(255, 255, 255, .7);
	}
}