#pic-topic.package::after{content:""; width:100%; height:100%; background:url("../images/pic-package.jpg") no-repeat; background-size:100%; position:absolute; z-index:-3; opacity:.5; top:0; left:0;}

#top-head{padding:10px 25px 0 25px;}
#top-head .lang{right:25px;}
#package{width:100%; margin:45px 0 20px 0; padding:0; display:block; float:left; position:relative; z-index:30;}
#package .all-package{width:100%; margin:0; padding:0; text-align:left; display:block;}
#package .all-package figure{width:100%; margin:40px 0 0 0; padding:0; line-height:1.2; color:#000; border-radius:10px; border:1px solid #CCC; overflow:hidden;  display:block; font-family:'Kanit', sans-serif; background:#FFF;}
#package .all-package figure:first-child{margin-top:0;}
#package .all-package figure .pic{width:30%; display:block; float:left; overflow:hidden; object-fit:cover; position:relative;}
#package .all-package figure .pic img{width:100%; position:relative; display:block;}
#package .all-package figure .content{width:70%; padding:25px; display:block; float:left;}
#package .all-package figure .content h4{color:#6668AA; margin:0 0 15px 0; font-weight:500;}
#package .all-package figure .content p{color:#000; font-weight:300; font-size:1.1em; padding-left:25px; position:relative; overflow:hidden;}
#package .all-package figure .content p.h-ato{height:auto;}
#package .all-package figure .content p.info{height:100px; line-height:20px; color:#000; font-weight:300; font-size:1.1em; padding-left:25px; margin:0; position:relative; overflow:hidden; text-overflow: ellipsis; line-clamp:6; -webkit-line-clamp:6; -webkit-box-orient: vertical; display:-webkit-box;}
#package .all-package figure .content p i, #package .all-package figure .content .info i{color:#EF3937; font-style:normal; font-size:.9em; position:absolute; top:3px; left:0;}
#package .price{width:auto; padding:0 10px; background:#6668AA; display:block; position:absolute; top:50%;
 transform: translate(0, -50%);  z-index:30;overflow:hidden; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#package .price p{width:auto; margin:0; padding:6px 10px 6px 45px; line-height:1.2; font-size:160%; font-weight:500; color:#FFF; display:block; position:relative; font-family:'Kanit', sans-serif;}
#package .price p i{width:auto; display: block; position:absolute; left:15px; top:9px;}
#package .all-package figure .content .booking{width:162px; height:50px; line-height:50px; font-size:1.2em; margin:25px 0 0 0; padding:0; text-align:center; color:#FFF; border:0; text-decoration:none; border-radius:10px; display:block; background:#6668AA; position:relative; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -webkit-appearance:none;}
#package .all-package figure .content .booking:hover{transform:scale(1.05); transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}

