html{width:100%; height:100%;}
body{font-family: "Momo Trust Sans", sans-serif; font-weight:400; font-size:15px; color:#000;}
.logo{position:absolute; top:-1px; z-index:10; left:50%; width:260px; margin-left:-130px;}
.logo img{width:100%;}
.wrapper{width:100%; height:100%; min-height:800px; overflow-y:auto; position:absolute; top:0; left:0; float:left;background: url(../images/bg.jpg) no-repeat center; background-size: cover; width:100%; color:#000; margin:initial!important; overflow:hidden; }
.wrapper .ele-TL{position:absolute; top:0; left:0; height:58%}
.wrapper .ele-TR{position:absolute; top:0; right:0; height:52%}
.wrapper .ele-BL{position:absolute; bottom:0; left:50px; height:20%}
.wrapper .ele-BR{position:absolute; bottom:0; right:0; height:20%}

.hc-luckywheel ul,
.hc-luckywheel li { margin: 0; padding: 0; list-style: none;}

.hc-luckywheel{ position: absolute; top:50%; left:50%; width: 600px; height: 600px; margin:-300px 0 0 -300px; border-radius: 50%;}
.hc-luckywheel:before{content:'';width:calc(100% + 6px); height:calc(100% + 6px); position:absolute; top:-3px; left:-3px; z-index:2; background:url(../images/wheelFrame.png) no-repeat center; background-size:cover;}
.hc-luckywheel .ribbon{position:absolute; top:100%; height:110px; width:620px; margin-left:-310px; left:50%; margin-top:-60px; text-align:center; z-index:10;  }
.hc-luckywheel .ribbon img{height:100%;}
.hc-luckywheel .ribbon:after{content:'Thời gian: 16/12 - 21/12'; position:absolute; width:100%; position:absolute; left:0; top:100%; color:#fff; margin-top:15px; font-size:18px;}

.hc-luckywheel-container {position: absolute;left: 0; top: 0;z-index: 1;width: inherit;height: inherit;border-radius: inherit;background-clip: padding-box;-webkit-transition: transform 10s ease; transition: transform 10s ease; border-radius:50%; overflow:hidden;}
.hc-luckywheel-container canvas {width: inherit; height: inherit;border-radius: 50%;}

ul.hc-luckywheel-list { position: absolute; left: 0; top: 0; width: inherit; height: calc(100% - 40px); z-index: 2; border-radius:50%; overflow:hidden;}
ul.hc-luckywheel-list li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #e4370e; font-weight: bold; }
ul.hc-luckywheel-list li span { position: relative; display: block;padding-top: 20px;margin: 0 auto;text-align: center;}
ul.hc-luckywheel-list li img { position: relative;  top: 30px;  left: 0px;  width: auto; height: 100px;}


.hc-luckywheel-btn { position: absolute; left: 50%; top: 50%;  z-index: 10;margin: -60px 0 0 -60px; width: 120px;height: 120px;border-radius: 50%;color: #fff; box-shadow: 0 0 30px rgba(0,0,0,.75); text-decoration: none;}
.hc-luckywheel-btn span{width:100%; height:100%; border-radius:50%; color:#fff; font-size:26px; padding-top:3px; font-weight:bold; background-image: radial-gradient(#e74219, #bd0d0a); z-index:2; display:flex; align-items:center; justify-content:center; position:absolute; box-shadow: inset 0 0 0 7px #e74219; text-transform:uppercase; }
.hc-luckywheel-btn:after {position: absolute;display: block; z-index: 1; content: ""; left: 50%; bottom: 100%; border-bottom: 40px solid #e74219; border-left: 20px solid transparent;   border-right: 20px solid transparent;margin-left:-20px; margin-bottom:-5px;}
.hc-luckywheel-btn.disabled { pointer-events:none;}

.jconfirm-type-win{border-radius:40px!important; height:500px; background:url(../images/bg-popup-win.jpg) no-repeat 0 0!important; background-size:auto 100% !important; color:#fff; position:relative!important; padding:0!important; }
.jconfirm-type-win .jconfirm-title-c{display:none!important;}
.jconfirm-type-win .jconfirm-content-pane{overflow:initial!important}
.jconfirm-type-win .inner{width:100%; height:500px; position:absolute; top:-18px; left:0; padding-left:380px; padding-bottom:100px; padding-right:30px; display:flex; align-items:center}
.jconfirm-type-win .title-1{width:100%; float:left; font-size:25px; font-weight:normal; text-align:center; margin:0; padding:0;}
.jconfirm-type-win .title-2{width:100%; float:left; text-align:center; text-transform:uppercase; font-size:22px; font-weight:bold; letter-spacing:1px; margin-top:0px; margin-bottom:30px;}
.jconfirm-type-win .title-3{width:100%; float:left; text-align:center; font-size:16px; font-weight:900; margin-bottom:20px;}
.jconfirm-type-win .title-3 span{font-weight:500; line-height:34px; height:32px; padding: 0 20px; background:#ffca00; display:inline-block; border-radius:16px; color:#000; font-size:18px; }
.jconfirm-type-win h1{text-align:center;  width:100%; float:left; margin:0; padding:0; font-size:40px; font-weight:bold}
.jconfirm-type-win .product-img{width:250px; position:absolute; left:65px; top:120px; transform:rotate(-25deg) }
.jconfirm-type-win .jconfirm-buttons{position:absolute; bottom:30px; right:100px; z-index:5;}
.jconfirm-type-win .jconfirm-buttons button{width:200px; height:42px; line-height:42px!important; font-size:16px!important; padding:0!important; outline:none!important}


.nav-panelGift{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); box-shadow:inset 0 0 5px 1px rgba(0,0,0,.07); position:fixed; right:30px; bottom:30px; }
.nav-panelGift svg{fill:#fff;}
.panelGift{position:fixed!important; width:500px; height:calc(100% - 40px); top:20px!important; right:-500px!important; left:initial!important; background:#fff; z-index:20; border-radius:10px; box-shadow: 0 0 40px rgba(0,0,0,.2); display:block; transform:initial!important; border:none; padding: 60px 0 60px 0; opacity:0; pointer-events:none; visibility:hidden; transition:.3s; }
.panelGift .head-panel{width:100%; position:absolute; top:10px; left:0; width:100%;}
.panelGift .head-panel label{line-height:50px; margin:0; text-transform:uppercase; font-weight:bold; padding-left:25px;}
.panelGift .body-panel{width:100%; height:100%; position:relative; padding: 0 25px;}
.panelGift .foot-panel{width:100%; height:60px;position:absolute; left:0; bottom:0; padding: 0 15px;}
.panelGift .foot-panel .total-item{float:right; position:relative; line-height:32px; height:30px; margin: 15px 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); padding: 0 12px; border-radius:7px; }
.panelGift .foot-panel .total-item:first-of-type{float:left;}
.panelGift .foot-panel .total-item i{font-size:16px; opacity:.5; padding-right:10px; color:#000}
.dropGift.show .panelGift{right:20px!important; opacity:1; visibility:initial; pointer-events:initial;}

.tblGift{width:100%;padding:0; margin:0;}
.tblGift thead th{background:#008555; color:#fff; height:40px; padding: 0 10px; white-space:nowrap; font-weight:500;}
.tblGift thead th:first-child{border-radius:7px 0 0 7px;}
.tblGift thead th:last-child{border-radius:0 7px 7px 0;}
.tblGift tbody tr td{padding: 5px 10px; text-align:center;}
.tblGift tbody tr td:first-child{border-radius:7px 0 0 7px}
.tblGift tbody tr td:last-child{border-radius:0 7px 7px 0}
.tblGift tbody tr td:last-child:after{content:'%'; padding-left:1px; }
.tblGift tbody tr td img{width:60px;}
.tblGift tbody tr td:nth-child(2),
.tblGift tbody tr td:nth-child(3){text-align:left;}
.tblGift tbody tr:nth-child(2n+2) td{background:rgba(0,0,0,.05)}