*{letter-spacing:1.4px;box-sizing:border-box;-moz-sizing:border-box;-webkit-sizing:border-box}
body{min-width:320px;margin:0}
.inline{display:inline-block;list-style:none;margin-left:0px;margin-right:0px}

.lbl{font-family: tahoma;
font-size: 12px;
font-weight: normal;
margin-bottom: 4px;
line-height: 24px;
height: 24px}

.txt,.drp{border:solid 1px #9b9b9b;background-color:#FFF;height:34px;line-height:34px;background-color:#FFF;font-size:12px;padding-left:6px;padding-right:6px;outline:none;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
    .txt.mul {
        min-height:100px
    }
div.txt{height:32px;line-height:32px}
textarea.txt{line-height:16px}
*:disabled{background-color:#f3f3f3}
.full,.ful{width:100%}
.txt.req,.txt.err{background:url(img/req.png) 1px center no-repeat #FFF; background-color:#FFF}
.drp.req,.drp.err{background:url(img/req.png) 1px center no-repeat #FFF; background-color:#FFF}
.txt.err,.drp.err{border-color:red}
.dropdownlist.req .inner{background:url(img/req.png) 1px center no-repeat; padding-left:6px}
.checkbox_list.req .inner{background:url(img/req.png) 1px center no-repeat; padding-left:6px}
.datetime input.txt{background:none}

.chk{background:url(img/chk.png) 0 -27px no-repeat;height:34px;line-height:34px;padding-left:24px;cursor:pointer;font-family:tahoma;font-size:12px;font-weight:normal}
.chk.focus{background:url(img/chk.png) 0 -136px no-repeat}
.chk.checked{background:url(img/chk.png) 0 8px no-repeat}
.chk.checked.focus{background:url(img/chk.png) 0 -216px no-repeat}
td.chk{background-image:none}
.rad{background:url(img/chk.png) 0 -98px no-repeat;height:34px;line-height:34px;padding-left:26px;cursor:pointer;font-family:tahoma;font-size:12px;font-weight:normal;display:inline-block}
.rad.focus{background:url(img/chk.png) 0 -176px no-repeat}
.rad.checked{background:url(img/chk.png) 0 -62px no-repeat}
.rad.checked.focus{background:url(img/chk.png) 0 -256px no-repeat}
a.chk,a.rad{display:inline-block;text-decoration:none}
a.chk:hover,a.rad:hover{color:#000}
.header{font-size:16px;text-align:left;font-weight:bold}
.uploadfile{display:none}

td{font:normal 12px tahoma}
.s_mobile td{font:normal 18px tahoma}
td.ngaythang{width:100px;text-align:right}


.w40{width:40px}
.w60{width:60px}
.w80{width:80px}
.w100{width:100px}
.w110{width:110px}
.w120{width:120px}
.w140{width:140px}
.w160{width:160px}
.w170{width:170px}
.w200{width:200px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.h40{height:40px}
.h60{height:60px}
.h70{height:70px}
.h100{height:100px}
.h120{height:120px}
.h200{height:200px}
.h300{height:300px}
.h400{height:400px}
.h600{height:600px}
 .w138{width:138px}
.nicescroll-rails div{cursor:pointer}

.gruu-dragable-target{height:2px;background:none}
.gruu-dragable-target.up.show{background:#AAAAAA}
.gruu-dragable-target.down.show{background:#AAAAAA}

.mask{background-color:#000;height:100%;left:0;position: absolute;top:0;width: 100%;z-index: 9998;display:none;text-align:center;opacity:0.7;filter: alpha(opacity = 70)}
#pCombine,#pNewRegister{color:#004EC4;text-decoration:underline;cursor:pointer;font-weight:400;font-size:12px}#btnCombine{display:none}

.dynamic-box table td{padding:4px 0}

#txtBirthday_day, #txtBirthday_month, #txtBirthday_year{width:60px;text-align:center}

#divDynamicContent{margin-bottom:10px;display:none}


.dynamic-box
{
    background-color:#fff;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;padding:10px
    }
.dynamic-box.popup
{
    padding:10px;
    -webkit-box-shadow: 0px 3px 20px -4px rgba(0,0,0,1);
    -moz-box-shadow: 0px 3px 20px -4px rgba(0,0,0,1);
    box-shadow: 0px 3px 20px -4px rgba(0,0,0,1);
    z-index:99999;position:absolute;opacity:0;-moz-opacity:0;-webkit-opacity:0;background-color:#fff;padding:10px
    }
.dynamic-box .head {
    margin-right: 4px;
    position: relative;width:100%;margin-bottom:10px;border-bottom:solid 1px #ddd;padding-bottom:6px
}
    .dynamic-box .head .close {
        width: 24px;
        height: 24px;
        background: url(img/del.png) center center no-repeat #ddd;
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        cursor: pointer;
    }
    .dynamic-box .head .close:hover{
        background-color:#c7c7c7
    }
.dynamic-box .head .title {
    font-size: 16px;
    font-weight: 700;
    padding-right: 30px;
    overflow: hidden;
    line-height:24px;color:#006ec3
}
.dynamic-box.popup{
    position:inherit;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px
}
.dynamic-box.confirm {
    max-width:600px
}
.txt::-webkit-input-placeholder {
   color: #636363;
}

.txt:-moz-placeholder { /* Firefox 18- */
   color: #636363;  
}

.txt::-moz-placeholder {  /* Firefox 19+ */
   color: #636363;  
}

.txt:-ms-input-placeholder {  
   color: #636363;  
}

.txt.err,.dropdownlist.err{border-color:red}
.txt.no-border
{
    border: none;padding:0;
}
.border-bottom
{
    border: none;padding:0;
    border-bottom:solid 1px #f6f6f6
}
.dropdownlist{border:solid 1px #9b9b9b;height:34px;line-height:34px;display:block;background:url(img/droparrow.png) right center no-repeat #FFF;cursor:pointer;display:inline-block;width:100%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}

.dropdownlist.disabled,.dropdownlist.disabled:hover{background:url(img/droparrow.png) right 17px no-repeat #f3f3f3}
.dropdownlist .inner{font-size:12px;text-decoration:none;padding-left:6px;height:34px;line-height:34px;padding-right:20px;overflow:hidden;white-space:nowrap;outline:none;text-overflow:ellipsis}
.dropdownlist .inner.req{padding-left:6px}
.dropdownlistoptions{font:normal 12px tahoma;z-index:999999;position:absolute;background:#FFF;margin:0px;padding:0px;text-decoration:none;display:none;max-height:200px;-webkit-box-shadow: 0px 3px 3px 0px rgba(147, 147, 147, 147);box-shadow: 0px 3px 3px 0px rgba(147, 147, 147, 147);border-radius:4px;margin-top:2px;overflow-y:auto;overflow-x:hidden}
.dropdownlistoptions .option{font:normal 12px tahoma;margin:0px;text-decoration:none;height:30px;line-height:30px;display:block;padding:0 2px 0 2px;cursor:pointer;width:100%;white-space:normal;text-overflow:ellipsis}
.dropdownlistoptions .option.selected{background:#ddd}
.dropdownlistoptions .option:hover,.dropdownlistoptions .option.hover,.dropdownlistoptions .option.selected.hover{background:#337ab7;color:#fff}
.dropdownlistoptions .option.l1{margin-left:12px}
.dropdownlistoptions .option.l2{margin-left:24px}

.checkbox_list{border:solid 1px #9b9b9b;height:34px;line-height:34px;display:block;background:url(img/droparrow.png) right center no-repeat #FFF;cursor:pointer;display:inline-block;width:100%}
.checkbox_list.disabled,.checkbox_list.disabled:hover{background:url(img/droparrow.png) right 17px no-repeat #f3f3f3}
.checkbox_list .inner{font-size:16px;text-decoration:none;padding-left:6px;height:34px;line-height:34px;padding-right:20px;overflow:hidden;white-space:nowrap;outline:none;text-overflow:ellipsis}
.checkbox_list .inner.req{padding-left:6px}
.checkbox_listoptions{font:normal 12px tahoma;position:absolute;background:#FFF;margin:0px;padding:0px;text-decoration:none;display:none;max-height:200px;-webkit-box-shadow: 0px 3px 3px 0px rgba(147, 147, 147, 147);box-shadow: 0px 3px 3px 0px rgba(147, 147, 147, 147);border-radius:4px;margin-top:2px;overflow-y:auto;overflow-x:hidden;z-index:999999}
.checkbox_listoptions .option{font:normal 12px tahoma;margin:0px;text-decoration:none;height:30px;line-height:26px;display:block;cursor:pointer;width:100%;white-space:normal;padding:0 4px}
.checkbox_listoptions .option.selected{background:#ddd}
.checkbox_listoptions .option:hover,.dropdownlistoptions .option.hover,.dropdownlistoptions .option.selected.hover{background:#337ab7;color:#fff}
.checkbox_listoptions .option.l1{margin-left:12px}
.checkbox_listoptions .option.l2{margin-left:24px}
.checkbox_listoptions .option>label{padding-left:4px;white-space:nowrap}
.checkbox_listoptions .option>.option-chk{margin:0}
.input-form .col.l{
    float:left;width:48%
}
.input-form .col.r{
    float:right;width:48%
}
.input-form .col.f{
    float:none;width:100%;clear:both
}
@media (max-width: 710px) {
    .input-form .col.l, .input-form .col.r {
        float:none;width:100%
    }
}



.input-form .region{width:48%;float:left}
.input-form .region.full{width:100%;float:none}
.input-form .region .header{font-weight:normal}
.input-form .region.r{float:right}

.input-form .row{width:100%;clear:both;padding:0;overflow:hidden;margin-bottom:10px}
.input-form .row:last-child{margin-bottom:0}
.input-form .row .block{width:calc(50% - 5px);float:left}
.input-form .row .block.w34{width:calc(75% - 5px)}
.input-form .row .block.w14{width:calc(25% - 5px)}
.input-form .row .block>.h{font-weight:bold;margin:4px 0}

.input-form .row .block>.val{min-height:34px}
.input-form .row .block .block{padding:0}

    .input-form .row .block .val.fix {
        height:34px
    }

.input-form .row .block.r{float:right}
.input-form .row .block.fix{padding:0}
.input-form .row .block.full{width:100%;float:none}
.input-form .row .block .txt{width:100%}
.input-form .row .block .datetime input.txt{width:33.333333333333333%;float:left}
.input-form .row .block>p{font-size:16px;margin:10px 0 10px 0}
    .input-form .row .block .label {
        height:20px;line-height:20px
    }
.input-form .header{font-size:16px;font-weight:bold;clear:both;line-height:24px}

.input-form .step .form{display:none;margin-bottom:20px}
.input-form .step.actived .form{display:block}
.input-form .step>.header{color:#0076e3;padding:10px 10px 10px 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position:relative;margin-bottom:0px;background:url(img/arrow.png) 16px 16px no-repeat #fff;border:solid 1px #0076e3;cursor:pointer;margin:4px 0
}
.input-form .step.actived>.header
{
    background:url(img/arrow.png) 16px -103px no-repeat #0076e3;color:#fff;
    }
.input-form .form-region .form-content {
    display:none
}
.input-form .form-region.opened .form-content {
    display:block
}
.input-form .form-region .region-header {
    clear:both;font-weight:bold;height:26px;line-height:26px;color:#444;cursor:pointer;background:url(img/max.png) left center no-repeat;padding-left:24px;border-bottom:solid 1px #9B9B9B;margin-bottom:4px
}
.input-form .form-region.opened .region-header {
    background:url(img/min.png) left center no-repeat
}
table.grid{border-top:solid 1px #ddd;border-right:solid 1px #ddd;width:100%}
table.grid tr>td{border-bottom:solid 1px #ddd;border-left:solid 1px #ddd;padding:4px;height:34px;background-color:#fff}
table.grid tr>td.index{text-align:center;width:40px}
table.grid tr.header>td{background:#f1f1f1;text-align:center;font-weight:bold}
table.grid tr.header>td.date{width:100px}
table.grid tr.item>td.date{text-align:right}

table tr>td.h{font-weight:bold;padding-right:10px}

.paging {
    padding: 10px 0;margin-left:10px
}
.paging .page{padding:6px 10px;background-color:#cecece;margin-right:4px;cursor:pointer;text-decoration:none;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;font-size:12px}
.paging .page.currentpage{background-color:#909090;color:#fff}

::-webkit-input-placeholder { /* Chrome */
  color: #00224f;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #00224f;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #00224f;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #00224f;
  opacity: 1;
}
.box>.header
{
    height:34px;line-height:34px;color:#636363;
    border-bottom:solid 2px #636363;
}
.box .header.icon
{
    padding-left:30px
}
.box .header.icon.add
{
    background:url(img/add.png) left center no-repeat;
}
.nicEdit-main
{
    outline:none
}

.tabs>.header
{
    margin:0;padding:0;border-bottom:solid 1px #ffce22;min-height:34px;line-height:34px;overflow:hidden
}
    .tabs>.header>li
    {
        display: inline-block;
        list-style: none;
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        background: #f6f6f6;
        border-radius: 4px 4px 0 0;
        cursor: pointer;font-size:12px
    }
    .tabs>.header>li.actived
    {
        background:#ffce22;color:#fff
    }

.tab-content
{
    display:none
}
.tab-content.actived
{
    display:block
}

.btns{margin:10px 0 0 0;text-align:center;clear:both}
.btns.noclear{clear:none}
.btns.line{border-top: 1px solid rgb(228, 228, 228)}
.btns.line .inner{border-top: 1px solid rgb(255, 255, 255);padding-top:6px}
.btns.left{text-align:left;float:none;clear:both}
.btns.right{text-align:right}
.btns .btn{display:inline-block;height:34px;line-height:34px;text-align:center;
			margin:0 4px 0 0px;cursor:pointer;text-decoration:none;
			padding:0px 20px;
			font-family:Tahoma;font-size:12px;font-weight:bold;
			color:#FFF;white-space:nowrap;
			background:#0076e3;border:none;margin-bottom:4px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px
           }
.btns .btn.b1,.btns .btn.selected{background-color:#ffce22}
.btns .btn.selected:hover{background-color:#ffce22}

.btns .btn:hover{background:#19a1ff}
.btns .btn.b1:hover{background:#ababab}

    .btns .btn.b2
    {
        background:#fb9902;
    }
    .btns .btn.b2:hover
    {
        background:#ffaf34;
    }
    #divRegions.dropdownlist>.inner {
        height:100%;padding-left:20px;font-size:12px;background:url(img/map-anchor.png) 4px center no-repeat
    }


.find-user .btns .btn{
    padding-left:30px;background-image:url(img/check-dotted.png);background-position:4px center;background-repeat:no-repeat
}
.find-user .btns .btn.selected{
    padding-left:30px;background-image:url(img/check-solid.png)
}

#ulContextMenu {
    margin: 0;
    padding: 0;
    position: absolute;
    background-color: #F7F7F7;
    -webkit-box-shadow: 0px 3px 3px rgba(104, 104, 104, 1);
    -moz-box-shadow: 0px 3px 3px rgba(104, 104, 104, 1);
    box-shadow: 0px 3px 3px rgba(104, 104, 104, 1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    z-index: 999
}
#ulContextMenu>li {
    padding:6px;list-style:none;
    border-bottom: solid 1px #ddd;
    border-top: solid 1px #fff;cursor:pointer
}
    #ulContextMenu>li:first-child {
        border-top:none;
        border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    }
    #ulContextMenu>li:last-child {
        border-bottom:none;
        border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    -moz-border-radius:0 0 4px 4px;
    }
    #ulContextMenu>li:hover {
        background-color:#ddd;
    }

.PopupMenu{position:absolute;z-index:999999;max-width:400px;display:none}
.PopupMenu>.PopupMenu-content{-webkit-box-shadow: 0px 3px 3px rgba(104, 104, 104, 1);
	-moz-box-shadow:    0px 3px 3px rgba(104, 104, 104, 1);
	box-shadow:         0px 3px 3px rgba(104, 104, 104, 1);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background:#F7F7F7;
	padding:4px 6px;font-family:tahoma;font-size:12px;font-weight:normal;color:#ff0000;
	position:relative;border:solid 1px #d8d8d8
}

.PopupMenu>.PopupMenu-content>a{list-style:none;height:26px;line-height:26px;text-decoration:none;display:block;border-bottom:solid 1px #D8D8D8;border-top:solid 1px #FFF;cursor:pointer;color:#0c476c}
.PopupMenu>.PopupMenu-content>a:hover{color:#3CA0E8}
.PopupMenu>.PopupMenu-content>a.first{border-top:none}
.PopupMenu>.PopupMenu-content>a.last{border-bottom:none}

.PopupMenu>.arrow
{
	position:absolute;
	background:url(img/uparrow.png) top center no-repeat;height:6px;width:12px;display:block;top:-4px;left:4px;z-index:9999;
	}
.PopupMenu.right>.arrow
{
	right:4px;left:auto
	}
    
.menu-popup{margin:0px;padding:0px;background: #f7f7f7}
.menu-popup li{list-style:none;margin:0px;padding:0px;
               border-left:dotted 1px #ddd
}

    .menu-popup li:last-child {
        border-left:none
    }
.menu-popup li.level0{
               border-top: solid 1px #ddd;border-left:none
}
.menu-popup li.level0>a{
               border-top: solid 1px #fff;
}

.menu-popup li a{cursor:pointer;text-decoration:none;background:none;position:relative;padding-left:10px;display:block}
.menu-popup ul{margin:0}
.menu-popup>.menuitem
{
    list-style:none;display:block;position:inherit;
}
.menu-popup>.menuitem a>.icon{height:17px;width:16px;position:absolute;left:0;top:0;border-bottom:dotted 1px #ddd}
.menu-popup>.menuitem .childitem:last-child>a>.icon{border-left:dotted 1px #ddd}
.menu-popup>.menuitem .childitem.expanded>a>div>.icon{
    height: 17px;
    width: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-left: dotted 1px #ddd}

.menu-popup>.menuitem .aitem
{
	margin:0px;display:block;padding-left:0px;
	list-style:none;cursor:pointer;text-decoration:none;text-transform:uppercase;
}
.menu-popup>.menuitem .aitem .name
{
	display:block;cursor:pointer;text-decoration:none;font-family: tahoma;font-size:12px;position:relative; white-space: nowrap;color:#0c476c;font-weight:bold;
}
.menu-popup>.menuitem .arrow
{
    height:0px;width:0px;display:inline-block;right:8px;position:absolute;top:14px;
    border-left: 4px solid #7F7F7F;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
.menu-popup>.menuitem .arrow.bottom
{
    top:16px;
    border-left: 4px solid transparent;
    border-top: 4px solid #7F7F7F;
    border-right: 4px solid transparent;
}
.menu-popup>.menuitem .arrow
{
    top:14px;
}
.menu-popup>.menuitem .arrow.bottom
{
    top:14px;
}
.menu-popup>.menuitem a:hover>.name,.menu-popup>.menuitem.actived a>.name
{	
	color:#3CA0E8;
}
.menu-popup>.menuitem .name{height:34px;line-height:34px;position:relative;font-size:13px;color:#0c476c;font-weight:bold;padding-left:8px;position:relative}
    .menu-popup>.menuitem.level0>a>.name {
        padding-left:0
    }

    .menu-popup>.menuitem .level2>a>.name {
        font-weight:normal
    }
.menu-popup>.menuitem .achild:hover .childname{color:#3CA0E8}
.menu-popup>.menuitem .name.actived{font-weight:bold;color:#3CA0E8}
.menu-popup>.menuitem .achild.expanded{font-weight:bold;color:#3CA0E8}
.menu-popup .childitem a:hover{color:#98CFF9}
.menu-popup>.menuitem .sub{margin:0px;padding:0px;position:static;margin-left:10px;display:none}
.menu-popup>.menuitem .sub li{margin:0px;padding:0px;list-style:none;margin-bottom:1px}
.menu-popup>.menuitem .sub.actived{display:block}
.menu-popup>.menuitem .childitem .sub{background:none}
.menu-popup>.menuitem .childitem .sub .childname{padding-left:34px;font-weight:bold}
.menu-popup>.menuitem .childitem .sub.level1 .childname{padding-left:0px;font-weight:normal}
.menu-popup>.menuitem .count
{
	display:block;
    font-size: 11px;
    font-style: normal;
    height: 34px;
    line-height: 34px;
    float:right;
    text-align: right;
    width: auto;
    margin-right:4px;
    }
.menu-popup>.menuitem.actived .count
{
	background-color:#FFF;border-radius: 10px 10px 10px 10px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);color:#000;
    }
    
.menu-popup .childitem{list-style:none;margin-left:10px;margin-bottom:4px;margin-top:1px}


/*message*/
#divMessage{position:absolute;z-index:999999;display:none;max-width:400px}
#divMessage .message-content{-webkit-box-shadow: 0px 3px 3px rgba(104, 104, 104, 1);
	-moz-box-shadow:    0px 3px 3px rgba(104, 104, 104, 1);
	box-shadow:         0px 3px 3px rgba(104, 104, 104, 1);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background:#fff999;
	padding:10px;font-family:tahoma;font-size:12px;font-weight:normal;color:#ff0000;
	position:relative;
	top:6px;
}
#divMessage .uparrow
{
	position:absolute;
	background:url(img/message-uparrow.png) center center no-repeat;height:10px;width:20px;display:block;top:0;z-index:9999;
	}
.find-users {
    height:auto;cursor:pointer;min-height:34px
}
.find-users>ul {
    margin:0;padding:1px
}
    .find-users>ul>li {
        list-style:none;border:solid 1px #ddd;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;margin:1px;display:inline-block;line-height:26px;height:26px;padding:0 24px 0 2px;
        position:relative
    }
    .find-users>ul>li>i{
        position:absolute;width:16px;height:16px;right:4px;top:5px;background:url(img/del.png) center center no-repeat;cursor:pointer
    }
    .BEN.message {
    color: #fff;
    cursor: pointer;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#divStaticContent{position:relative;z-index:1}
.s_skin .s_message {
    display:none;z-index:9999
}
    .BEN.message>i {
    position: absolute;
}
.BEN.message>i.icon {
    width: 40px;
    height: 100%;
    background: url(img/message.png) center center no-repeat;
    bottom: 0;
    left: 0px;
    top: 0;
}
        .BEN.message>i.count {
            right: 3px;
            padding: 0 4px;
            background: #fcc600;
            height: 16px;
            top: 3px;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            line-height: 16px;
        }
.messages>.message {
    display:block;border:solid 1px #c10000;color:#c10000;padding:10px;position:relative;margin:2px 0
}
.messages>.message>i{
    position:absolute;top:10px;right:10px;background:url(img/del.png) center center no-repeat;width:20px;height:20px;cursor:pointer
}
.dynamic-box#divViewUnreadMessages{width:700px}
#divViewUnreadMessages .message-list{
    margin:0;padding:0
}
    #divViewUnreadMessages .message-list>li {
        display:block;border-bottom:solid 1px #ddd;margin:4px 0 4px 0;padding:0 0 4px 0;position:relative
    }
    
        #divViewUnreadMessages .message-list>li .head {
            position:relative;height:38px;padding-right:26px
        }
        #divViewUnreadMessages .message-list>li>.head>i{
        position:absolute;right:0px;top:0px;width:24px;height:24px;background:url(img/header-closed.png) center center no-repeat #ddd;cursor:pointer
    }
        #divViewUnreadMessages .message-list>li.opened>.head>i{
        position:absolute;right:0px;top:0px;width:24px;height:24px;background:url(img/header-opened.png) center center no-repeat #ddd;cursor:pointer
    }
        #divViewUnreadMessages .message-list>li .head>.img {
            position: absolute;width: 38px;height: 38px;background: #ddd;text-align: center;padding: 2px;
        }
        #divViewUnreadMessages .message-list>li .head>.title {
                font-weight: bold;font-size: 12px;text-transform: none;position: absolute;height: 34px;top: 0px;left: 44px;line-height: 18px;
        }
        #divViewUnreadMessages .message-list>li .head>.from-user {
                font-size: 12px;text-transform: none;position: absolute;top: 20px;left: 44px;line-height: 18px;font-style:italic
        }
        #divViewUnreadMessages .message-list>li .content {
            display:none
        }
        #divViewUnreadMessages .message-list>li.opened>.content {
            display:block
        }

#divTip {
    position:absolute;background-color:#ffeeb2;border:solid 1px #ddd;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;z-index:999999;padding:10px;max-width:300px;display:block
}
.suggest {
    position:absolute;z-index:999999;
    -webkit-box-shadow: 0px 4px 10px -4px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 4px 10px -4px rgba(0,0,0,0.4);
box-shadow: 0px 4px 10px -4px rgba(0,0,0,0.4);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background:#f9f9f9;display:none
}
    .suggest>li {
        display:block;
        border-bottom:solid 1px #ddd;
        border-top:solid 1px #fff;padding:10px;cursor:pointer
    }
        .suggest>li:first-child {
            border-top:none
        }
        .suggest>li.selected {
            background-color:#ddd
        }
        .suggest>li:hover,.suggest>li.hover{
            background-color:#ffaf34
        }
.Controls.Social {
    margin:0;padding:0
}
.Controls.Social>li{display:inline-block;padding:0;margin:0 2px;list-style:none}

.Controls.Footer {
    margin:0;padding:0;color:#fff;line-height:24px
}
    .Controls.Footer>div>.inner {
        width:1100px;margin:0 auto
    }
    .Controls.Footer>.above>.inner>.cell{
        float:left
    }
    .Controls.Footer>.above{
        padding:10px 0;overflow:auto
    }
    
    
    .Controls.Footer>.below{background-color:#9f9f9f;min-height:34px;clear:both}

    .Controls.Footer>.above>.inner>.cell{}
    .Controls.Footer>.above>.inner>.cell.noborder,.Controls.Footer>.above>.inner>.cell.noborder>.inner{border-left:none}
    .Controls.Footer>.above>.inner>.cell.slogan-shortinfo>.inner>.shortinfo{line-height:16px;padding:10px 0}
    .Controls.Footer>.above>.inner>.cell>.inner{padding:0px 10px;height:100%;line-height:16px}
    .Controls.Footer>.above>.inner>.cell>.inner>.info.companyname{text-transform:uppercase}

    .Controls.Footer>.above>.inner>.cell.logo{width:130px}
    .Controls.Footer>.above>.inner>.cell.logo>a>img{max-width:60px}
    .Controls.Footer>.above>.inner>.cell.hotline-social{width:160px;text-align:right}
    .Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.hotline{margin-bottom:10px}
    .Controls.Footer>.above>.inner>.cell.company-info{width:470px;border-left:solid 1px #6e6e6e;border-right:solid 1px #d7d7d7}
    .Controls.Footer>.above>.inner>.cell.company-info>.inner{border-left:solid 1px #d7d7d7;border-right:solid 1px #6e6e6e}
    .Controls.Footer>.above>.inner>.cell.slogan-shortinfo{width:calc(100% - 770px)}
    .Controls.Footer>.above>.inner>.cell.slogan-shortinfo>.inner>.slogan{text-transform:uppercase}

    .Controls.Footer>.above>.inner>.cell.hotline-social>.inner{
        position:relative
    }
    
    .Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.hotline>a{color:#fff;text-decoration:none;background: url(img/hotline.png) left center no-repeat;font-size:16px;padding-left:20px;display:inline-block;line-height:24px}

    

    .Controls.Footer>.below>.inner>.copyright{display:inline-block;margin-right:40px;line-height:34px}
    .Controls.Footer>.below>.inner>.design{display:inline-block}
    .Controls.Footer>.below>.inner>.design>a{color:#fff;text-decoration:none;line-height:34px}

    .hotline-ringing{display:block;position:fixed;bottom:0}

@media (max-width: 1100px){
    .Controls.Footer>div>.inner {
        width:100%
    }
    .Controls.Footer>div.below>.inner {
        padding:0 10px
    }
    .Controls.Footer>.above>.inner>.cell.logo{margin-left:10px}
}
@media (max-width: 970px){
   .Controls.Footer>.above>.inner>.cell.slogan-shortinfo{
       width:100%;clear:both;margin-top:10px;border-top:solid 1px #6e6e6e
   }
   .Controls.Footer>.above>.inner>.cell.slogan-shortinfo>.inner{
       border-top:solid 1px #d7d7d7;line-height:34px
   }
   .Controls.Footer>.above>.inner>.cell.company-info{border-right:none;width:calc(100% - 300px)}
   .Controls.Footer>.above>.inner>.cell.company-info>.inner{border-right:none}
}
@media (max-width: 840px)
{
    .input-form .region{width:100%;float:none}
    #divUpdateMember .input-form .region{width:48%;float:left}
    #divUpdateMember .input-form .region.r{float:right}
    }
@media (max-width: 700px)
{
   .dynamic-box#divViewUnreadMessages{width:100%}
   .input-form .row .block>.block{width:100%}
    }

@media (max-width: 670px) {
    .Controls.Footer>.above>.inner>.cell.hotline-social{border-right:none;width:calc(100% - 150px)}
   .Controls.Footer>.above>.inner>.cell.hotline-social>.inner{border-right:none;padding-right:0}
    .Controls.Footer>.above>.inner>.cell.company-info{
       width:100%;clear:both;margin-top:10px;border-top:solid 1px #6e6e6e;height:auto;border-left:none
   }
   .Controls.Footer>.above>.inner>.cell.company-info>.inner{
       border-top:solid 1px #d7d7d7;padding-top:10px;height:auto;border-left:none
   }
   .Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.hotline {display:inline-block;position:absolute;right:110px;top:10px}
   .Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.social{display:inline-block;position:absolute;right:0;top:10px}
}
@media (max-width: 550px) {
   .Controls.Footer>.above>.inner>.cell.slogan-shortinfo>.inner{
       height:auto
   }
}
@media (max-width: 430px)
{
    .dynamic-box {
        width: 100%;
    }
    .input-form .row .block{width:100%;float:none}

   .Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.hotline,.Controls.Footer>.above>.inner>.cell.hotline-social>.inner>.social {display:block;position:initial}
   
    }
@media (max-width: 330px) {
   .Controls.Footer>.above>.inner>.cell.slogan-shortinfo>.inner{
       height:auto
   }
}





@-webkit-keyframes ringing {
    from {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    left:0;
    bottom:0
    }
    to {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 100%;
    left:-10px;
    bottom:-10px
    }
}

@keyframes ringing {
    from {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    left:0;
    bottom:0
    }
    to {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 100%;
    left:-10px;
    bottom:-10px
    }
}

.ringing{
    width: 30px;
    height: 30px;
    display: none;
    position: fixed;
    bottom: 70px;
    right: 30px;
    border-radius: 100%;
    z-index:999999;
    -webkit-opacity:0.7;
    -moz-opacity:0.7;
    opacity:0.7;background:url(img/hotlinecall.png) center center no-repeat #1fafff;cursor:pointer
}
.ringing:hover{
        -webkit-opacity:1;
    -moz-opacity:1;
    opacity:1;
}
.ringing *{
    border:solid 1px #1fafff;
    border-radius:100%;
    width:30px;
    height:30px;
    bottom:0;position:absolute;
    left:-10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);

    -webkit-animation: ringing 1s infinite; 
    animation: ringing 1s infinite;
}

.register-box .avatar{text-align:left}
.register-box .avatar .img,#divEditMember .avatar .img{width:120px;position:relative;margin-top:10px;text-align:center}
.register-box .avatar .img>img {
        width:100%;
    }
.register-box .avatar .del{height:20px;display:none}
.register-box .avatar .lbl{text-align:left}
.register-box .avatar .note{font-style:italic;color:#000;width:100px;text-align:center;height:30px;line-height:30px;border:dotted 1px #ddd;cursor:pointer;margin-bottom:10px}
.register-box #btnDelAvatar{
    cursor: pointer;
    color: blue;width:120px;text-align:left;height:24px;line-height:24px
}
.chk-ctr>*{display:inline-block}
.chk-ctr>input{width:20px;height:20px;vertical-align:middle;margin:0 4px 0 0}
.chk-ctr>label{line-height:20px;vertical-align:middle}
.dynamic-box#divRegisterBox{padding:0}
#divRegisterBox .label.choose-img,#divEditMember .label.choose-img{
    background: url(img/add.png) left center no-repeat;
    padding-left: 24px;
    border: dotted 1px #ddd;
    height: 28px;
    line-height: 28px;
    cursor: pointer;width:120px
}
#divRegisterBox .chk-ctr{margin-top:10px}
#divViewMemberInfo .img{border:solid 2px #ddd;margin-right:10px;padding:1px}

#divDatePicker{position:absolute;z-index:9999;height:auto;background:#F2F2F2;border:solid 1px #C4C4C4;border-radius:2px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(130, 130, 130, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(130, 130, 130, 1);
box-shadow:         0px 0px 8px 0px rgba(130, 130, 130, 1);
               }
#divDatePicker table{}
#divDatePicker table td{font:normal 12px tahoma;color:#C4C4C4;width:36px;width:28px;text-align:center;padding:4px}
#divDatePicker table td select{border:solid 1px #C4C4C4;margin:1px;height:28px}
#divDatePicker table td.cell{border-right:solid 1px #C4C4C4;width:36px;height:28px;border-top:solid 1px #C4C4C4;border-right:solid 1px #C4C4C4}
#divDatePicker table .header td.cell{background:#FFF}
#divDatePicker table .header td.cell.cn{color:#FF0000;border-right:none}
#divDatePicker table .item td.cell{cursor:pointer}
#divDatePicker table .item td.cell.normal{background-color:#EFF9FF;color:#000}
#divDatePicker table .item td.cell.selected{background-color:#ADDFFF;color:#0074BC}
#divDatePicker table .item td.cell.cn{background-color:#FFE0E0;color:#FF0000;border-right:none}
#divDatePicker table .item td.cell.disable{background:#F8F8F8;background-image:none}
#divDatePicker table .item td.cell.hover{background-color:#ADDFFF;color:#0074BC}
#divDatePicker{z-index:99999}

.txt.date{background:url(img/date-val.png) left center no-repeat #fff;padding-left:20px;cursor:pointer}
.txt.date.req{cursor:pointer}
.txt.date.val{background:url(img/date-val.png) left center no-repeat}
span.cleardate{width:18px;height:16px;background:url(img/delete.png) no-repeat transparent;display:inline-block;cursor:pointer}
#divClearDate{width:20px;height:16px;cursor:pointer;position:absolute;background:url(img/clear-date.png) center center no-repeat;top:10px;right:10px} 

/*.Controls.User>a{display:inline-block;background-color:#f2ae00;padding:0 10px;text-decoration:none}
.Controls.User>a:hover{background-color:#016394;text-decoration:none}
.Controls.User>a>span{line-height:30px;display:block;height:30px;color:#fff;text-decoration:none}

.Controls.User>a>.img>img{width:100%;max-height:100%}

.Controls.User>li{list-style:none;height:30px;line-height:30px}
.Controls.User>li#aDisplayName{background-color:#0291d6;padding:0 20px 0 2px;position:relative;cursor:pointer}
.Controls.User>li#aDisplayName>span{display:inline-block;padding-left:6px;vertical-align:middle}
.Controls.User>li#aDisplayName>i.img{width:24px;height:30px;overflow:hidden;display:inline-block;vertical-align:middle;text-align:center}
.Controls.User>li#aDisplayName>i.img>img{max-width:20px;max-height:20px}
.Controls.User>li#aDisplayName>i.arrow {
	position: absolute;
	top:14px;right:10px
}
.Controls.User>li#aDisplayName>i.arrow:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(36, 36, 36, 0);
	border-top-color: #fff;
	border-width: 4px;
	margin-left: -4px;
}*/

#divUserInfoMenu{display:none;position:absolute;background-color:#f4f4f4;z-index:999999;
-webkit-box-shadow: 0px 2px 2px 0px rgba(122, 122, 122, 1);
-moz-box-shadow:    0px 2px 2px 0px rgba(122, 122, 122, 1);
box-shadow:         0px 2px 2px 0px rgba(122, 122, 122, 1);right:0;
border-radius:4px 0 4px 4px;
-webkit-border-radius:4px 0 4px 4px;
-moz-border-radius:4px 0 4px 4px
}
#divUserInfoMenu>.PopupMenu-content>a{display:block;list-style:none;color:#016394;text-decoration:none;padding:0 10px;height:30px;line-height:30px;white-space:nowrap;border-top:solid 1px #ddd;text-align:left}
#divUserInfoMenu>.PopupMenu-content>a:hover{background-color:#ddd}
#divUserInfoMenu>.PopupMenu-content>a:first-child{border-top:none;
border-radius:4px 0 0 0;
-webkit-border-radius:4px 0 0;
-moz-border-radius:4px 0 0 0
}
#divUserInfoMenu>.PopupMenu-content>a:last-child{
border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px
}

/*upload-files*/
.upload-files{position:relative}
.upload-files>i.add {
    position: absolute;
    height: 30px;
    right: 0;
    line-height: 30px;
    display: block;
    background: url(img/att.png) center center no-repeat;
    cursor: pointer;
    top: -30px;
    padding: 0 4px;
    font-size: 12px;
    width: 30px;
    font-weight: normal;
}
.upload-files input[type=file]{display:none}
.upload-files>.selected-files>.file{position:relative;list-style:none;border-bottom:dotted 1px #ddd;margin:0;padding:6px 0;color:#2093E3;padding-right:34px;display:block;min-height:24px;line-height:24px}
.upload-files>.selected-files>.file:hover{background-color:#f6fdfe}
.upload-files>.selected-files>.file:last-child{border-bottom:none}
.upload-files>.selected-files>.file>span>a{color:#2093E3;text-decoration:none}
.upload-files>.selected-files>.file.err{color:#f00}
.upload-files>.selected-files>.file.err>span>a{color:#f00}
.upload-files>.selected-files>.file>.msg{margin-left:20px;font-style:italic;float:right}
.upload-files>.selected-files>.file>i.remove{position:absolute;right:3px;top:1px;height:24px;width:24px;background:url(img/del.png) center center no-repeat;cursor:pointer}

/*upload-image*/
.upload-image{position:relative;text-align:center}
.upload-image>i.add {
    line-height: 24px;
    display: inline-block;
    background: url(img/add-img.png) 4px center no-repeat;
    cursor: pointer;
    margin-bottom:10px;
    padding:4px 10px 4px 30px;border:dotted 1px #ddd
}
.upload-image input[type=file]{display:none}
.upload-image>.selected-images{text-align:center}
.upload-image>.selected-images>.img{position:relative;list-style:none;padding:10px;display:block;width:320px;text-align:center;display:inline-block;margin:2px;background-color:#004c71;border-radius:4px;vertical-align:middle;overflow:hidden}
.upload-image>.selected-images>.img:hover{background-color:#0092d9}
.upload-image>.selected-images>.img>span>a{color:#2093E3;text-decoration:none}
.upload-image>.selected-images>.img.err{color:#fff}
.upload-image>.selected-images>.img.err>span>a{color:#fff}
.upload-image>.selected-images>.img>.msg{font-style:italic;display:block}
.upload-image>.selected-images>.img>i.remove{position:absolute;right:5px;top:5px;height:24px;width:24px;background:url(img/del.png) center center no-repeat #fff;cursor:pointer;display:none}
.upload-image>.selected-images>.img:hover>i.remove{display:block}
.upload-image>.selected-images>.img>img{width:100%;height:auto;vertical-align:middle}

table tr.header>td.order{cursor:pointer;background-position:right center;background-repeat:no-repeat;background-image:url(img/order.png);padding-right:14px}
table tr.header>td.order.asc{background-image:url(img/order-asc.png)}
table tr.header>td.order.desc{background-image:url(img/order-desc.png)}

/*choose-members*/
.choose-members{position:relative;min-height:24px}
.choose-members>i.add-member{position:absolute;top:0;right:0;display:block;width:24px;height:24px;background:url(img/add-member.png) center center no-repeat;cursor:pointer}
#divChooseMembers{min-width:320px}
#divChooseMembers .key{position:relative}
#divChooseMembers .key>input{width:calc(100% - 30px);height:30px}
#divChooseMembers .key>.search{position:absolute;top:0;right:0;width:30px;height:30px;background:url(img/search-s.png) center center no-repeat #9b9b9b;cursor:pointer}
#divChooseMembers .result>.count{padding:4px;text-align:center;font-style:italic}
#divChooseMembers .result>.list{margin:0;padding:0}
#divChooseMembers .result>.list>li{display:inline-block;padding:0 30px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;background-color:#006ea4;margin-right:4px;color:#fff;cursor:pointer;height:34px;line-height:34px}
#divChooseMembers .result>.list>li:hover{background-color:#0092d9}
#divChooseMembers .result>.list>li.selected{background:url(img/check.png) 4px center no-repeat #004c71}

.choose-members>.selected-members>li{display:inline-block;padding:0 30px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;background-color:#004c71;margin-right:4px;color:#fff;cursor:pointer;height:34px;line-height:34px;position:relative}
.choose-members>.selected-members>li:hover{background-color:#0092d9}
.choose-members>.selected-members>li:hover>i.delete{display:block}
.choose-members>.selected-members>li>i.delete{background:url(img/del.png) center center no-repeat #fff;position:absolute;width:20px;height:20px;display:none;right:7px;top:7px}


/*choose-videos*/
.choose-videos{position:relative;min-height:24px}
.choose-videos>i.add-video{position:absolute;top:0;right:0;display:block;width:24px;height:24px;background:url(img/add-video.png) center center no-repeat;cursor:pointer}
.choose-videos>input{display:none}
.choose-videos>.selected-videos>li{display:inline-block;padding:10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;background-color:#004c71;margin-right:4px;color:#fff;cursor:pointer;position:relative;width:320px}
.choose-videos>.selected-videos>li:hover{background-color:#0092d9}
.choose-videos>.selected-videos>li:hover>i.delete{display:block}
.choose-videos>.selected-videos>li>i.delete{background:url(img/del.png) center center no-repeat #fff;position:absolute;width:20px;height:20px;display:none;right:7px;top:7px;z-index:999}


.video{position:relative}
.video>video{width:100%}
.video>.mask{position:absolute;width:100%;height:calc(100% - 20px);opacity:0.4;display:block;z-index:100;cursor:pointer}
.video>.mask2{z-index:101;opacity:1}
.video>.control{padding-left:20px;position:relative;height:24px;background-color:#000}
.video>.control>i{display:block;width:20px;height:20px;cursor:pointer;background:url(img/play.png) center center no-repeat;position:absolute;top:0;left:0}
.video>.control>.timeline{display:block;cursor:pointer;height:100%;position:absolute;left:20px;right:40px}
.video>.control>.timeline>.current{background-color:#0091c7;height:100%;width:0;position:absolute;bottom:0;height:6px}

.video.over>.mask1{opacity:0.4}
.video.over>.mask2{opacity:0.6}

.video.playing>.mask2{background:url(img/pause-big.png) center center no-repeat}
.video.paused>.mask2{background:url(img/play-big.png) center center no-repeat}
.video.playing>.control>i{background:url(img/pause.png) center center no-repeat}
.video.paused>.control>i{background:url(img/play.png) center center no-repeat}

.video>.control>.time{position:absolute;top:0;height:100%;display:block;color:#fff;line-height:20px}
.video>.control>.time.current-time{left:22px}
.video>.control>.time.total-time{right:42px}
.video>.control>.to-full-screen{position:absolute;top:0;height:100%;display:block;line-height:20px;width:20px;background:url(img/toFullScreen.png) center center no-repeat;cursor:pointer;right:0}
.video>.control>.speaker{position:absolute;top:0;height:100%;display:block;line-height:20px;width:20px;background:url(img/speaker.png) center center no-repeat;cursor:pointer;right:20px}
.video>.control>.speaker.muted{background:url(img/muted.png) center center no-repeat}

.video>.control.full{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 30px;
    z-index: 2147483647;
}

video::-webkit-media-controls {
  display:none !important;
}
video::-moz-media-controls {
  display:none !important;
}
video::media-controls {
  display:none !important;
}



#videoFullScrennControls{position:absolute;bottom:0;left:0;right:0;height:100%;z-index:2147483647;display:flex}
#videoFullScrennControls.over>.mask1{opacity:0.4}
#videoFullScrennControls.over>.mask2{opacity:0.6}
#videoFullScrennControls>.mask{position:absolute;width:100%;height:calc(100% - 20px);opacity:0.4;display:block;z-index:100;cursor:pointer;background-color:transparent}
#videoFullScrennControls>.mask2{z-index:101;opacity:1}
#videoFullScrennControls>.control{padding-left:30px;position:fixed;height:30px;background-color:#000;bottom:0;width:100%}
#videoFullScrennControls>.control>i{display:block;width:30px;height:30px;cursor:pointer;background:url(img/play.png) center center no-repeat;position:absolute;top:0;left:0}
#videoFullScrennControls>.control>.timeline{display:block;cursor:pointer;height:100%;position:absolute;left:30px;right:60px}
#videoFullScrennControls>.control>.timeline>.current{background-color:#0091c7;height:100%;width:0;position:absolute;bottom:0;height:5px}
#videoFullScrennControls.over>.mask1{opacity:0.4}
#videoFullScrennControls.over>.mask2{opacity:0.6}
#videoFullScrennControls.playing>.mask2{background:url(img/pause-big.png) center center no-repeat}
#videoFullScrennControls.paused>.mask2{background:url(img/play-big.png) center center no-repeat}
#videoFullScrennControls.playing>.control>i{background:url(img/pause.png) center center no-repeat}
#videoFullScrennControls.paused>.control>i{background:url(img/play.png) center center no-repeat}
#videoFullScrennControls>.control>.time{position:absolute;top:0;height:100%;display:block;color:#fff;line-height:30px}
#videoFullScrennControls>.control>.time.current-time{left:32px}
#videoFullScrennControls>.control>.time.total-time{right:62px}
#videoFullScrennControls>.control>.to-full-screen{position:absolute;top:0;height:100%;display:block;color:#fff;line-height:30px;width:30px;cursor:pointer;right:0;background:url(img/toFullScreen.png) center center no-repeat}
#videoFullScrennControls>.control>.speaker{position:absolute;top:0;height:100%;display:block;line-height:30px;width:30px;background:url(img/speaker.png) center center no-repeat;cursor:pointer;right:30px}
#videoFullScrennControls>.control>.speaker.muted{background:url(img/muted.png) center center no-repeat}

/*Message*/

.messages-box {
    clear: both;
    background-color: #f6f6f6;
    border:solid 1px #ddd;
    padding:0
}
    .messages-box>.head.message{padding:10px}
    .messages-box>.content {
        border: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
        background-color: #fff;
        border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        overflow: hidden;
        margin: 10px 10px 0 10px
    }

        .messages-box>.content>textarea {
            border: none;
            line-height: 20px;
            border-bottom: none
        }

    .messages-box>.controls {
        border-left: solid 1px #ddd;
        border-right: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
        border-top: none;
        position: relative;
        height: 36px;
        border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
        overflow: hidden;margin:0 10px 10px 10px
    }

        .messages-box>.controls>.file-att>.add {
            left: 0;
            top: -26px;
            background: url(img/img.png) center center no-repeat;
            height: 24px;
            width: 30px
        }



    .messages-box .from-user {
        font-weight: bold;
        line-height: 20px;
        display: inline-block;padding:5px
    }

    .messages-box .from-user>.img {
        height: 26px;
        width: 26px;
        display: inline-block;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border: solid 1px #ddd;
        overflow: hidden;
        vertical-align: middle;
        margin-right: 4px
    }

            .messages-box .from-user>.img>img {
                max-height: 100%;
                max-width: 100%;
                display: block
            }

        .messages-box .from-user>.user-name {
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px
        }



    .messages-box>.controls>.send {
        position: absolute;
        right: 0px;
        top: 0;
        height: 36px;
        line-height: 36px;
        width: 70px;
        text-align: center;
        border-left: solid 1px #ddd;
        color: #0076e3;
        cursor: pointer;
        background: url(img/sendmessage.png) center center no-repeat
    }

        .messages-box>.controls>.file-att>.selected-files>li {
            padding: 0 0 0 4px
        }

            .messages-box>.controls>.file-att>.selected-files>li:last-child {
                border-bottom: solid 1px #ddd
            }



    .messages-box .reply-list>.list>div.b {
        padding-bottom: 6px
    }

        .messages-box .reply-list>.list>div.b:last-child {
            padding-bottom: 0
        }

    .messages-box>.list>div.b {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #f1f1f1;
        border-radius: 4px;
        -webkit-radius: 4px;
        -moz-radius: 4px;
        border: solid 1px #e4e4e4
    }

    .messages-box .count {
        padding: 0 0 10px 0;
        font-weight: bold
    }

    .messages-box .list {
        padding: 10px 10px 0 10px
    }

    .messages-box .reply-list>.list {
        display: none
    }

    .messages-box .reply-list>.count {
        padding: 0;font-size:10px;
        font-weight: normal;
        font-style: italic
    }

    .messages-box .reply-list>.more {
        text-align: right
    }

        .messages-box .reply-list>.more>i {
            cursor: pointer
        }

    .messages-box .list>div.message {
        position: relative;
        margin-bottom: 10px
    }

    .messages-box .list>div.message>.above {
        background-color: #fff;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        padding: 10px;
        border: solid 1px #e4e4e4;
        padding-bottom: 20px;
        position: relative
    }

        .messages-box .list>div.message.new>.above>.content {
            cursor: pointer;
            border: solid 1px #ffd4d4;
            color: #f00
        }

    .messages-box .list>div.message>.above .tag {
        color: #0076e3;
        font-weight: normal
    }

    .messages-box .list>div.message.new>.above>* {
        color: #f00
    }

    .messages-box .list>div.message.new>.above .tag {
        color: #f00
    }

    .messages-box .list>div.message>.above>div.from-user {
        font-weight: bold;
        line-height: 20px;
        display: inline-block;padding:0;margin-bottom:6px
    }

        .messages-box .list>div.message>.above>div.from-user>.img {
            height: 20px;
            width: 20px;
            display: inline-block;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: solid 1px #ddd;
            overflow: hidden;
            vertical-align: middle;
            margin-right: 4px
        }

            .messages-box .list>div.message>.above>div.from-user>.img>img {
                max-height: 100%;
                max-width: 100%;
                display: block
            }

        .messages-box .list>div.message>.above>div.from-user>.user-name {
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px
        }

        .messages-box .list>div.message>.above>div.content {
            line-height: 20px;
            display: block;
            vertical-align: middle;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            background-color: #f6f6f6;
            margin-bottom: 4px;
            padding: 6px
        }
        

            .messages-box .list>div.message>.above>.danh-sach-dinh-kem {
                margin-top: 4px;
                padding-top: 4px;
                display: none
            }

        .messages-box .list>div.message>.above>.danh-sach-dinh-kem>.files>li {
            list-style: none;
            display: inline-block;
            padding-right: 20px
        }

            .messages-box .list>div.message>.above>.danh-sach-dinh-kem>.files>li>a {
                display: block;
                line-height: 20px
            }



    .messages-box .reply-list>.list {
        padding: 0;
        border: none
    }

    .messages-box .list>div.message>.reply-list {
        padding-left: 24px;
        margin-bottom: 10px;
        margin-top: 10px
    }

        .messages-box .list>div.message>.reply-list>.editor {
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            position: relative;
            margin-bottom: 10px
        }

            .messages-box .list>div.message>.reply-list>.editor>input[type=file] {
                display: none
            }

            .messages-box .list>div.message>.reply-list>.editor>textarea {
                line-height: 20px;
                overflow: hidden;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                padding: 6px;
                background-color: #f6fdff;
                border: solid 1px #e4e4e4
            }

            .messages-box .list>div.message>.reply-list>.editor>i.save {
                background: url(img/save.png) center center no-repeat;
                width: 24px;
                height: 24px;
                cursor: pointer;
                position: absolute;
                right: 4px;
                bottom: 9px
            }

            .messages-box .list>div.message>.reply-list>.editor>i.add-att {
                background: url(img/att.png) center center no-repeat;
                width: 24px;
                height: 24px;
                cursor: pointer;
                position: absolute;
                right: 30px;
                top: 4px
            }

    .messages-box .info>li.them-but-phe {
        float: right;
        color: #fff;
        cursor: pointer;
        list-style: none;
        background-color: #2093e3;
        padding: 4px 10px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px
    }

        .messages-box .info>li.them-but-phe:hover {
            background-color: #44B4FF
        }

    .messages-box .list>div.message.add-new>.above {
        position: relative;
        padding: 0;
        overflow: hidden
    }

        .messages-box .list>div.message.add-new>.above>textarea {
            border: none;
            line-height: 20px;
            padding: 6px;
            background-color: #e6faff
        }

        .messages-box .list>div.message.add-new>.above>i.save {
            background: url(img/save.png) center center no-repeat;
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            right: 4px;
            top: 4px
        }

        .messages-box .list>div.message.add-new>.above>i.add-att {
            background: url(img/att.png) center center no-repeat;
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            right: 30px;
            top: 4px
        }

        .messages-box .list>div.message.add-new>.above>input[type=file] {
            display: none
        }


    .messages-box .list>div.message>.above>.actions>li {
        list-style: none;
        display: inline-block
    }

        .messages-box .list>div.message>.above>.sent-time {
            font-style: italic;
            font-size: 11px;
            color: #000;position:absolute;right:10px;top:10px
        }

        .messages-box .list>div.message>.above>.actions>li.act {
            float: right;
            color: #0076e3;
            cursor: pointer;
            margin-left: 10px
        }

        .messages-box .list>div.message>.above>.actions>li.reply.act:hover {
            color: #f00
        }


    .messages-box .list>div.message>.above>.actions {
        position: absolute;
        right: 10px;
        bottom: 0;
        padding: 4px 2px
    }

        .messages-box .list>div.message>.above>.actions>i {
            width: 24px;
            height: 24px;
            display: inline-block;
            cursor: pointer
        }

            .messages-box .list>div.message>.above>.actions>i.att {
                background: url(img/att.png) center center no-repeat
            }

            .messages-box .list>div.message>.above>.actions>i.save {
                background: url(img/save.png) center center no-repeat
            }

            .messages-box .list>div.message>.above>.actions>i.cancel {
                background: url(img/cancel.png) center center no-repeat
            }

    .messages-box .list>div.message.edit>.above>div.content {
        display: block
    }

        .messages-box .list>div.message.edit>.above>div.content>textarea {
            line-height: 20px;
            overflow: hidden;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            padding: 6px;
            border: none;
            background-color: #e6faff;
            border: solid 1px #dadada
        }

    .messages-box .list>div.message.edit>.above>.danh-sach-dinh-kem>.files>li {
        position: relative;
        padding-right: 30px
    }

        .messages-box .list>div.message.edit>.above>.danh-sach-dinh-kem>.files>li>i.del {
            background: url(img/del.png) center center no-repeat;
            width: 24px;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0
        }

    .messages-box .list>div.message.edit>.above>input[type=file] {
        display: none
    }

    .messages-box>.more {
        text-align: right;
        padding: 10px 0
    }

        .messages-box>.more>i {
            cursor: pointer
        }

    .messages-box>.count {
        margin: 0;
        padding: 10px 10px 0 10px;
        height: 40px;
        border-bottom: solid 1px #ddd;
        background-color: #fff
    }
    .messages-box>.count>li {
        list-style:none;display:inline-block;height:100%;line-height:30px;border:solid 1px #ddd;border-bottom:solid 1px #fff;padding:0 10px;cursor:pointer
    }
        .messages-box>.count>li.all-message{border-radius:4px 0 0 0}
        .messages-box>.count>li.new-message {
            border-radius: 0 4px 0 0
        }
        .messages-box>.count>li.actived {
            background-color: #ddd;border-bottom:solid 1px #ddd;cursor:text
        }

.freedom-date>ul{margin:0;padding:0}
.freedom-date>ul>li{padding:0;display:inline-block;list-style:none;margin-right:4px;width:calc(33.33333333% - 3px)}
.freedom-date>ul>li>*{width:100%}
.freedom-date>ul>li:last-child{margin-right:0}
.freedom-date>ul>li.years>input{text-align:center}

#divBottomBar{position:fixed;bottom:0;left:0;right:0;padding:10px;-webkit-box-shadow: 0px -6px 3px -5px rgba(0,0,0,0.75);-moz-box-shadow: 0px -6px 3px -5px rgba(0,0,0,0.75);box-shadow: 0px -6px 3px -5px rgba(0,0,0,0.75);background-color:#f1b000;color:#fff;z-index:999999}


/*Message*/

.messages-box {
    clear: both;
    background-color: #f6f6f6;
    border: solid 1px #ddd;
    padding: 0;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;overflow:hidden
}
    .messages-box>.header{padding:10px 10px 5px 10px;border-bottom:solid 1px #ddd}
    .messages-box>.head.message {
        padding: 10px
    }

    .messages-box>.content {
        border: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
        background-color: #fff;
        border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        -webkit-border-radius: 4px 4px 0 0;
        overflow: hidden;
        margin: 10px 10px 0 10px
    }

        .messages-box>.content>textarea {
            border: none;
            line-height: 20px;
            border-bottom: none
        }

    .messages-box>.controls {
        border-left: solid 1px #ddd;
        border-right: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
        border-top: none;
        position: relative;
        height: 36px;
        border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
        overflow: hidden;
        margin: 0 10px 10px 10px
    }

        .messages-box>.controls>.file-att>.add {
            left: 0;
            top: -26px;
            background: url(img/img.png) center center no-repeat;
            height: 24px;
            width: 30px
        }



    .messages-box .from-user {
        font-weight: bold;
        line-height: 20px;
        display: inline-block;
        padding: 5px
    }

        .messages-box .from-user>.img {
            height: 26px;
            width: 26px;
            display: inline-block;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: solid 1px #ddd;
            overflow: hidden;
            vertical-align: middle;
            margin-right: 4px;position:relative
        }

            .messages-box .from-user>.img>img {
                max-height: 100%;
                max-width: 100%;
                display: block;
                transform: translate(-50%, -50%);left:50%;top:50%;position:absolute
            }

        .messages-box .from-user>.user-name {
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px
        }



    .messages-box>.controls>.send {
        position: absolute;
        right: 0px;
        top: 0;
        height: 36px;
        line-height: 36px;
        width: 70px;
        text-align: center;
        border-left: solid 1px #ddd;
        color: #0076e3;
        cursor: pointer;
        background: url(img/sendmessage.png) center center no-repeat
    }

    .messages-box>.controls>.file-att>.selected-files>li {
        padding: 0 0 0 4px
    }

        .messages-box>.controls>.file-att>.selected-files>li:last-child {
            border-bottom: solid 1px #ddd
        }



    .messages-box .reply-list>.list>div.b {
        padding-bottom: 6px
    }

        .messages-box .reply-list>.list>div.b:last-child {
            padding-bottom: 0
        }

    .messages-box>.list>div.b {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #f1f1f1;
        border-radius: 4px;
        -webkit-radius: 4px;
        -moz-radius: 4px;
        border: solid 1px #e4e4e4
    }

    .messages-box .count {
        padding: 0 0 10px 0;
        font-weight: bold
    }

    .messages-box .list {
        padding: 10px 10px 0 10px
    }

    .messages-box .reply-list>.list {
        display: none
    }

    .messages-box .reply-list>.count {
        padding: 0;
        font-size: 10px;
        font-weight: normal;
        font-style: italic
    }

    .messages-box .reply-list>.more {
        text-align: right
    }

        .messages-box .reply-list>.more>i {
            cursor: pointer
        }

    .messages-box .list>div.message {
        position: relative;
        margin-bottom: 10px
    }

        .messages-box .list>div.message>.above {
            background-color: #fff;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            padding: 10px;
            border: solid 1px #e4e4e4;
            padding-bottom: 20px;
            position: relative
        }

        .messages-box .list>div.message.new>.above>.content {
            cursor: pointer;
            border: solid 1px #ffd4d4;
            color: #f00
        }

        .messages-box .list>div.message>.above .tag {
            color: #0076e3;
            font-weight: normal
        }

        .messages-box .list>div.message.new>.above>* {
            color: #f00
        }

        .messages-box .list>div.message.new>.above .tag {
            color: #f00
        }

        .messages-box .list>div.message>.above>div.from-user {
            font-weight: bold;
            line-height: 20px;
            display: inline-block;
            padding: 0;
            margin-bottom: 6px
        }

            .messages-box .list>div.message>.above>div.from-user>.img {
                height: 20px;
                width: 20px;
                display: inline-block;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border: solid 1px #ddd;
                overflow: hidden;
                vertical-align: middle;
                margin-right: 4px
            }

                .messages-box .list>div.message>.above>div.from-user>.img>img {
                    max-height: 100%;
                    max-width: 100%;
                    display: block
                }

            .messages-box .list>div.message>.above>div.from-user>.user-name {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px
            }

        .messages-box .list>div.message>.above>div.content {
            line-height: 20px;
            display: block;
            vertical-align: middle;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            background-color: #f6f6f6;
            margin-bottom: 4px;
            padding: 6px
        }


        .messages-box .list>div.message>.above>.danh-sach-dinh-kem {
            margin-top: 4px;
            padding-top: 4px;
            display: none
        }

            .messages-box .list>div.message>.above>.danh-sach-dinh-kem>.files>li {
                list-style: none;
                display: inline-block;
                padding-right: 20px
            }

                .messages-box .list>div.message>.above>.danh-sach-dinh-kem>.files>li>a {
                    display: block;
                    line-height: 20px
                }



    .messages-box .reply-list>.list {
        padding: 0;
        border: none
    }

    .messages-box .list>div.message>.reply-list {
        padding-left: 24px;
        margin-bottom: 10px;
        margin-top: 10px
    }

        .messages-box .list>div.message>.reply-list>.editor {
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            position: relative;
            margin-bottom: 10px
        }

            .messages-box .list>div.message>.reply-list>.editor>input[type=file] {
                display: none
            }

            .messages-box .list>div.message>.reply-list>.editor>textarea {
                line-height: 20px;
                overflow: hidden;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                padding: 6px;
                background-color: #f6fdff;
                border: solid 1px #e4e4e4
            }

            .messages-box .list>div.message>.reply-list>.editor>i.save {
                background: url(img/save.png) center center no-repeat;
                width: 24px;
                height: 24px;
                cursor: pointer;
                position: absolute;
                right: 4px;
                bottom: 9px
            }

            .messages-box .list>div.message>.reply-list>.editor>i.add-att {
                background: url(img/att.png) center center no-repeat;
                width: 24px;
                height: 24px;
                cursor: pointer;
                position: absolute;
                right: 30px;
                top: 4px
            }

    .messages-box .info>li.them-but-phe {
        float: right;
        color: #fff;
        cursor: pointer;
        list-style: none;
        background-color: #2093e3;
        padding: 4px 10px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px
    }

        .messages-box .info>li.them-but-phe:hover {
            background-color: #44B4FF
        }

    .messages-box .list>div.message.add-new>.above {
        position: relative;
        padding: 0;
        overflow: hidden
    }

        .messages-box .list>div.message.add-new>.above>textarea {
            border: none;
            line-height: 20px;
            padding: 6px;
            background-color: #e6faff
        }

        .messages-box .list>div.message.add-new>.above>i.save {
            background: url(img/save.png) center center no-repeat;
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            right: 4px;
            top: 4px
        }

        .messages-box .list>div.message.add-new>.above>i.add-att {
            background: url(img/att.png) center center no-repeat;
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            right: 30px;
            top: 4px
        }

        .messages-box .list>div.message.add-new>.above>input[type=file] {
            display: none
        }


    .messages-box .list>div.message>.above>.actions>li {
        list-style: none;
        display: inline-block
    }

    .messages-box .list>div.message>.above>.sent-time {
        font-style: italic;
        font-size: 11px;
        color: #000;
        position: absolute;
        right: 10px;
        top: 10px
    }

    .messages-box .list>div.message>.above>.actions>li.act {
        float: right;
        color: #0076e3;
        cursor: pointer;
        margin-left: 10px
    }

    .messages-box .list>div.message>.above>.actions>li.reply.act:hover {
        color: #f00
    }


    .messages-box .list>div.message>.above>.actions {
        position: absolute;
        right: 10px;
        bottom: 0;
        padding: 4px 2px
    }

        .messages-box .list>div.message>.above>.actions>i {
            width: 24px;
            height: 24px;
            display: inline-block;
            cursor: pointer
        }

            .messages-box .list>div.message>.above>.actions>i.att {
                background: url(img/att.png) center center no-repeat
            }

            .messages-box .list>div.message>.above>.actions>i.save {
                background: url(img/save.png) center center no-repeat
            }

            .messages-box .list>div.message>.above>.actions>i.cancel {
                background: url(img/cancel.png) center center no-repeat
            }

    .messages-box .list>div.message.edit>.above>div.content {
        display: block
    }

        .messages-box .list>div.message.edit>.above>div.content>textarea {
            line-height: 20px;
            overflow: hidden;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            padding: 6px;
            border: none;
            background-color: #e6faff;
            border: solid 1px #dadada
        }

    .messages-box .list>div.message.edit>.above>.danh-sach-dinh-kem>.files>li {
        position: relative;
        padding-right: 30px
    }

        .messages-box .list>div.message.edit>.above>.danh-sach-dinh-kem>.files>li>i.del {
            background: url(img/del.png) center center no-repeat;
            width: 24px;
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0
        }

    .messages-box .list>div.message.edit>.above>input[type=file] {
        display: none
    }

    .messages-box>.more {
        text-align: right;
        padding: 10px 0
    }

        .messages-box>.more>i {
            cursor: pointer
        }

    .messages-box>.count {
        margin: 0;
        padding: 10px 10px 0 10px;
        height: 40px;
        border-bottom: solid 1px #ddd;
        background-color: #fff
    }

        .messages-box>.count>li {
            list-style: none;
            display: inline-block;
            height: 100%;
            line-height: 30px;
            border: solid 1px #ddd;
            border-bottom: solid 1px #fff;
            padding: 0 10px;
            cursor: pointer
        }

            .messages-box>.count>li.all-message {
                border-radius: 4px 0 0 0
            }

            .messages-box>.count>li.new-message {
                border-radius: 0 4px 0 0
            }

            .messages-box>.count>li.actived {
                background-color: #ddd;
                border-bottom: solid 1px #ddd;
                cursor: text
            }

#divUpdateAccount .upload-image>.selected-images>.img{width:200px}

/*Tabs*/
.tabs .header{border-bottom:solid 2px #5ea5a7}
.tabs .tab{display:inline-block;padding:0 10px;background:#D3D3D3;border-radius:2px 2px 0 0;margin-right:2px;color:#5ea5a7;cursor:pointer;font-size:12px}
.tabs .tab.disabled{color:#6D6D6D;text-decoration:line-through}
.tabs .tab.actived{background:#5ea5a7;color:#FFF;cursor:text}
.tabs .tabcontent{display:none}
.tabs .tabcontent .tabcontentinner{overflow:auto;background:#FFF;padding:10px 0}
.tabs .tabcontent.actived{display:block}
.tabs .tabcontent table td{font-size:12px}

/*auto-grow*/
.auto-grow>textarea{overflow:hidden;padding:7px 6px}


/* ========================================================
   TOP HEADER CART & TOAST NOTIFICATION STYLES
   ======================================================== */
.s_slogan > .s_right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.s_slogan > .s_right > .s_cell.cart,
.s_cell.cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    cursor: pointer !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.s_slogan > .s_right > .s_cell.cart:hover,
.s_cell.cart:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.s_cell.cart svg,
.s_cell.cart .cart-svg-icon {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2 !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.s_cell.cart:hover svg {
    transform: scale(1.1) !important;
}

.s_cell.cart:not(:has(svg))::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #ffffff !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.s_slogan > .s_right > .s_cell.cart > i,
.s_cell.cart > i,
.s_cell.cart .cart-badge-count {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    height: 18px !important;
    min-width: 18px !important;
    line-height: 14px !important;
    text-align: center !important;
    border-radius: 9999px !important;
    border: 2px solid #ffffff !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#cartToastNotification {
    position: fixed !important;
    top: 70px !important;
    right: 24px !important;
    z-index: 99999999 !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid #10b981 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    max-width: 440px !important;
    box-sizing: border-box !important;
}

#cartToastNotification .toast-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #10b981 !important;
}

#cartToastNotification .toast-content {
    flex: 1 !important;
    min-width: 0 !important;
}

#cartToastNotification .toast-title {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #111827 !important;
    margin-bottom: 2px !important;
}

#cartToastNotification .toast-desc {
    font-size: 13px !important;
    color: #4b5563 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 230px !important;
}

#cartToastNotification .toast-view-btn {
    display: inline-block !important;
    padding: 7px 13px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
}

#cartToastNotification .toast-view-btn:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

#cartToastNotification .toast-close {
    cursor: pointer !important;
    color: #9ca3af !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 2px 4px !important;
    margin-left: 2px !important;
    background: none !important;
    border: none !important;
}

#cartToastNotification .toast-close:hover {
    color: #374151 !important;
}


/* STARTAI MODERN CART MODAL */
#divCart.dynamic-box,
  .dynamic-box#divCart {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999999 !important;
    width: 660px !important;
    max-width: 95vw !important;
    max-height: 88vh !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: Arial, Tahoma, -apple-system, sans-serif !important;
    animation: cartModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes cartModalIn {
    from {
      opacity: 0;
      transform: translate(-50%, -46%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  #divCart .head {
    padding: 16px 22px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  #divCart .head .title {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  #divCart .head .title .cart-title-count {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-left: 6px !important;
  }

  #divCart .head .close {
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    border: none !important;
    text-decoration: none !important;
  }

  #divCart .head .close:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
  }

  #divCart .content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
    max-height: calc(88vh - 150px) !important;
    box-sizing: border-box !important;
  }

  #divCart .content::-webkit-scrollbar {
    width: 6px !important;
  }
  #divCart .content::-webkit-scrollbar-track {
    background: #f8fafc !important;
  }
  #divCart .content::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
  }
  #divCart .content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
  }

  #divCart .products-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #divCart .products-list > li {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  #divCart .products-list > li:hover {
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  }

  #divCart .products-list > li > span.left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #divCart .cart-item-thumb-box {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }

  #divCart .cart-item-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.2s ease !important;
  }

  #divCart .products-list > li:hover .cart-item-img {
    transform: scale(1.05) !important;
  }

  #divCart .products-list > li > span.left img:not(.cart-item-img) {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  #divCart .cart-item-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  #divCart .cart-item-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.15s ease !important;
  }

  #divCart .cart-item-name:hover {
    color: #2563eb !important;
  }

  #divCart .cart-item-variants {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    margin-top: 2px !important;
  }

  #divCart .cart-variant-chip,
  #divCart .propertiesName {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    line-height: 1.3 !important;
  }

  #divCart .cart-variant-chip .chip-k {
    color: #64748b !important;
    margin-right: 3px !important;
  }

  #divCart .cart-variant-chip .chip-v {
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  #divCart .cart-item-pricing {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12.5px !important;
    margin-top: 2px !important;
  }

  #divCart .cart-unit-price {
    color: #64748b !important;
    font-weight: 500 !important;
  }

  #divCart .cart-unit-price .price {
    font-weight: 700 !important;
    color: #334155 !important;
  }

  #divCart .cart-math-op {
    color: #94a3b8 !important;
    font-size: 12px !important;
  }

  #divCart .cart-qty-badge .quantity {
    background: #eff6ff !important;
    color: #2563eb !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }

  #divCart .cart-item-total {
    font-weight: 800 !important;
    color: #ef4444 !important;
    font-size: 13.5px !important;
  }

  #divCart .products-list > li > span.right {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  #divCart .cart-stepper-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  #divCart .cart-stepper-table td {
    padding: 0 !important;
    vertical-align: middle !important;
    text-align: center !important;
  }

  #divCart .cart-stepper-table td.arrow {
    width: 28px !important;
    height: 30px !important;
    background: #f8fafc !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
  }

  #divCart .cart-stepper-table td.arrow:hover {
    background: #e2e8f0 !important;
    color: #2563eb !important;
  }

  #divCart .cart-stepper-table td.arrow i {
    font-style: normal !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
    display: block !important;
    color: #475569 !important;
  }

  #divCart .cart-stepper-table td.count {
    width: 38px !important;
    background: #ffffff !important;
  }

  #divCart .cart-stepper-table td.count input.cart-qty-input,
  #divCart .cart-stepper-table td.count input.txt {
    width: 100% !important;
    height: 30px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  #divCart .cart-stepper-table td.del {
    width: 32px !important;
    height: 30px !important;
    background: #ffffff !important;
    border-left: 1px solid #f1f5f9 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  #divCart .cart-stepper-table td.del:hover {
    background: #fee2e2 !important;
  }

  #divCart .cart-stepper-table td.del:hover svg {
    stroke: #ef4444 !important;
  }

  #divCart .cart-stepper-table td.del i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    color: #94a3b8 !important;
  }

  /* Total Bar */
  #divCart .total {
    margin-top: 14px !important;
    padding: 12px 18px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
  }

  #divCart .total > span,
  #divCart .total .val {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ef4444 !important;
  }

  /* Checkout Form (.send-order) */
  #divCart .send-order {
    margin-top: 14px !important;
    padding: 16px 18px !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    animation: fadeInDown 0.2s ease !important;
  }

  #divCart .send-order > .head {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  #divCart .send-order .input-form .row {
    margin-bottom: 12px !important;
  }

  #divCart .send-order .input-form .label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 5px !important;
  }

  #divCart .send-order .input-form input.txt.ful {
    width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  #divCart .send-order .input-form input.txt.ful:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  }

  #divCart .cart-payment-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }

  #divCart .cart-payment-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
  }

  #divCart .cart-payment-card:hover {
    border-color: #2563eb !important;
    background: #eff6ff !important;
  }

  #divCart .cart-payment-card input[type="radio"] {
    accent-color: #2563eb !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  /* Modal Actions Footer */
  #divCart .btns {
    padding: 14px 22px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  #divCart .btns .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  #divCart .btns a.btn {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    border: none !important;
  }

  #divCart .btns a.btn[style*="display: none"],
  #divCart .btns a.btn.hidden {
    display: none !important;
  }

  #divCart .btns a.btn.disabled,
  #divCart .btns a.btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }

  #divCart #btnSendOrder,
  #divCart #btnStartSendOrder {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  }

  #divCart #btnSendOrder:hover,
  #divCart #btnStartSendOrder:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-1px) !important;
  }

  #divCart #btnClearCart {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
  }

  #divCart #btnClearCart:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
  }

  #divCart #btnReturn {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
  }

  #divCart #btnReturn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
  }

  /* STARTAI ORDER CONFIRMATION VIEW */
  #divCart .cart-order-confirmation {
    padding: 10px 4px 16px;
    animation: fadeInDown 0.25s ease;
  }
  #divCart .conf-hero {
    text-align: center;
    padding: 10px 10px 16px;
    border-bottom: 1px dashed #e2e8f0;
    margin-bottom: 14px;
  }
  #divCart .conf-badge-success {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
  }
  #divCart .conf-title {
    font-size: 18px;
    font-weight: 800;
    color: #15803d;
    margin: 0 0 4px;
  }
  #divCart .conf-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 10px;
  }
  #divCart .conf-order-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    color: #334155;
    border: 1px solid #cbd5e1;
  }
  #divCart .conf-order-code strong {
    color: #2563eb;
    font-size: 15px;
    font-weight: 800;
  }
  #divCart .conf-copy-code-btn,
  #divCart .btn-copy-inline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  #divCart .conf-copy-code-btn:hover,
  #divCart .btn-copy-inline:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }
  #divCart .conf-details-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
  }
  #divCart .conf-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  #divCart .conf-label {
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
  }
  #divCart .conf-val {
    color: #1e293b;
    text-align: right;
    word-break: break-word;
  }
  #divCart .conf-total-price {
    font-size: 16px;
    font-weight: 800;
    color: #ef4444;
  }
  #divCart .conf-bank-box {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  #divCart .conf-bank-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dbeafe;
  }
  #divCart .conf-bank-grid {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #divCart .conf-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }
  #divCart .conf-qr-img {
    width: 135px;
    height: 135px;
    object-fit: contain;
    background: #ffffff;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
  }
  #divCart .conf-qr-hint {
    font-size: 11px;
    color: #3b82f6;
    margin-top: 5px;
    text-align: center;
    max-width: 135px;
    font-weight: 600;
  }
  #divCart .conf-bank-info-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
  }
  #divCart .conf-bank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #divCart .bk-label {
    color: #475569;
    font-weight: 600;
  }
  #divCart .bk-val {
    color: #0f172a;
    font-weight: 700;
  }
  #divCart .bk-val.highlight {
    color: #2563eb;
    font-size: 13px;
  }
  #divCart .bk-val.price-red {
    color: #ef4444;
    font-size: 14.5px;
  }
  #divCart .conf-bank-note {
    font-size: 11px;
    color: #b45309;
    background: #fef3c7;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 4px;
    line-height: 1.4;
  }
  #divCart .conf-cod-box,
  #divCart .conf-wallet-box {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    color: #166534;
    font-size: 13px;
    line-height: 1.5;
  }
  #divCart .conf-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }
  #divCart .conf-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #divCart .conf-btn-continue {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
  }
  #divCart .conf-btn-continue:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  #divCart .conf-btn-orders {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }
  #divCart .conf-btn-orders:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
  }
  /* Inline Error Alert */
  #divCart .cart-form-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
    animation: fadeInDown 0.2s ease;
  }
  #divCart .cart-form-alert.error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
  }
  /* Button spinner */
  .cart-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
  }
  @media (max-width: 600px) {
    #divCart .conf-bank-grid {
      flex-direction: column;
      text-align: center;
    }
    #divCart .conf-bank-row {
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    #divCart .conf-action-buttons {
      flex-direction: column;
      width: 100%;
    }
    #divCart .conf-btn {
      width: 100%;
    }
  }

  body .mask,
  .s_mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9999990 !important;
  }

  /* ================================================================
     MODAL CONFIRMATION DIALOG (#divConfirm) - ALWAYS ON TOP OF CART
     ================================================================ */
  #divConfirm.dynamic-box,
  .dynamic-box#divConfirm,
  .cart-confirm-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000005 !important; /* Higher than #divCart (9999999) */
    width: 440px !important;
    max-width: 92vw !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.6), 0 25px 60px -15px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-sizing: border-box !important;
    font-family: Arial, Tahoma, -apple-system, sans-serif !important;
    animation: confirmPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    display: block !important;
  }

  #divConfirm .head {
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #divConfirm .head .title {
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  #divConfirm .head .close {
    width: 30px !important;
    height: 30px !important;
    line-height: 28px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    border: none !important;
  }

  #divConfirm .head .close:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: translateY(-50%) rotate(90deg) !important;
  }

  #divConfirm .content {
    padding: 22px 22px 14px 22px !important;
    background: #ffffff !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #divConfirm .content p,
  #divConfirm .content p.header {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  #divConfirm .btns {
    padding: 14px 20px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  #divConfirm .btns .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #divConfirm .btns a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  /* Nút Có, xóa ngay */
  #divConfirm .btns a.btn#btnAccept,
  #divConfirm .btns a.btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    order: 2 !important;
  }

  #divConfirm .btns a.btn#btnAccept:hover,
  #divConfirm .btns a.btn.danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-1px) !important;
  }

  /* Nút Không, giữ lại */
  #divConfirm .btns a.btn#btnCancel,
  #divConfirm .btns a.btn.secondary {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    order: 1 !important;
  }

  #divConfirm .btns a.btn#btnCancel:hover,
  #divConfirm .btns a.btn.secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
  }