/* css/responsive.css: Responsive: media query cho các khu vực trên.
   Tách từ style.css ngày 08/10/2026; thứ tự các file giữ nguyên thứ tự cũ (xem inc/enqueue-styles.php). */
/* RESPONSIVE */
@media (min-width: 992px) {
	.p-banner {
		background-position: right center;
	}
	.p-history .his-row {
		padding-left: 50%; 
	}
	.p-history .his-row.v2 {
		padding-left: 0;
		padding-right: 50%; 
	}
	.p-history .his-row.v2 .item {
		text-align: right;
		/*padding: 0px 25px 0px 52px;*/
		padding: 0px 25px 0px 60px;
	}
	.p-history .his-row.v2 .item:after {
		border-right: none;
		border-left: 13px solid var(--an-step-green);
		left: auto;
		right: -13px;
	}
	.p-history .his-row.v2 .item:before {
		left: auto;
		right: -60px;
	}
	.p-history .his-row.v2 .item .icon {
		right: auto;
		left: -33px;
	}
	.p-history .icon.first-child {
		background: none;
		border: none;
	}
	.p-history .icon.first-child img {
		border-radius: 50%;
	}
	.p-history .his-row.v2 .item .year {
		padding-right: 0;
		padding-left: 25px;
		left: 100%;
		right: auto;
		margin-left: 90px;
		margin-right: auto;
		text-align: left; 
	}
	.p-history .his-row.v2 .item .year:after {
		border-left: none;
		right: auto;
		border-right: 13px solid var(--an-step-green);
		left: -13px;
	}
	.p-history .his-row.v2 .item.v2 {
		background: #f0bf00;
	}
	.p-history .his-row.v2 .item.v2:after, .p-history .his-row.v2 .item.v2 .year:after {
		border-right-color: #f0bf00;
		border-left-color: #f0bf00;
	}
	.p-history .his-row.v2 .item.v3 {
		background: var(--an-step-cyan); 
	}
	.p-history .his-row.v2 .item.v3:after, .p-history .his-row.v2 .item.v3 .year:after {
		border-right-color: var(--an-step-cyan);
		border-left-color: var(--an-step-cyan);
	}
	.p-history .his-row.v2 .item.v4 {
		background: var(--an-step-orange);
	}
	.p-history .his-row.v2 .item.v4:after, .p-history .his-row.v2 .item.v4 .year:after {
		border-right-color: var(--an-step-orange);
		border-left-color: var(--an-step-orange);
	}
	.p-history .his-row.v2 .item.v5 {
		background: var(--an-step-red);
	}
	.p-history .his-row.v2 .item.v5:after, .p-history .his-row.v2 .item.v5 .year:after {
		border-right-color: var(--an-step-red);
		border-left-color: var(--an-step-red);
	}
	.p-history .his-row.v2 .item.v6 {
		background: var(--an-step-teal);
	}
	.p-history .his-row.v2 .item.v6:after, .p-history .his-row.v2 .item.v6 .year:after {
		border-right-color: var(--an-step-teal);
		border-left-color: var(--an-step-teal);
	}
}
@media all and (max-width: 1024px) {
	.p-history {
		margin-bottom: 25px;
		padding-top: 20px;
		margin-top: 50px;
		padding-bottom: 1px;
	}
}
@media all and (max-width: 991px) {
	.p-history .cols, .p-history .colss {
		left: 15px;
		margin-left: 0;
	}
	.p-history .cols .icon {
		width: 40px;
		height: 40px;
		margin-left: -20px;
	}
	.p-history .item {
		margin-right: 20px;
		margin-left: 66px;
		font-size: 14px;
	}
	.p-history .item:before, .p-history .item:after {
		content: none;
		display: none;
	}
	.p-history .item .year {
		z-index: 1;
		width: 50px;
		line-height: 38px;
		padding: 0;
		text-align: center;
		margin-right: 25px;
	}
}
@media(max-width: 768px) {
	.p-history .item {
		height: auto;
	}
}
@media (max-width: 767px) {
	.p-banner {
		padding-top: 80px;
	}
}
@media(max-width: 480px) {
	#logo .name {
		display: none;
	}
	.h-time {
		display: none;
	}
}