.cute-slider{
	position: relative;	
}

/* Ảnh banner không cùng tỉ lệ với khung thì height:auto của thư viện cho ra chiều cao theo ảnh
   gốc, và slide tràn ra ngoài slider. aspect-ratio kéo nó về đúng tỉ lệ khung. Không viết số ở
   đây vì mỗi WL một khung khác nhau: slider.vue.js đọc data-width/data-height của slider rồi đặt
   --slide-ratio, còn auto là lúc chưa ai đặt - trang cũ giữ nguyên hành vi cũ. fill chứ không
   cover: nén cả tấm cho vừa để thấy trọn banner thay vì cắt mất trên dưới, và đó cũng đúng cách
   thư viện vẽ ảnh lúc chuyển cảnh, nên lúc đứng yên và lúc chuyển nhìn giống nhau. */
.cute-slider img{
	aspect-ratio: var(--slide-ratio, auto);
	object-fit: fill;
}

.cute-ie8 * {filter: inherit; opacity: inherit;}



/* -------------------------------------
 * Slider Controls
 * ------------------------------------*/

.br-controls {
	position:absolute;
	z-index: 10;
	background-image: url("../cute-theme/trans.png");
}

.br-next{
	position:absolute;
	width: 35px;
	height: 35px;
	right:-10%;
	top:50%;
	margin-top:-17px;
	background: url("../cute-theme/controls.png") -44px -4px;
}

.br-previous{
	position:absolute;
	width: 35px;
	height: 35px;
	left:-10%;
	top:50%;
	margin-top:-17px;
	background: url("../cute-theme/controls.png") -4px -4px;
}

.br-slidecontrol{
	position:absolute;
	list-style: none;
	top:-25px;
	right:0px;
	z-index:10;
}

	.br-slidecontrol ul li{
		display: block;
		position:relative;
		margin:2px;
		float:left;
		width:14px;
		height: 15px;
		background: url("../cute-theme/controls.png") -113px -14px;
	}
	
	.br-slidecontrol ul li .br-control-selected{
		display: block;
		width:14px;
		height: 15px;
		background: url("../cute-theme/controls.png") -92px -14px;
	}


.br-thumb-bottom {
	left: -36px;
	position: relative;
}

.br-thumb-up {
	left: -36px;
	top:-143px;
	position: relative;
}

	.br-thumb-bottom .br-thumb-frame { 
		background: url("../cute-theme/thumb-frame.png") -0px -7px;
		width: 92px;
		height: 95px;
	}
	
	.br-thumb-up .br-thumb-frame { 
		background: url("../cute-theme/thumb-frame.png") -89px 1px;
		width: 92px;
		height: 95px;
	}
	
	.br-thumb-bottom .br-thumb-img , .br-thumb-up .br-thumb-img{ 
		position:absolute;
		top: 17px;
		left: 15px;
		width:60px;
		height:60px;
	}