/*********** Select ***********/
#package .filter{width:100%; margin:40px 0; padding:0; text-align:left; display:block; float:left;}
#package .filter .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width:100%; float:left; font-family:'Kanit', sans-serif;
}
form .btn{font-size:1.1rem;}
form .dropdown-menu{font-size:1.1rem;}
form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width:calc(100%); border:0;
}
form .bootstrap-select > .dropdown-toggle{border-radius:5px; padding:0 16px 0 24px; height:46px; border:1px solid #CCC !important; background:#EEE;}
form .dropdown-toggle::after{width:15px; height:10px; background:url(../images/icon-select.png); border:0; top:5px; right:0px; position:relative;}
form .dropup .dropdown-toggle::after{width:15px; height:10px; background:url(../images/icon-select.png); border:0; top:5px; right:0px; transform: rotate(180deg); position:relative;}
form .btn-light:not(:disabled):not(.disabled),
form .btn-light:not(:disabled):not(.disabled):focus{ border:0; outline:none;}
form .btn-light:not(:disabled):not(.disabled).active,
form .btn-light:not(:disabled):not(.disabled):active,
form .btn-light:not(:disabled):not(.disabled):hover,
form .show > .btn-light.dropdown-toggle{background:#FFF;}
form .dropdown-menu{min-width:100% !important; background:#EEE; margin:0 !important; border:1px solid #CCC; border-top:0;
border-radius:0 !important; border-bottom-left-radius:5px !important; border-bottom-right-radius:5px !important;}
form .dropdown-menu > li{border-bottom:1px solid #CCC;}
form .dropdown-menu > li:last-child{border-bottom:0;}
form .btn-light:not(:disabled):not(.disabled):hover, .show > .btn-light.dropdown-toggle{background:#EEE !important;}
form .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle{background:#EEE !important; border-bottom-left-radius:0; border-bottom-right-radius:0;}
form .bootstrap-select .dropdown-toggle .filter-option-inner{line-height:46px;}
form .bootstrap-select .dropdown-menu li.disabled a {cursor:not-allowed; color:#535353;}
form .bootstrap-select .dropdown-menu li.disabled:hover a{color:#FFF;}
form .dropdown-menu[x-placement="top-start"]{ border-top:1px solid #CCC !important; border-bottom:0 !important;
border-top-left-radius:5px !important; border-top-right-radius:5px !important;
border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;
}
.show.dropup > .btn-light.dropdown-toggle{
  background: #EEE !important;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* form .dropdown-menu[x-placement="top-start"] ~ .show > .btn-light.dropdown-toggle
{ border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:20px; border-bottom-right-radius:20px;}
div.parent .child2:empty ~ .child1{width:100%}; */

form .bootstrap-select .dropdown-menu{border-radius:0; padding:0; margin: 0;}
form .bootstrap-select .dropdown-menu li a{line-height:24px; padding:7px 20px;}
form .dropdown-item.active, form .dropdown-item:active{background:#6668AA;}
form .dropdown-item:focus, form .dropdown-item:hover {
  color: #FFF;
  text-decoration: none;
  background-color: #6668AA;
}

#ctrl{width:auto; margin:auto; margin-top:30px; display:inline-block;}
#ctrl a{width:45px; height:40px; line-height:40px; border:1px solid #CCC; background:#FFF; display:block; float:left; position:relative;}
#ctrl a::before{content:""; height:12px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#ctrl a:hover{color:#FFF; background:#EEE; }
#ctrl .first{border-radius:10px; border-bottom-right-radius:0; border-top-right-radius:0; overflow:hidden;}
#ctrl .first::before{width:18px; background:url(../images/icon-arrow1.png);}
#ctrl .last{border-radius:10px; border-bottom-left-radius:0; border-top-left-radius:0; overflow:hidden;}
#ctrl .last::before{width:18px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .prev{border-left:0; border-right:0px;}
#ctrl .prev::before{width:9px; background:url(../images/icon-arrow1.png);}
#ctrl .next{border-right:0px;}
#ctrl .next::before{width:9px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .num{border-right:0px; color:#AAA; text-align:center; display:block; float:left; font-weight:500; font-family:'Kanit', sans-serif;}
#ctrl .num:hover{color:#000;}
#ctrl .num::before{display:none;}
#ctrl .num.active{color:#FFF; background:#6668AA; pointer-events:none;}


footer{margin-top:60px;}

@media (min-width: 1921px) {
  #pic-topic.package::after{content:""; background:url("../images/pic-package.jpg") no-repeat top center; background-size:1920px;}
}
@media (max-width: 1280px) { 
    #package .all-package figure .pic img{width:103%;}
}
@media (max-width: 1122px) { 
    #package .all-package figure .pic{width:41%;}
    #package .all-package figure .content{width:59%; padding:20px;}
}
@media (max-width: 800px) {
    #package .filter{margin-top:0;}
    #package .all-package figure .pic{width:100%;}
    #package .all-package figure .content{width:100%; height:auto; padding:20px;}
    #package .all-package figure .content p{height:auto;}
    #package .all-package figure .content .booking{height:42px; line-height:42px;}
}
@media (max-width: 480px) {
    #top-head{padding:10px 15px 0 15px;}
    #top-head .lang{right:15px;}
    #package{margin:30px 0 20px 0;}
    #package .all-package figure .content .booking{width:115px; height:42px; line-height:42px; font-size:1em;}
    #package .all-package figure .content p{font-size:.95em;}
    #ctrl{margin-top:15px;}
}
@media (max-width: 414px) {    
    #package .all-package figure .content h5{font-size:1em;}
    #package .all-package figure .content .booking{height:40px; line-height:40px;}
}
@media (max-width: 378px) {    
    #package .all-package figure .content h5{font-size:1em;}
    #package .all-package figure .content .booking{height:36px; line-height:36px;}
}