﻿.under #content {
    margin: 160px auto 30px;
}
.under #mainvisual {
    margin-top: 140px;
}
.under #mainvisual {
    position: relative;
}
.under #mainvisual .mv_scroll {
	bottom: 40px;
}
.under_banner {
    -webkit-mask-image: url(/assets/images/mask_banner.png);
    mask-image: url(/assets/images/mask_banner.png);
    mask-repeat: no-repeat;
    mask-size: cover;
}
.under .under_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

/* Container căn giữa */
.under #mainvisual .container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
}

/* Title */
.under #mainvisual h2 {
	font-size: 128px;
    margin: 0;
    letter-spacing: 2px;
    font-family: var(--f-utm);
	text-transform: uppercase;
}

/* Breadcrumb */
#mainvisual .topic_path {
    position: absolute;
    top: 18px;
    left: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    opacity: 0.9;
	text-transform: uppercase;
}

.under #mainvisual .topic_path li {
    display: inline-block;
    color: #fff;
}

    .under #mainvisual .topic_path li a {
        color: #fff;
        text-decoration: none;
        opacity: .9;
    }

    .under #mainvisual .topic_path li + li::before {
        content: "›";
        margin: 0 6px;
        opacity: .8;
    }
	
.pagination{
    display:flex;
    justify-content:center;
    padding:24px 0;
}

/* Wrapper */
.pagination > span{
    display:flex;
    align-items:center;
    gap:12px;
}


/* =========================
   PAGE NUMBER (a)
=========================*/
.pagination a{
    text-decoration:none;
    color:#0b3d2c;
    padding:6px 10px;
    border-radius:50%;
}

.pagination a:hover{
    background:#0b3d2c;
    color:#fff;
}


/* =========================
   CURRENT PAGE (strong)
=========================*/
.pagination strong{
    background:#0b3d2c;
    color:#fff;
    padding:6px 10px;
    border-radius:50px;
}


/* =========================
   PREV BUTTON (2 phần tử đầu)
=========================*/

/* first span & second span */
.pagination > span > span:nth-child(-n+2){
    background:#0b3d2c;
    color:#fff;
    padding:8px 36px 8px 16px;
    border-radius:999px;
    position:relative;
    width: 88px;
    height: 35px;
}

/* icon prev */
.pagination > span > span:nth-child(-n+2)::before{
    content:"";
    position:absolute;
    left: 25px;
    width: 40px;
    height: 19px;
    background:url('/assets/images/ic_arr.svg') no-repeat center / contain;
    transform:rotate(180deg);
}


/* =========================
   NEXT BUTTON (2 phần tử cuối)
=========================*/
.pagination > span > *:nth-last-child(-n+2){
    background:#0b3d2c;
    color:#fff !important;
    padding:8px 16px 8px 36px;
    border-radius:999px;
    position:relative;
    width: 88px;
    height: 35px;
}

/* icon next */
.pagination > span > *:nth-last-child(-n+2)::after{
    content:"";
    position:absolute;
    left: 25px;
    width: 40px;
    height: 19px;
    background:url('/assets/images/ic_arr.svg') no-repeat center / contain;
}


@media screen and (max-width: 1400px) and (min-width: 769px) {
	.under #mainvisual h2 {
		font-size: 86px;
		
	}
	
}
@media screen and (max-width: 768px) {
    #mainvisual .topic_path {
		display: none;
	}
	.under #mainvisual h2 {
		font-size: 48px;
	}
	.under #mainvisual {
		margin-top: 0;
	}
	.under_banner {
		-webkit-mask-image: url(/assets/images/mask_banner_sp.png);
		mask-image: url(/assets/images/mask_banner_sp.png);
	}
}
@media screen and (max-width: 480px) {

}