/* --------------------------------------------------------------------------
   Header mega menu — nén lại cho gọn (desktop ≥ 1025px)
   ==========================================================================
   Bản gốc nằm rải rác trong style.css dưới 5 khối gần như trùng nhau
   (mega-/tenmienvn-/solutions-/softwares-/othermore-/information-). File này
   KHÔNG sửa các khối đó, chỉ đè lại phần kích thước cho dropdown trong header.

   Vấn đề đã đo được ở 1600px trước khi sửa:
     - panel rộng cứng 1180px, cao 444–711px → chiếm gần hết màn hình
     - `.service-items { grid-template-columns: auto auto }` cho 2 cột lệch nhau
       (483/415, 550/348 …) vì `auto` co theo nội dung → lưới trông xộc xệch
     - icon thẻ: <img> ăn `width: 20%` (~87px) trong khi icon SVG dựng sẵn cố
       định 44px → hai cỡ icon lệch hẳn nhau trong cùng một lưới
     - ảnh minh hoạ đầu panel cũng `width: 20%` (~180px) → khối head quá to
     - banner head padding 30px 50px → cao ~180px chỉ để chứa 2 dòng chữ

   Chỉ áp dụng trong `#main-header`. Section dùng lại cùng shortcode ở trang chủ
   (`.home-services-menu-wrap`) có bộ quy tắc riêng trong css/home.css và không
   bị đụng tới. Toàn bộ file nằm trong media query ≥1025px nên drawer mobile
   (các khối max-width:1024px trong style.css) giữ nguyên.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {

	/* ---- 1. Bề ngang panel ------------------------------------------------
	   1180px → 1090px. Bản 980px trước đó bóp quá tay: thẻ hẹp lại nên mô tả
	   xuống dòng nhiều hơn, panel cao lên — hẹp mà dài, tệ hơn cả lúc đầu.
	   Vẫn neo mép phải vào lề container như quy tắc cũ trong style.css
	   (right: 10px), phần hụt lại chạy về bên trái nên panel gần nút menu hơn
	   chứ không tràn sát mép trái nữa. */
	.hc-wp #main-header .header-navigation li.hitechcloud-service-menu.kadence-menu-mega-enabled > .sub-menu {
		width: min(1090px, calc(100vw - 40px)) !important;
	}

	/* Hai menu ít nội dung nhất (Tên miền: 3 mục/tab, Đối Tác & Đại lý: 3 mục ở
	   tab đầu) không cần cả 1090px. `:has()` để không phải bám vào menu-item-ID —
	   trình duyệt không hỗ trợ thì rơi về 1090px ở trên, vẫn đúng bố cục. */
	.hc-wp #main-header .header-navigation li.hitechcloud-service-menu.kadence-menu-mega-enabled:has(.hitechcloud-tenmienvn-menu) > .sub-menu,
	.hc-wp #main-header .header-navigation li.hitechcloud-service-menu.kadence-menu-mega-enabled:has(.hitechcloud-othermore-menu) > .sub-menu {
		width: min(960px, calc(100vw - 40px)) !important;
	}

	/* ---- 2. Cột tab trái --------------------------------------------------- */
	.hc-wp #main-header .mega-tabs,
	.hc-wp #main-header .tenmienvn-tabs,
	.hc-wp #main-header .solutions-tabs,
	.hc-wp #main-header .softwares-tabs,
	.hc-wp #main-header .othermore-tabs,
	.hc-wp #main-header .information-tabs {
		width: 214px;
		flex: 0 0 214px;
		padding: 8px 0;
	}

	.hc-wp #main-header .mega-tab,
	.hc-wp #main-header .tenmienvn-tab,
	.hc-wp #main-header .solutions-tab,
	.hc-wp #main-header .softwares-tab,
	.hc-wp #main-header .othermore-tab,
	.hc-wp #main-header .information-tab {
		padding: 8px 14px;
		font-size: 14px;
		line-height: 1.35;
	}

	.hc-wp #main-header .mega-content,
	.hc-wp #main-header .tenmienvn-content,
	.hc-wp #main-header .solutions-content,
	.hc-wp #main-header .softwares-content,
	.hc-wp #main-header .othermore-content,
	.hc-wp #main-header .information-content {
		padding: 16px 18px;
		flex-basis: auto;
		min-width: 0;
	}

	/* ---- 3. Đầu panel: dạng ảnh + tiêu đề (menu Dịch vụ) ------------------- */
	.hc-wp #main-header .mega-tab-content-head {
		gap: 12px;
		margin-bottom: 14px;
	}

	/* 20% của khung nội dung ≈ 180px. Khoá cứng lại cho khỏi phình. */
	.hc-wp #main-header .mega-tab-content-head img {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		object-fit: contain;
	}

	.hc-wp #main-header .group-name {
		flex-basis: auto;
		min-width: 0;
	}

	.hc-wp #main-header .group-name .name {
		font-size: 16px;
		line-height: 1.3;
	}

	.hc-wp #main-header .mega-tab-content-head .des {
		font-size: 13px;
		line-height: 1.4;
		margin-bottom: 0;
	}

	/* ---- 4. Đầu panel: dạng banner ảnh nền (5 menu còn lại) ---------------- */
	.hc-wp #main-header .tenmienvn-content-head,
	.hc-wp #main-header .solutions-content-head,
	.hc-wp #main-header .softwares-content-head,
	.hc-wp #main-header .othermore-content-head,
	.hc-wp #main-header .information-content-head {
		padding: 18px 24px;
		margin-bottom: 14px;
		border-radius: 12px;
	}

	.hc-wp #main-header .tenmienvn-content-head .name,
	.hc-wp #main-header .solutions-content-head .name,
	.hc-wp #main-header .softwares-content-head .name,
	.hc-wp #main-header .othermore-content-head .name,
	.hc-wp #main-header .information-content-head .name {
		font-size: 16px;
	}

	.hc-wp #main-header .tenmienvn-content-head p,
	.hc-wp #main-header .solutions-content-head p,
	.hc-wp #main-header .softwares-content-head p,
	.hc-wp #main-header .othermore-content-head p,
	.hc-wp #main-header .information-content-head p {
		font-size: 13px;
		line-height: 1.4;
	}

	.hc-wp #main-header a.tenmienvn-btn,
	.hc-wp #main-header a.solutions-btn,
	.hc-wp #main-header a.softwares-btn,
	.hc-wp #main-header a.othermore-btn,
	.hc-wp #main-header a.information-btn {
		padding: 6px 14px !important;
		font-size: 13px;
		margin: 8px 0 0;
	}

	/* Lớp phủ tối: bản gốc bo 24px trong khi banner bo 12px → hở góc, và tối dần
	   xuống *đáy* trong khi chữ nằm ở *đỉnh bên trái* — banner nền sáng (Phần mềm
	   Bản quyền, Tên Miền) chữ trắng gần như không đọc được. Đổ tối từ trái sang. */
	.hc-wp #main-header .overlay-gradient-tenmienvn-header,
	.hc-wp #main-header .overlay-gradient-solution-header,
	.hc-wp #main-header .overlay-gradient-softwares-header,
	.hc-wp #main-header .overlay-gradient-othermore-header,
	.hc-wp #main-header .overlay-gradient-information-header {
		border-radius: 12px;
		background: linear-gradient(100deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0.08) 82%);
	}

	/* ---- 5. Lưới thẻ dịch vụ ---------------------------------------------- */
	/* `auto auto` co theo nội dung nên hai cột rộng lệch nhau tới 200px.
	   `minmax(0, 1fr)` cho hai cột bằng nhau và cho phép chữ dài xuống dòng. */
	.hc-wp #main-header .service-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.hc-wp #main-header .service-item a {
		gap: 10px;
		padding: 9px 12px !important;
		border-width: 1px;
		border-radius: 10px;
		align-items: flex-start;
	}

	/* Icon: <img> đang 20% bề ngang thẻ, .service-item-icon đang 44px → gộp về
	   cùng 40px cho cả hai loại. */
	.hc-wp #main-header .service-item img,
	.hc-wp #main-header .service-item .service-item-icon {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.hc-wp #main-header .service-item img {
		object-fit: contain;
	}

	.hc-wp #main-header .service-item .service-item-icon {
		border-radius: 10px;
	}

	.hc-wp #main-header .service-item .service-item-icon .hc-ui-icon {
		width: 22px;
		height: 22px;
	}

	.hc-wp #main-header .service-item-name {
		min-width: 0;
	}

	.hc-wp #main-header .service-item-name .name {
		font-size: 14px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Mô tả dài nhất trong dữ liệu là 179 ký tự — không cắt thì một thẻ tự đẩy
	   cao cả hàng. Giới hạn 2 dòng. */
	.hc-wp #main-header .service-item-name .des {
		font-size: 12px;
		line-height: 1.35;
		margin-top: 2px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ---- 6. Hover ---------------------------------------------------------- */
	/* Quy tắc cũ chạy `animation: scaleItem .5s infinite alternate` → thẻ phóng
	   to thu nhỏ liên tục khi rê chuột, vừa rung vừa làm chữ nhoè. Đổi sang một
	   trạng thái tĩnh. */
	.hc-wp #main-header .service-item:hover a {
		animation: none;
		transform: translateY(-1px);
		border-color: #d8e6ff;
		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	}
}