/*
 * Nạp SAU cùng: chỉnh lại vài điểm mà CSS gốc (trích từ bản lưu) đặt cho
 * cấu trúc HTML của PenNews, không khớp hoàn toàn với template dựng lại.
 */

/* --- Đầu trang: giữ chiều cao 100px như bản gốc (data-height="100") --- */
.header-content__container {
	min-height: 100px;
	padding-top: 0;
	padding-bottom: 0;
}

.site-branding img.custom-logo {
	max-height: 58px !important;
	width: auto !important;
	height: auto !important;
}

.main-navigation > ul > li > a {
	display: flex;
	align-items: center;
	min-height: 100px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.main-navigation > ul > li > a::after { bottom: 30px; }

.site-header.is-stuck .header-content__container { min-height: 76px; }
.site-header.is-stuck .main-navigation > ul > li > a { min-height: 76px; }
.site-header.is-stuck .main-navigation > ul > li > a::after { bottom: 20px; }
.site-header.is-stuck .site-branding img.custom-logo { max-height: 46px !important; }

/* Logo chuyển sang trắng khi header trong suốt nằm trên video/ảnh. */
.penci-header-transparent .site-header:not(.is-stuck) .site-branding img.custom-logo {
	filter: brightness(0) invert(1);
}

/*
 * Mục menu của trang đang xem: bản gốc tô nền màu thương hiệu.
 * Chỉ mục trùng khớp chính xác mới có nền, nên chỉ mục đó mới đổi chữ sang
 * trắng; mục cha (nền trong suốt) giữ chữ màu thương hiệu để không bị mất chữ.
 */
.main-navigation > ul > li.current-menu-item > a {
	color: #fff !important;
	text-shadow: none !important;
}
.main-navigation > ul > li.current-menu-item > a::after { display: none; }

.main-navigation > ul > li.current-menu-parent > a,
.main-navigation > ul > li.current-menu-ancestor > a,
.main-navigation > ul > li.current-post-parent > a,
.main-navigation > ul > li.current-post-ancestor > a {
	color: var(--pgh-primary, #00acc1) !important;
}
.penci-header-transparent .site-header:not(.is-stuck) .main-navigation > ul > li.current-menu-parent > a,
.penci-header-transparent .site-header:not(.is-stuck) .main-navigation > ul > li.current-menu-ancestor > a {
	color: #fff !important;
}

/* --- Hero: khối trống 800px của bản gốc, co theo chiều cao màn hình --- */
.vc_video-bg-container .vc_empty_space {
	height: auto !important;
	min-height: 800px;
}

@media (max-height: 900px) {
	.vc_video-bg-container .vc_empty_space { min-height: 92vh; }
}

@media (max-width: 900px) {
	.vc_video-bg-container .vc_empty_space { min-height: 70vh; }
}

/*
 * Nền video: phóng khung ra ngoài mép 40% để tiêu đề và thanh điều khiển
 * của YouTube nằm ngoài vùng nhìn thấy. Dùng width/height thật thay vì
 * transform:scale - YouTube dừng phát khi khung bị biến đổi tỉ lệ.
 */
.pgh-video-bg iframe {
	width: 140vw;
	height: 78.75vw;
	min-width: 249vh;
	min-height: 140%;
}

/* ==========================================================================
   Nút WPBakery (vc_btn3)
   --------------------------------------------------------------------------
   HTML lấy từ bản lưu vẫn mang nguyên các class nút của WPBakery. Plugin đó
   không còn nên phải dựng lại: thiếu bộ này thì nút mất căn giữa, dạt về trái.
   ========================================================================== */
.vc_btn3-container { margin-bottom: 22px; }
.vc_btn3-container.vc_btn3-center { text-align: center; }
.vc_btn3-container.vc_btn3-left   { text-align: left; }
.vc_btn3-container.vc_btn3-right  { text-align: right; }
.vc_btn3-container.vc_btn3-inline {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: top;
}

.vc_general.vc_btn3 {
	display: inline-block;
	max-width: 100%;
	font-family: var(--pgh-font-head);
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	border: 2px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Cỡ nút */
.vc_btn3.vc_btn3-size-xs { padding: 6px 14px;  font-size: 11px; }
.vc_btn3.vc_btn3-size-sm { padding: 9px 18px;  font-size: 12px; }
.vc_btn3.vc_btn3-size-md { padding: 12px 24px; font-size: 14px; }
.vc_btn3.vc_btn3-size-lg { padding: 16px 34px; font-size: 16px; }

/* Bo góc */
.vc_btn3.vc_btn3-shape-square  { border-radius: 0; }
.vc_btn3.vc_btn3-shape-rounded { border-radius: 5px; }
.vc_btn3.vc_btn3-shape-round   { border-radius: 50em; }

/*
 * Kiểu viền tuỳ chỉnh: màu viền và màu chữ do thuộc tính style trong HTML
 * quy định (bản gốc dùng #000000, hover đổi sang #DD3333 bằng JS nội tuyến).
 */
.vc_btn3.vc_btn3-style-outline-custom,
.vc_btn3.vc_btn3-style-outline {
	background-color: transparent;
	border-width: 2px;
	border-style: solid;
}

/* Kiểu đặc - dùng cho các nút ĐẶT VÉ ở bảng giá */
.vc_btn3.vc_btn3-style-modern,
.vc_btn3.vc_btn3-style-flat,
.vc_btn3.vc_btn3-style-classic { border-color: transparent; color: #fff; }

.vc_btn3.vc_btn3-color-danger  { background-color: #dd3333; color: #fff; }
.vc_btn3.vc_btn3-color-danger:hover  { background-color: #b82727; color: #fff; }
.vc_btn3.vc_btn3-color-primary { background-color: var(--pgh-primary); color: #fff; }
.vc_btn3.vc_btn3-color-primary:hover { background-color: var(--pgh-primary-dark); color: #fff; }
.vc_btn3.vc_btn3-color-pink,
.vc_btn3.vc_btn3-color-juicy-pink { background-color: var(--pgh-accent); color: #fff; }
.vc_btn3.vc_btn3-color-black { background-color: #2a2a2a; color: #fff; }
.vc_btn3.vc_btn3-color-white { background-color: #fff; color: #2a2a2a; }

.vc_btn3.vc_btn3-style-modern { box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.vc_btn3.vc_btn3-style-modern:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .2); }

/* Căn lề ảnh của WPBakery */
.wpb_single_image.vc_align_left   { text-align: left; }
.wpb_single_image.vc_align_right  { text-align: right; }
.wpb_single_image.vc_align_center { text-align: center; }
.wpb_single_image.vc_align_left img   { margin-left: 0; margin-right: auto; }
.wpb_single_image.vc_align_right img  { margin-left: auto; margin-right: 0; }

/* --- Cột PenNews trong nội dung dán từ bản lưu --- */
.penci-col-12 { width: 100%; }
.penci-col-8 { width: 66.6666%; }
.penci-col-6 { width: 50%; }
.penci-col-4 { width: 33.3333%; }
.penci-col-3 { width: 25%; }

@media (max-width: 900px) {
	.penci-col-3, .penci-col-4, .penci-col-6, .penci-col-8 { width: 100%; }

	.header-content__container {
		min-height: 66px;
		gap: 10px;
		flex-wrap: nowrap;
	}
	.main-navigation > ul > li > a { min-height: 66px; }

	.site-branding { min-width: 0; flex: 1 1 auto; overflow: hidden; }
	.site-branding h2 { margin: 0; }
	.site-branding img.custom-logo {
		max-height: 38px !important;
		max-width: 100% !important;
	}

	/* Chỉ giữ nút menu; các icon mạng xã hội đã có ở chân trang. */
	.header-social-search { flex: 0 0 auto; gap: 0; }
	.header-social-search > a.social-media-item { display: none; }
	.penci-mobile-toggle { display: flex !important; }

	.site-header.is-stuck .header-content__container,
	.site-header.is-stuck .main-navigation > ul > li > a { min-height: 58px; }
	.site-header.is-stuck .site-branding img.custom-logo { max-height: 34px !important; }
}

/* --- Ảnh trong nội dung không bị méo --- */
.penci-entry-content img,
.wpb-content-wrapper img { height: auto; }

.wpb_single_image .vc_single_image-wrapper { display: inline-block; max-width: 100%; }
.wpb_single_image .vc_single_image-wrapper img { width: 100%; }

/* --- Khối bài viết nhúng sẵn trong landing page --- */
.wpb-content-wrapper .penci-post-item { background: transparent; }
.wpb-content-wrapper .penci-image-holder { margin-bottom: 12px; }

/* Bảng giá: các cột cao bằng nhau, nút nằm dưới cùng */
.vc_row-o-equal-height > .wpb_column > .vc_column-inner { height: 100%; }

/* --- Chân trang: menu con không đổ dọc --- */
.sub-footer-menu .menu > li > a { white-space: nowrap; }

/* --- Bản đồ Google nhúng --- */
.penci-entry-content iframe,
.wpb-content-wrapper iframe { max-width: 100%; }

/* Liên kết trang ghi công ảnh ở chân trang */
.site-info__sep { margin: 0 6px; opacity: .5; }
.site-info__credits { color: var(--pgh-sky-1, #a5ebec); text-decoration: underline; text-underline-offset: 2px; }
.site-info__credits:hover { color: #fff; }

/* ==========================================================================
   Menu chính sau khi thêm mục HÌNH ẢNH
   --------------------------------------------------------------------------
   9 mục cấp 1 không còn vừa một dòng ở khổ laptop (cần 875px, chỗ trống 834px)
   nên bị xuống dòng, mục đang mở lại nằm lơ lửng thành một khối màu. Thu gọn
   dần khoảng cách theo bề rộng, hẹp quá thì chuyển hẳn sang nút menu.
   ========================================================================== */
@media (max-width: 1439px) {
	.main-navigation > ul > li > a { padding: 0 10px !important; font-size: 13px; }
	.main-navigation > ul > li > a::after { left: 10px; right: 10px; }
	.main-navigation > ul > li.menu-item-has-children > a { padding-right: 20px !important; }
}

@media (max-width: 1300px) {
	.main-navigation > ul > li > a { padding: 0 8px !important; font-size: 12.5px; letter-spacing: .3px; }
	.main-navigation > ul > li > a::after { left: 8px; right: 8px; }
	.main-navigation > ul > li.menu-item-has-children > a { padding-right: 17px !important; }
	.header-content__container { gap: 12px; }
}

/* Dưới ngưỡng này menu ngang quá chật - dùng nút menu cho gọn. */
@media (max-width: 1150px) {
	.main-navigation { display: none; }
	.penci-mobile-toggle { display: flex !important; }
	.header-social-search > a.social-media-item { display: none; }
}

/* Menu không bao giờ được xuống dòng ở chế độ ngang. */
.main-navigation > ul { flex-wrap: nowrap; }

/* --------------------------------------------------------------------------
   Menu chính: nới chỗ cho mục TRANH

   Thêm mục thứ 12 làm menu tràn đúng vài pixel và rớt xuống hai dòng. Bóp nhẹ
   khoảng cách hai bên mỗi mục (13px -> 9px) là đủ để về lại một dòng, không
   phải bỏ bớt mục nào. Dưới 1200px menu đã chuyển sang dạng thu gọn nên chỉ
   áp dụng cho khổ rộng.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	#site-navigation > ul.menu > li > a {
		padding-left: 9px;
		padding-right: 9px;
	}
}