.sticky {/* position: -webkit-sticky;position: sticky; */position: fixed;top: 0;z-index: 999;width: 100%;    left: 0;}
/* .sticky:before, .sticky:after {content: '';display: table;} */
.sticky .vmess{
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05);
    background: #fff;
    
}
[data-sticky] {transition: all 0.15s ease;}
a:focus{
    outline:thin dotted #333;
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px
}
a:hover,a:active{
    outline:0
}

img {max-width: 100%}

ul{
    padding:0;
    margin:0 0 10px 25px
}
li{
    line-height:20px
}
input:focus, textarea:focus{border-color:rgba(82,168,236,0.8);outline:0;box-shadow: none;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#aaa}
input:-moz-placeholder, textarea:-moz-placeholder{color:#aaa}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#aaa}
[contenteditable=true]:empty:before{
    content: attr(placeholder);
    display: block; /* For Firefox */
    color: #aaa;
    cursor: text;
}
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    overflow-wrap: break-word;
    -webkit-user-modify: read-write-plaintext-only;
}
.btn {color: #fff;background-color: #007bff;border-color: #007bff;display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 1px solid transparent;padding: 6px 12px;font-size: 1rem;line-height: 1.5;border-radius: 2px;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor: pointer;outline: none;
}
.btn:hover,.btn:focus,.btn:active{color: #fff;background-color: #0069d9;border-color: #0062cc;}

.vfc {display: block;width: 100%;height: calc(36px + 2px);padding: 6px 12px;font-size: 1rem;line-height: 1.5;color: #555;background-color: #fff;background-clip: padding-box;border: 1px solid #ddd;border-radius: 0;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
textarea.vfc {height: auto;}
h2 { font-size: 1.25rem;}
h3 {font-size: 1.25rem;}

.matcuoi {background-repeat:no-repeat;background-size:auto;background-position:0 0}

.list {}
.list span, #preview span[role="button"] {display: inline-block;cursor: pointer;width: 24px;height: 24px;/* margin: 2px; */position: relative;}
.list span:hover:before {content: '';border: 1px solid #555;width: 28px;height: 28px;display: inline-block;position: absolute;top: -2px;left: -2px;}

#preview[contenteditable] img, #preview span[role="button"] {-webkit-user-select:text;-moz-user-select:text;user-select:text}
#preview span[role="button"] {user-select: text;white-space: pre-wrap;overflow-wrap: break-word;-webkit-user-modify: read-write-plaintext-only;vertical-align: middle;position: relative;}
#preview span[role="button"] > span {color: transparent;display: inline-block;transform: translateY(-3px);z-index: -1;font-size: 1.125rem;}
#preview {height: 62px;overflow-y: auto;outline: none;}

.vwrapper, .vcontainer{width: 100%;margin-right: auto;margin-left: auto;}
.vcontainer {padding-left: 15px;padding-right: 15px;}
.vmain {background-color: #fff;padding: 20px 0px;}
.vheader {width: 100%;background: #0f4874;position: relative;}
.vheader .vlogo {margin-bottom: 10px;}
.vheader .vlogo h1 {margin: 0;padding: 0;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;}
.vheader .vlogo a {color:  #fff;display: inline-block;padding-top: .3125rem;padding-bottom: .3125rem;margin-right: 1rem;font-size: 1.25rem;line-height: inherit;white-space: nowrap;outline: none;text-decoration: none;text-transform: capitalize;padding-left: 40px;background-image: url('https://vforum.vn/diendan/images/logo/vlogo.png');background-repeat: no-repeat;background-size: 32px;background-position: left center;}
.vnavbar {position: relative;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;-ms-flex-pack: justify;justify-content: space-between;-ms-flex-direction: column!important;flex-direction: column!important;padding: 10px 0;}
.vnavbar-nav {display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;padding-left: 0;margin-bottom: 0;list-style: none;margin: 0;}
.vnavbar-nav li a {display: block;padding: 12px 15px;color: #fff;text-decoration: none;text-transform: uppercase;}
.vfrow {-ms-flex-direction: row!important;flex-direction: row!important;}
.vmess {background: #fff;padding: 20px;}
#mess.hide {position: absolute;top: -9999px;left: -9999px;}
.vmess-area {position: relative;}
.vmess-area textarea, #preview {padding-right: 125px;resize: none;}
.vmess-area button {background-color: #f1f1f1 !important;border-color: #d4d4d4 !important;color: #555 !important;text-transform: uppercase;font-size: .75rem;font-weight: 700;outline: none;}

.vmess-area button {right: 10px;position: absolute;top: 10px;background-color: #f1f1f1 !important;border-color: #d4d4d4 !important;color: #555 !important;margin: 0;}
.vmess-area button:hover {background-color: #e1e1e1 !important;color: #666 !important;border-color: #c4c4c4 !important;}
/* Begin Search */
.vsearch {position: relative;}
.vsearch  .icon {padding: 6px 12px;position: absolute;right: 0;top: 0;height: calc(36px + 2px);display: flex;-ms-flex-align: center!important;align-items: center!important}
.vsearch svg {transition: all .15s ease-in-out;width: 18px;height: 18px;fill: #ccc;}
/* End Search */
.valert-info {position: relative;padding: 15px 20px;border-left: 4px solid #b8daff;border-radius: 4px;color: #004085;background-color: #cce5ff;}
.valert-info p {margin-bottom: 5px;}
.valert-info p:last-child {margin-bottom: 0;}
.vtitle {font-size: 1.125rem;border-bottom: 2px solid #e4e4e4;color: #333;margin: 0 0 14px;padding: 0 0 4px;}
.vcat{padding-bottom: 25px;}
/* Begin footer */
.vfooter {padding: 12px 0;background-color: #333;color: #fff;text-align: center;font-size: 85%;}
.vfooter p {margin: 0;}
.vfooter a {color: #4aafff;}
.vfooter a:hover {color: #93cfff;}
/* End footer */

@media (min-width: 576px) {
    /* .vwrapper {max-width: 540px;} */
}

@media (min-width: 768px) {
    /* .vwrapper {max-width: 720px;} */
    .vnavbar {-ms-flex-direction: row!important;flex-direction: row!important;padding: 5px 20px;}
    .vheader .vlogo {margin-bottom: 0;}
}

@media (min-width: 992px) {
    .vwrapper {max-width: 960px;}
    .vwrapper, .vcontainer{padding-right: 15px;padding-left: 15px;}
    .vnavbar {padding: 5px 0px;}
    #preview {padding-right: 100px;height: inherit;min-height: 62px;max-height: 124px;}
    .vmess-area button {right: 30px;}
    /* #preview span[role="button"] {zoom: 0.65;
    -moz-transform: scale(0.65);
    -moz-transform-origin: 0 0;} */
}

@media (min-width: 1200px) {
    .vwrapper {max-width: 1140px;}
    .vnavbar-nav li a, .btn {font-size: .875rem;}
}

@media (max-width: 991.98px) {
    .vnavbar-nav-scroll {
        max-width: 100%;
        height: 2.5rem;
        margin-top: .25rem;
        overflow: hidden;
        font-size: .875rem;
    }
    .vnavbar-nav-scroll .vnavbar-nav {
        padding-bottom: 2rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}