.datbox{
display:block !important;
padding:20px;
background:#f1f1f1;
border-radius:20px;
box-shadow:0px 0px 7px #999;
max-width:700px !important;
margin-bottom:10px;
margin-top:20px;
color:#666;
font-family: Arial, sans-serif;
white-space: initial;
}
.datbox:hover{filter: hue-rotate(45deg);}
/* tuy chinh giao dien */
.datbox.White{color:#666;}
.datbox.Dark{color:#ccc;background:#222}
.datbox.Dark2{color:#ccc;background:#002838;}
.datbox.Purple{color:#ccc;background:#33325a}
.datbox.Pro{color:#fff;background: linear-gradient(87deg, rgb(139 197 124) 22%, rgb(115 171 220) 100%);}
.datinput #datnhap.Pro{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro2{color:#fff;background: linear-gradient(87deg, rgb(63 167 36) 22%, rgb(208 203 48) 100%);}
.datinput #datnhap.Pro2{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro3{color:#fff;background: linear-gradient(87deg, rgb(147 36 167) 22%, rgb(48 112 208) 100%);}
.datinput #datnhap.Pro3{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro4{color:#fff;background: linear-gradient(87deg, rgb(158 158 158) 22%, rgb(45 45 45) 100%);}
.datinput #datnhap.Pro4{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro5{color:#fff;background: linear-gradient(87deg, rgb(180 181 19) 22%, rgb(210 70 70) 100%);}
.datinput #datnhap.Pro5{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro6{color:#fff;background: linear-gradient(87deg, rgb(19 181 134) 22%, rgb(56 8 148) 100%);}
.datinput #datnhap.Pro6{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Pro7{color:#fff;background: linear-gradient(87deg, rgb(8 195 152) 22%, rgb(8 148 96) 100%);}
.datinput #datnhap.Pro7{border:3px solid #fff !important;background-color:#f1f1f1 !important}
.datbox.Fox{color:#fff;background: linear-gradient(87deg, rgb(222 195 4) 22%, rgb(255 141 0) 100%);}
.datinput #datnhap.Fox{border:3px solid #fff !important;background-color:#f1f1f1 !important}


.datinput{display:flex;padding-left:30px;padding-right:30px;}
@media (max-width: 990px) {
.dathinh {margin: 0 auto;margin-bottom:10px;} .dathinh img{width:100%;border:0px;padding:0px;margin:0px;box-shadow:0px 0px 0px;}
.datinput{margin-bottom:10px;}
}

.datform{
text-align:center;
}
.dattitle{
font-size:25px;
font-weight:bold;
margin-bottom:20px;
text-align:center;
line-height: 1.2;
}
.datghic{
font-size:15px;
margin-top:5px;
}
.datinput #datnhap{
border:3px solid #aaa !important;
background-color:#fff !important;
width:100% !important;
font-size:14px !important;
border-radius:30px 0px 0px 30px !important;
outline: none !important;
color:#666 !important;
padding:10px 10px 10px 33px !important;
margin:0px !important;
box-shadow:0px 0px 0px !important;
height: auto !important;
}
.datinput #datnhap:hover{border:3px solid #0c0 !important}
.datinput #datnut{
border:3px solid #0c0 !important;
background:#0c0 !important;
color:#fff !important;
font-size:14px !important;
border-radius:0px 30px 30px 0px !important;
font-weight:bold !important;
text-align: center !important;
outline: none !important;
padding:10px 20px 10px 20px !important;
margin:0px !important;
box-shadow:0px 0px 0px !important;
min-width:auto !important;
height: auto !important;
width:auto !important;
}
.datinput #datnut:hover{background:#999 !important;border:2px solid #999 !important}
.datloi{
font-size:13px;
text-align:center;
opacity:0.5;
line-height:1.1;
margin-top:15px;
}
@media (max-width: 500px) {
.datinput{padding-left:5px;padding-right:5px;}
.datinput #datnut{padding:10px !important;}
}
@media (max-width: 300px) {
.dattitle{font-size:20px;}
.datbox{padding: 10px 10px 20px 10px;}
.datinput #datnut, .datinput #datnhap{font-size:11px !important;}
}