:root {
    --nau: #482c1d;
    --active: #8f362f;
    --xam: #666666;
    --trang: #fff;
    --den: #000000;
}

@font-face {
    font-family: 'waking';
    src: url(../fonts/DVN-Waking-big8jv.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat';
    src: url(../fonts/Montserrat/Montserrat-Bold.otf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'montserrat';
    src: url(../fonts/Montserrat/Montserrat-BoldItalic.otf);
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat';
    src: url(../fonts/Montserrat/Montserrat-Italic.otf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'montserrat';
    src: url(../fonts/Montserrat/Montserrat-Regular.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'be-vietnam';
    src: url(../fonts/Be_Vietnam/BeVietnam-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'be-vietnam';
    src: url(../fonts/Be_Vietnam/BeVietnam-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'be-vietnam';
    src: url(../fonts/Be_Vietnam/BeVietnam-BoldItalic.ttf);
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'be-vietnam';
    src: url(../fonts/Be_Vietnam/BeVietnam-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'be-vietnam';
    src: url(../fonts/Be_Vietnam/BeVietnam-Light.ttf);
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.twentytwenty-container {
    position: relative;
    user-select: none;
    width: 100%;
}
.twentytwenty-container:before { content:''; display:block; width:100%; padding-top:56%; }

.twentytwenty-container img {
    width: 150%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.twentytwenty-before {
    z-index: 20;
}

.twentytwenty-after {
    z-index: 10;
}

/* Thanh kéo */
.twentytwenty-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
    z-index: 40;
    cursor: ew-resize;
    background-color: var(--nau);
    border-left: 3px solid var(--nau);
    border-right: 3px solid var(--nau);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/* Mũi tên trái (truyền thống) */
.twentytwenty-left-arrow {
    position: absolute;
    left: -12px;
    top: 30%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}
.twentytwenty-left-arrow:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/arrow-ico.png') no-repeat center center;
    background-size: contain;
	z-index:2;
	
}

/* Mũi tên phải (hiện đại) */
.twentytwenty-right-arrow {
    position: absolute;
    right: -11px;
    top: 45%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.twentytwenty-right-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/arrow-ico.png') no-repeat center center;
    background-size: contain;
    transform: rotate(180deg);
	z-index:2;
}


/* Label trên mũi tên */
.arrow-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6em;
    color: var(--trang);
    background-color: var(--nau);
    font-family: 'montserrat';
    font-weight: 700;
    white-space: nowrap;
}

.twentytwenty-left-arrow .arrow-label {
    right: 85%;
	z-index:1;
}

.twentytwenty-right-arrow .arrow-label {
    left: 85%;
	z-index:1;
}

.label-overlay {
    position: absolute;
	top:calc(100% + 30px);
	left:50%;
    padding: 15px 5px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--trang);
    border-radius: 8px;
    z-index: 70;
    pointer-events: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    transform-origin: center;
    transition: transform 0.2s linear, opacity 0.2s linear;
	transform:translateX(-50%); 
	width:86%;
	font-size:.7em;
	line-height:1.5em;
	text-align:justify;
}

.label-overlay.label-left { opacity:0; }

.center-label {
    position: relative;
    /* top: calc(100% + 100px);
    left: 0; */
    width: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0));
    padding: 10px;
    z-index: 60;
    pointer-events: none;
    text-align: center;
    font-size: 0.7em;
	margin-top:270px;
}

.center-label .h2-label {
    padding-top: 15px;
    margin: 0 auto;
    color: var(--den);
    font-family: 'waking';
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
	padding:0; height:100%; 
}


.content-twentytwenty {
    width: 100%;
    margin: 0;
    padding: 2px 3px;
    box-shadow: 0 4px 12px rgba(128, 126, 126, 0.1);
}

.content-twentytwenty .min-title { font-family:'montserrat'; margin-bottom:10px; font-weight:bold; font-size:1.2em; }

.titlebn {
    font-size: 0.5em;
    font-weight: 700;
    font-family: 'montserrat';
    margin-bottom: 10px;
}

 .title-chinh {
     font-size: 2em;
     margin-bottom: 10px;
     font-weight: normal;
	 font-family:waking;
 }

.title-chinhbn {
    font-size: 1em;
    font-family: 'waking';
    font-weight: normal;
    font-style: normal;
    margin-bottom: 5px;
}

.title-phubn {
    padding-top: 10px;
    font-size: 0.1em;
    text-align: left;
    font-weight: normal;
    font-style: normal;
    line-height: 1.4;
    color: #e6e4e4;
}

@media(min-width:576px) {
	
}

@media(min-width:768px) {
	
	.twentytwenty-wrapper { padding:0; }
	.viet-nam { margin-top:30px; }
	
	.label-overlay { width:40%; transform:unset; font-size:.5em; background:rgba(0,0,0,0.25); }
	.label-overlay.label-left { top:10px; right:2%; left:unset; }
	.label-overlay.label-right { top:unset; left:2%; bottom:50px; }
	.label-overlay .title-chinh { font-size:2.5em; }
	.content-twentytwenty .min-title { margin-bottom:15px; }
	
	.twentytwenty-container:before { padding-top:56.25%; }
	
	.twentytwenty-container { overflow:hidden; }
	.center-label { bottom:0; top:unset; font-size:.5em; margin:-30px 0 30px; }
	
    .arrow-label {
        padding: 6px 20px;
    }
	
    .twentytwenty-left-arrow, .twentytwenty-right-arrow {
        width: 30px;
        height: 30px;
		left:-15px;
		top:calc(50% - 70px);
    }
	.twentytwenty-right-arrow { top:calc(50% + 50px); }

    .titlebn {
        font-size: 0.6em;
    }

    .title-chinhbn {
        font-size: 1.5em;
    }

    .title-phubn {
        font-size: 0.5em;
    }
}

@media(min-width:996px) {

    .label-overlay {
        padding: 20px;
		font-size:.7em;
    }

    .label-overlay.label-right {
		bottom:90px;
    }
	
	.twentytwenty-left-arrow, .twentytwenty-right-arrow { width:50px; height:50px; left:-25px;  }
	.arrow-label { font-size:.8em; padding:10px 25px; }
	.twentytwenty-right-arrow { top: calc(50% + 20px); }
	.twentytwenty-right-arrow .arrow-label { left:80%; }
	.twentytwenty-left-arrow .arrow-label { right:80%; }

    .center-label {
        font-size: .65em;
		height:70px;
		line-height:70px;
		padding:0;
		margin-top:-70px;
    }
	.center-label .h2-label { line-height:inherit; }
}

@media(min-width:1200px) {
    .label-overlay { padding:20px; width:35%; }
	.title-chinh { font-size:2.8em; }
	.center-label { font-size:.8em; margin-top:-60px; height:100px; line-height:100px; background: linear-gradient(to top, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0)); }
	
    .title-chinhbn {
        font-size: 2em;
    }

    .titlebn {
        font-size: 0.8em;
    }

    .title-phubn {
        font-size: 0.8em;
    }

}

@media(min-width:1500px) {
    .label-overlay { padding:30px; }
	
	/* .title-chinh { font-size:3.5em; } */
	
	.label-overlay.label-right { bottom:100px; left:20%; transform:translateX(-50%); }
	.label-overlay.label-left { top:70px; right:20%; transform:translateX(50%); }
	
	.label-overlay .content-twentytwenty .min-title { font-size:1.5em; }
	.label-left .content-twentytwenty .min-title { margin:20px 0 30px; }
	.label-right .content-twentytwenty .min-title { margin:0 0 30px; }
	
	.label-overlay .title-chinh { font-size:4em; }
	.label-right .title-chinh { margin-bottom:30px; }
	
	.twentytwenty-container { max-height:100vh; }
	.twentytwenty-left-arrow { top:30%; }
	.twentytwenty-right-arrow { top: 40%; }
}

@media(min-width:1800px) {
	.twentytwenty-left-arrow, .twentytwenty-right-arrow { width:70px; height:70px; }
	
	.label-overlay { max-width:570px; }
	.label-overlay.label-left { transform:unset; right:calc(50% - 750px); }
	.label-overlay.label-right { transform:unset; left:calc(50% - 750px); }
	
	.center-label { font-size:1em; background:linear-gradient(to top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, 0)); height:120px; line-height:120px; margin-top:-80px; }
}

@media(min-width:2000px) {
	
	/* .label-overlay.label-left { transform:unset; right:unset; left:60%; top:5%; }
	.label-overlay.label-right { transform:unset; left:unset; right:60%; bottom:unset; top:50%; } */
}