.br-slideinfo .br-infocontent{
	background: url("../cute-theme/info-pat.png");
	font-size: 12px;
	text-shadow: white 1px 1px;
	width:100%;
	height: 100%;
}

	.br-slideinfo .right , .br-slideinfo .left{
		width:260px;
		height: 100%;
	}
	
	.br-slideinfo .info1 div{
		padding:20px;
	}
	
	.br-slideinfo .info1 .title{
		font-weight: 700;
		font-size: 19px;
	}
	
	.br-slideinfo .info1 .text{
		line-height: 152%;

	}

	.br-slideinfo .info1 .more-btn{
			cursor: pointer;
			-moz-box-shadow: inset 0px 1px 0px 0px white;
			-webkit-box-shadow: inset 0px 1px 0px 0px white;
			box-shadow: inset 0px 1px 0px 0px white;
			background: -webkit-gradient( linear, left top, left bottom, color-stop(0.35, #E4E4E4), color-stop(1, #CECECE) );
			background: -moz-linear-gradient( center top, #E4E4E4 35%, #CECECE 100% );
			background-color: #CECECE;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
			border: 1px solid #B4B4B4;
			color: black;
			font-size: 11px;
			font-weight: 400;
			padding: 8px 13px;
			text-shadow: 1px 1px 0px white;
			float: right;
			display: block;
			position: relative;
			top: -5%;
			margin: 0px 10px 18px 10px;
			text-decoration: none;
	}
	
	.br-slideinfo .info2 .more-btn{
			cursor: pointer;
			
			-moz-box-shadow:	inset 0px 1px 0px 0px #FF7979;
			-webkit-box-shadow:	inset 0px 1px 0px 0px #FF7979;
			box-shadow:			inset 0px 1px 0px 0px #FF7979;

			
			
			background: -webkit-gradient( linear, left top, left bottom, color-stop(0.35, #DD1C1F), color-stop(1, #CB120F) );
			background:			-moz-linear-gradient( center top, #DD1C1F 35%, #CB120F 100% );
			
			background-color: #DD1C1F;
			-moz-border-radius:		4px;
			-webkit-border-radius:	4px;
			border-radius:			4px;

			border: 1px solid #7C2E2E;
			color: white;
			font-size: 12px;
			font-weight: 400;
			padding: 4px 13px;
			text-shadow: 1px 1px 0px black;
			float: left;
			display: block;
			position: relative;
			left: 65px;
			top: 42px;
			text-decoration: none;
	}
	
	.br-slideinfo .info2 .subtitle{
			display: block;
			font-weight: 300;
			letter-spacing: -2px;
			font-size: 42px;
			margin-left: 31px;
			margin-top: -5px;
	}
	
	.br-slideinfo .info2 .title{
			display: block;
			font-weight: 700;
			letter-spacing: -1px;
			padding-left: 31px;
			padding-top: 10px;
			font-size: 19px;
	}
	
	.br-slideinfo .info2 .text{
			display: block;
			font-size: 13px;
			font-weight: 400;
			padding: 39px 32px;
			line-height: 127%;
	}
	
/* -------------------------------------
 * Slider Timer
 * ------------------------------------*/

.br-circle-timer {
	position:absolute;
	top:-28px;
	width:28px;
	height:28px;
}

	.br-circle-timer .br-timer-dot {
		width:11px;
		height: 13px;
		background: url("../cute-theme/controls.png") -134px -15px;
	}

.br-bar-timer{
	height: 6px;
	position:absolute;
	bottom:0px;
}

	.br-bar-timer .br-timer-glow{
	 	height: 7px;
		background: url("../cute-theme/light-timer-glow.png");
		width: 104px;
	}
	 
	.br-bar-timer .br-timer-bar{
	 	height: 2px;
		background-color: white;
		position: absolute;
		top: 4px;
	}


/* -------------------------------------
 * Slider Captions
 * ------------------------------------*/

.br-captions{
		font-size:100%;
	}
	
	.caption1 {
	    background: #CC3C00;
		padding: 3px 3px 13px;
		color: white;
		left: 108px;
		font-size: 235%;
		position: absolute;
		font-weight: 300;
		letter-spacing: -2px;
	}
	
	.caption2 {
	    background: black;
	    position: absolute;
	    color: white;
	    font-weight: 600;
	    letter-spacing: -1px;
	    padding: 12px;
	    top: 50px;
	    left: 65px;
	}
	.caption3 {
	    position: absolute;
	    background: #f2f7fb;
	    letter-spacing: -1px;
	    font-size: 130%;
	    padding: 13px;
	    color: #333333;
	    bottom: 75px;
	}
	.caption4 {
	    color: white;
	    font-size: 200%;
	    font-weight: 300;
	    background: #ff0038;
	    position: absolute;
	    right: 0;
	    bottom: 128px;
	    letter-spacing: -2px;
	    padding: 12px;
	}
	.caption5 {
	    color: white;
	    background: black;
	    position: absolute;
	    padding: 6px;
	    top: 125px;
	    font-weight: 300;
	    left: 51%;
	}
	.caption6 {
	    color: white;
	    background: #feb300;
	    position: absolute;
	    right: 0;
	    font-weight: 600;
	    letter-spacing: -1px;
	    padding: 7px 10px;
	    top: 17%;
	}
	.caption7 {
	    color: rgb(82, 82, 82);
	    background: white;
	    position: absolute;
	    font-size: 136%;
	    letter-spacing: -1px;
	    font-weight: 300;
	    padding: 6px;
	    left: 12%;
	    top: 42%;
	}
	.caption8 {
	    position: absolute;
	    color: white;
	    font-size: 143%;
	    letter-spacing: -1px;
	    bottom: 0;
	    left: 37%;
	    background: #cb4b00;
	    padding: 9px 10px;
	}
	.caption9 {
	    color: white;
	    position: absolute;
	    background: #335267;
	    font-weight: 600;
	    font-size: 90%;
	    letter-spacing: -1px;
	    padding: 5px 54px 5px 13px;
	    right: 0;
	    bottom: 10%;
	}
		
	
	@media screen and (max-width: 650px) {
		.br-captions {font-size:75%}
	}
	
	@media screen and (max-width: 500px) {
		.br-captions {font-size:60%}
	}
	
	@media screen and (max-width: 400px) {
		.br-captions {display: none;}
	}
	
/* -------------------------------------
 * Slider Video
 * ------------------------------------*/

.br-video {
	
}

	.br-video .play-btn{
		width: 43px;
		height: 43px;
		background: url("../cute-theme/controls.png") no-repeat -3px -44px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -21px 0 0 -21px;
	}
	
	.br-video .close-btn{
		width: 22px;
		height: 22px;
		background: url('../cute-theme/controls.png') no-repeat 0px -123px black;
		cursor: pointer;
		position: absolute;
		right: 6px;
		top: 6px;
		border: solid 1px #5E5C5C;
	}

	.br-video .video-cont{
		background: black;
		position:absolute;
		z-index: 2;
		width:100%;
		height:100%;
	}

/* -------------------------------------
 * Slider Shadow
 * ------------------------------------*/

.br-shadow{
  background: url("../cute-theme/shadow.png") no-repeat scroll center ;
    bottom: -40px;
    height: 60px;
    left: -140px;
    position: absolute;
    width: 1150px;
}

/* -------------------------------------
 * Slider Loading
 * ------------------------------------*/

.br-loading {
	width: 23px;
	height: 23px;
	background: url("../cute-theme/controls.png") 150px -94px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -11px;
	z-index: 101;
}

	.br-loading .img{
		width:21px;
		height:21px;
		background: url("../cute-theme/small-loading.gif") no-repeat center;	
	}

.br-large-loading {
	width: 43px;
	height: 43px;
	background: url("../cute-theme/controls.png") -92px -42px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -21px;
	z-index: 100;
}

	.br-large-loading .img{
		width:40px;
		height:40px;
		background: url("../cute-theme/large-loading.gif") no-repeat center;	
	}


/* -------------------------------------
 * Slider Placeholder
 * ------------------------------------*/

/* __createControls() xoá <ul data-type="controls"> ngay khi thư viện khởi động, nên khối này chỉ
   nhìn thấy được lúc slider chưa chạy: đang chờ endpoint, hoặc endpoint chết. Không style thì
   <li data-type="bartimer"> rỗng hiện ra thành một dấu chấm bullet giữa khung trống, nên vẽ nó
   thành đúng spinner mà thư viện dùng lúc loading - chờ ra chờ, không ra lỗi hiển thị. */
ul[data-type="controls"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* slider.vue.js đọc data-width/data-height đặt ra --slide-ratio ngay lúc mount, nên chỗ chờ cao
	   đúng bằng chỗ banner sắp chiếm; min-height là mức sàn cho trang không khai kích thước khung. */
	aspect-ratio: var(--slide-ratio, auto);
	min-height: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}

	/* Hai lớp nền, đúng như .br-large-loading + .img của thư viện: đế tròn cắt từ sprite, gif quay ở trên. */
	ul[data-type="controls"]::before {
		content: "";
		width: 43px;
		height: 43px;
		background: url("../cute-theme/large-loading.gif") no-repeat center,
		            url("../cute-theme/controls.png") -92px -42px;
	}

	ul[data-type="controls"] > li {
		display: none;
	}