@charset "UTF-8";

/* ============================================================================
   DAU TRANG (.az-template-header) - style RIENG
   ----------------------------------------------------------------------------
   Tach thanh tep rieng: chan trang va thanh nut day man da nghiem thu 16/08 va
   dang khoa, sua dau trang khong duoc dong vao Footer.css / NavFooter.css.

   Ban may tinh GIU NGUYEN - moi luat duoi day nam trong @media (max-width: 900px).
   ========================================================================== */

@layer overrides {

	/* ---- MAU NUT BA GACH ----
	   De NGOAI @media co y: the nay chi duoc dung ra khi may khong phai may
	   tinh (xem Layout.cshtml), nhung may tinh bang thi vua khong phai may tinh
	   VUA rong hon 900px - de trong @media se bo sot dung truong hop do.

	   #ff7e09 chinh la bien --az-template-brand (style.css dong 14). Dung bien
	   cho khoi rai ma mau cung khap noi.

	   Ve !important: da doi chieu, luat canh tranh manh nhat la
	     body:has(.az-template-story, ...) .az-template-header:not(.scrolled) .az-template-bars { color: #fff }
	   o layer 'template' va KHONG co !important, nen tep nay o layer 'overrides'
	   da thang san. Giu !important theo yeu cau 16/08 cho chac, va vi no khoa
	   luon ca truong hop trang co anh nen - nut van mau cam thay vi doi trang. */
	.az-template-bars { color: var(--az-template-brand) !important; }

	/* ---- MENU CON TREN DAU TRANG (may tinh) ----
	   Lay dung thong so ban dang chay, doc tu DevTools trang goc:
	     a.mega-menu-link { background:#cd3007; color:#fff; font-size:13px;
	                        font-weight:normal; padding:0 10px; line-height:35px }
	     va o luat duoi: border-radius:0; box-shadow:none
	   Ban ta dang de nen trang, chu toi, co bo goc va do bong - khac han.

	   De NGOAI @media co y: menu chinh chi duoc dung ra khi may LA may tinh
	   (xem Layout.cshtml), khong phu thuoc be ngang khung nhin. Boc vao @media
	   se sai o truong hop cua so may tinh thu nho duoi 900px.

	   #cd3007 la --az-template-brand-dark, #ff7e09 la --az-template-brand -
	   dung bien cho khoi rai ma mau cung. */
	.az-template-header .az-template-menu > ul > li > ul {
		/* Ban goc hep hon ban ta ro ret. Kem nowrap de muc dai nhat
		   ("Bi Pha, Bi Gam") khong bao gio vo dong. */
		min-width: 170px;
		/* Ban goc khong chua dem tren duoi - muc dau tien sat ngay muc cha */
		padding: 0;
		background: var(--az-template-brand-dark);
		border-radius: 0;
		box-shadow: none;
	}

	.az-template-header .az-template-menu > ul > li > ul > li > a {
		padding: 0 10px;
		font-size: 13px;
		font-weight: 400;
		line-height: 35px;
		white-space: nowrap;
		color: #fff;
		background: var(--az-template-brand-dark);
	}

	/* Muc dang tro chuot: doi sang cam sang, chu van trang.
	   Ban ta dang lam nguoc - nen xam nhat, chu doi sang cam. */
	.az-template-header .az-template-menu > ul > li > ul > li > a:hover {
		background: var(--az-template-brand);
		color: #fff;
	}

	/* Trang co anh lon (Gioi thieu, trang nhom) co mot luat rieng trong
	   style.css dat mau chu menu con ve mau chu thuong - de nguyen thi chu den
	   nam tren nen do. Tep nay o layer 'overrides' nen da de len luat do, ghi
	   lai day de nguoi sua sau biet vi sao khong can dong vao style.css. */

	/* ---- KHOI GIOI THIEU DUOI MENU TRUOT ----
	   Ban goc co khoi nay o cuoi menu di dong (div.menu-about): mot doan gioi
	   thieu, ba dong lien he, roi dong ban quyen. Ben do KHONG viet CSS rieng
	   cho no - de nguyen kieu mac dinh cua khung Flatsome - nen o day dung
	   thong so do tren anh chup 16/08.

	   Le trai 16px lay dung bang dem cua muc menu ben tren
	   (.az-template-panelmenu .az-template-menu li > a { padding: 13px 16px })
	   de chu thang hang voi ten muc, khong bi thut ra thut vao. */
	.az-template-panelabout {
		padding: 26px 16px 32px;
		font-size: 14px;
		line-height: 1.7;
		color: var(--az-template-text);
	}

	.az-template-panelintro { margin: 0 0 26px; }

	/* Ba dong lien he: bieu tuong va chu tren cung mot hang, bieu tuong co be
	   rong co dinh de ba dong chu thang cot voi nhau. */
	.az-template-panelcontact p {
		display: flex;
		align-items: baseline;
		margin: 0 0 10px;
	}

	.az-template-panelcontact p a {
		display: flex;
		align-items: baseline;
		color: inherit;
	}

	.az-template-panelcontact i {
		flex: 0 0 22px;
		width: 22px;
		font-size: 14px;
	}

	.az-template-panelcontact p a:hover { color: var(--az-template-brand); }

	.az-template-panelcopy {
		margin-top: 24px;
		color: var(--az-template-text);
	}

	@media (max-width: 900px) {

		/* ---- LOGO VE GIUA MAN HINH, NUT BA GACH O TRAI ----
		   Ban dang chay dat logo chinh giua, nut mo menu nam mot minh ben trai.
		   Ban ta dang xep hai thu lien nhau roi don ca cum sang trai.

		   Luu y ve cau truc: nut ba gach nam NGAY TRONG .az-template-logo, cung
		   the boc voi anh logo (xem Layout.cshtml) - khong phai hai khoi rieng.
		   Nen khong the chi doi justify-content cua khung ngoai.

		   Cach lam: cho .az-template-logo trai het be ngang roi dan hai dau, va
		   them mot o TRONG ben phai rong bang dung nut ba gach. Ba phan tu
		   [nut] [logo] [o trong] chia deu hai dau -> logo roi dung giua that.

		   Vi sao khong dung position: absolute + translateX(-50%):
		   cach do phai chon mot to tien lam moc. Moc gan nhat co position la
		   .az-template-header, nhung .az-template-container o giua co the duoc
		   dat position o cho khac va lam doi moc luc nao khong biet. Dung flex
		   thi khong phu thuoc vao dieu do. */
		.az-template-logo {
			flex: 1 1 auto;
			width: auto;
			justify-content: space-between;
		}

		/* Chot be rong nut ba gach de o trong ben phai lay dung so nay */
		.az-template-bars {
			flex: 0 0 24px;
			width: 24px;
		}

		/* O trong can bang. Khong phai the that nen khong bat su kien cham. */
		.az-template-logo::after {
			content: "";
			flex: 0 0 24px;
			width: 24px;
		}

		/* ---- CO LOGO ----
		   Ban goc do duoc khoang 51px chieu cao tren dau trang cao 72px. Ban ta
		   nho hon han vi style.css chi dat 'max-height: 75px' - tuc gioi han
		   TREN chu khong dinh chieu cao, nen anh co lai theo be ngang con lai
		   sau khi tru nut ba gach.
		   Dat 'height' tuong minh de khong con phu thuoc vao be ngang. Bo
		   'max-height' cu keo lai, va bo dem 3px cho du cho.
		   Anh logo du lon (chan trang dang hien no o 110px van net) nen phong
		   to den co nay khong lo mo. */
		.az-template-logo img {
			height: 56px;
			max-height: none;
			width: auto;
			padding: 0;
		}
	}
}