@charset "UTF-8";

/* ============================================================================
   TRANG GIOI THIEU - style RIENG cua trang
   ----------------------------------------------------------------------------
   Vi sao tach ra khoi style.css:
	 Tep chung dai 2200 dong, sua mot luat cho trang nay de cham vao trang khac.
	 Tep nay CHI duoc nap trong Intro.cshtml nen sua thoai mai, khong the lam
	 hong Trang chu / San pham / Tin tuc.

   Vi sao dung @layer overrides:
	 style.css khai thu tu tang o dong 4:
	   reset, tokens, base, layout, components, template, utilities, overrides
	 va toan bo luat cua no nam trong tang 'template'. Tang 'overrides' dung SAU
	 nen moi luat o day deu thang, KHONG can mot dau !important nao.
	 Nho vay muon tra ve nhu cu chi can bo dong nap trong Intro.cshtml.

   Bo cuc:
	 PHAN 1 - dung chung hai kho man
	 PHAN 2 - man rong (>= 901px): truot tung muc bang slick
	 PHAN 3 - dien thoai (<= 900px): cuon thuong, sua anh nen va dem header
   ========================================================================== */

@layer overrides {

	/* ======================================================================
	   PHAN 1 - DUNG CHUNG
	   ====================================================================== */

	/* ---- ANH NEN CAP TRANG ----
	   Gan vao <body> de nen bao HET trang chu khong chi rieng khoi ke chuyen.
	   Khung da co san co che nay: style.css dat body { background: url(images/
	   bg.jpg) ... fixed }. O day chi doi anh cho rieng trang Gioi thieu.

	   Dung ::before voi position: fixed chu KHONG dung background-attachment:
	   fixed tren chinh <body>:
	     Safari tren iOS BO QUA 'fixed'. Khi do 'cover' tinh theo chieu cao CA
	     THAN TRANG - rat cao - nen anh bi phong to gap may lan, moi man chi con
	     mot mang toi (dung loi trong anh chup 16/08).
	     ::before la the that nen 'fixed' luon dung, phu tron mot khung nhin va
	     dung yen khi cuon - giong het ban dang chay. */
	body:has(.az-template-story)::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		pointer-events: none;
		background-color: var(--az-template-dark);
		background-image: url("images/bg-intro.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

	/* Khoi ke chuyen khong tu ve nen nua - da co nen cap trang lo */
	.az-template-story {
		background-image: none;
		background-color: transparent;
	}

	/* Chu luon nam TREN lop nen */
	.az-template-storybody {
		position: relative;
		z-index: 1;
	}

	/* BAT BUOC: 'sticky' khong chay khi to tien co overflow: hidden, ma
	   .az-template-story trong style.css dat dung thuoc tinh do. Truoc day
	   script.js go bang cach gan lop 'az-template-storyready' - nhung tu khi
	   Intro.js tu boc muc thi ham ben script.js tu thoat va khong con gan lop
	   nua. Mo thang o day de khong phu thuoc vao tep chung.
	   Than trang da co overflow-x: hidden nen khong sinh thanh cuon ngang. */
	.az-template-story {
		overflow: visible;
	}

	/* ======================================================================
	   PHAN 2 - MAN RONG: truot tung muc bang slick
	   Ban dang chay dung slick voi vertical: true, cham dieu huong doc ben
	   trai (the goc: row-collapse slide-text hide-for-medium slick-vertical).
	   ====================================================================== */
	@media (min-width: 901px) {

		/* Tat bat dinh khi cuon: gio chuyen muc bang slick chu khong bang cuon
		   trang, de ca hai cung chay se giat. */
		html:has(.az-template-story) {
			scroll-snap-type: none;
		}

		.az-template-story {
			padding: calc(var(--az-template-header-h) + 56px) 6vw 56px;
		}

		/* ---- MOI MUC CHIEM TRON MOT KHUNG NHIN ----
		   Ban truoc dat 530px voi ghi chu "ban goc do duoc 1270 x 530".
		   Phep do do SAI: 530 la chieu cao cua khoi chu ben trong, khong phai
		   cua ca man. Anh chup 17/08 cho thay ben do moi chuong ("2018 - KHOI
		   NGUON"...) chiem TRON chieu cao man hinh, anh nen phu kin mot man.
		   Tra ve 100vh - cung dung bang gia tri ma style.css dat san.

		   Dem tren phai chua cho header: khoi story keo len duoi header bang
		   margin-top am, khong bu lai thi tieu de chui xuong duoi thanh menu. */
		.az-template-storyslide {
			min-height: 100vh;
			padding: calc(var(--az-template-header-h) + 20px) 0 40px;
			justify-content: center;
			scroll-snap-align: none;
			scroll-snap-stop: normal;
		}

		/* Cot cham cu do script.js tu ve - gio slick tu sinh cham nen bo di.
		   Intro.js cung go the nay, day la chot chan phong khi JS chay cham. */
		.az-template-storynav { display: none; }

		/* slick doi the con truc tiep -> tra lai canh le cho khuon chu.
		   height: auto cho tung muc de adaptiveHeight do dung chieu cao that,
		   khong cat mat doan cuoi cua muc dai. */
		.az-template-story .slick-list,
		.az-template-story .slick-track { width: 100%; }
		.az-template-story .slick-slide { height: auto; }
		.az-template-story .slick-list { transition: height .3s ease; }

		/* Slick hong (vd nap thieu tep): tra ve cuon doc thuong - cac muc xep
		   lien nhau, van doc duoc het noi dung, chi mat hieu ung truot. */
		.az-template-storyplain .az-template-storyslide { min-height: 0; }
	}

	/* ======================================================================
	   PHAN 3 - DIEN THOAI: cuon vuot binh thuong, KHONG dung slick
	   Ban goc cung khong dung: the slider ben do mang lop 'hide-for-medium'.
	   Ba loi thay trong hai anh chup 16/08 duoc sua o day.
	   ====================================================================== */
	@media (max-width: 900px) {

		/* LOI 1 - anh nen khong hien dung: da xu ly bang nen cap trang o PHAN 1.
		   O day chi lo phan dem. Dem duoi chua cho thanh nut cam co dinh
		   (Tim duong / Goi dien / Chat Zalo) - doan cuoi khong bi thanh do de. */
		.az-template-story {
			padding: 0 5vw 56px;
		}

		/* LOI 2 - tieu de bi logo va nut menu de len.
		   Khoi da bi keo len duoi header bang margin-top am (de header trong
		   suot co anh ma phu len), nhung ban cu chi bu lai 26px trong khi
		   header cao 75px -> dong dau tien chui thang xuong duoi header.
		   Chi muc DAU TIEN can bu, cac muc sau da cach xa dinh trang. */
		.az-template-storyslide {
			min-height: 0;
			padding: 22px 0;
			justify-content: flex-start;
			scroll-snap-align: none;
			scroll-snap-stop: normal;
		}

		.az-template-storyslide:first-child {
			padding-top: calc(var(--az-template-header-h) + 26px);
		}

		/* LOI 3 - chu chay duoi header trong suot khi cuon giua bai, doc rat
		   kho vi chu trang tren nen sang. Tren dien thoai cho header co nen
		   toi mo va lam net phia sau: van thay anh nhung chu khong lan vao
		   nhau nua. Chi ap dung o trang nay. */
		body:has(.az-template-story) .az-template-header:not(.scrolled) {
			background: rgba(20, 20, 20, .82);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
		}

		/* Man hep: mot cot cho de doc (giu nguyen hanh vi cu) */
		.az-template-storycols { column-count: 1; }

		/* Cot cham dieu huong khong dung tren dien thoai */
		.az-template-storynav { display: none; }

		/* Co chu nho lai mot bac cho vua man hep */
		.az-template-storybody h2 {
			font-size: 21px;
			line-height: 32px;
			letter-spacing: 2px;
			margin: 0 0 18px;
		}

		.az-template-storybody p {
			font-size: 15px;
			line-height: 28px;
			text-align: left;
		}
	}

	/* Man rat hep: keo them mot bac nua */
	@media (max-width: 480px) {
		.az-template-story { padding: 0 4vw 52px; }
		.az-template-storybody h2 { font-size: 19px; line-height: 29px; }
	}
}


/* ============================================================================
   CHAM DIEU HUONG SLICK - DAT NGOAI @layer, CO Y
   ----------------------------------------------------------------------------
   Vi sao khong de trong @layer overrides nhu phan con lai:
	 Trong CSS Cascade Layers, luat KHONG thuoc layer nao thang MOI luat nam
	 trong layer - ke ca layer dung cuoi. slick.css do AZ.LoadPlugin nap thang
	 bang the <link>, khong boc layer, nen no de bep ca @layer overrides.
	 Do la ly do ban 69 khong an: DevTools cho thay position/bottom/width/
	 margin/padding/list-style/text-align cua ta deu bi gach, chi con left,
	 z-index va transform song sot (vi slick khong khai ba cai do).

   Cach thang ma khong can mot dau !important nao:
	 dua khoi nay ra NGOAI layer, roi nang do dac hieu len hai lop
	 (.az-template-story .slick-dots = 0,2,0) so voi mot lop cua slick
	 (.slick-dots = 0,1,0). Da doi chieu: slick.css va slick-theme.css khong
	 dung !important o bat ky dau, nen do dac hieu la du.
   ========================================================================== */
@media (min-width: 901px) {

	/* Chep cach ban dang chay: day cham NAM NGANG duoc XOAY 90 do thanh cot,
	   neo vao DAY khoi chu khong treo giua man hinh.
	   Nguyen ban DevTools trang goc (gioi-thieu/:525):
	     position:absolute; left:-130px; bottom:-10px; transform:rotate(90deg)

	   Rieng 'left' phai khac: -130px co dinh chi vua man that rong. Khuon chu
	   1270px cong 130px moi ben la 1530px; man hep hon thi cot cham tut ra
	   ngoai le trai va bi than trang cat (body co overflow-x: hidden). */
	.az-template-story .slick-dots {
		position: absolute;
		/* KHONG viet max(-150px, calc(-8vw)): calc() long trong max() vua thua
		   vua lam Chrome bo ca tham so do (DevTools gach ngang no). Trong max()
		   ghi thang don vi la du. */
		left: max(-150px, -8vw);
		/* Moi muc gio cao tron mot khung nhin (min-height: 100vh) nen cot cham
		   phai neo theo CHIEU CAO KHUNG NHIN, khong phai mot so px co dinh.
		   50vh dat no dung giua man - bam theo chu du man cao bao nhieu. */
		bottom: 50vh;
		z-index: 5;
		/* slick-theme.css dat width:100%. De nguyen thi day cham rong bang ca
		   khuon chu 1270px, xoay 90 do xong se CAO 1270px va tran het trang. */
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		transform: rotate(90deg);
	}

	.az-template-story .slick-dots li {
		display: inline-block;
		width: auto;
		height: auto;
		margin: 0 7px;
		padding: 0;
		vertical-align: middle;
	}

	/* slick-theme.css ve cham bang KY TU:
	     button:before { content:"•"; font-size:6px; color:black; opacity:.25 }
	   Tren nen toi cua trang nay thi gan nhu vo hinh - dung thu ta thay o ban
	   69. Tat han di, cham that la chinh cai <button> ben duoi. */
	.az-template-story .slick-dots li button::before,
	.az-template-story .slick-dots li.slick-active button::before {
		content: none;
		display: none;
	}

	/* Ban goc dat 12px / 60px. O day nang len cho de nhin va de bam hon theo
	   yeu cau 16/08 - muon tra ve dung ban goc thi doi hai so nay ve 12 va 60. */
	.az-template-story .slick-dots li button {
		display: block;
		width: 18px;
		height: 18px;
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		font-size: 0;
		line-height: 0;
		color: transparent;
		cursor: pointer;
		border-radius: 99px;
		background-color: var(--az-template-brand-dark);
		transition: width .25s ease, background-color .25s ease;
	}

	.az-template-story .slick-dots li button:hover,
	.az-template-story .slick-dots li button:focus {
		outline: none;
		background-color: var(--az-template-brand);
	}

	/* Cham dang xem: dai ra. Vi ca day da xoay 90 do nen no thanh mot VACH DOC
	   mau cam - dung nhu ban dang chay. */
	.az-template-story .slick-dots li.slick-active button {
		width: 72px;
		background-color: var(--az-template-brand);
	}
}