body {
color: #505050;
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.25;
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
}
div, h1, h2, h3, h4, h5, h6,
p, a, span, strong,
ol, ul, li, table, td, th,
input, select, textarea{
box-sizing: border-box;
outline: none;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
}
a{
color: #2a70b8;
text-decoration: none;
outline: none;
}
a:hover, a:active, a:focus{
text-decoration: none;
outline: none;
}
img{
border: none;
max-width: 100%;
height: auto;
}
/* Theme hocmai2026 */
.d-flex {
display: -webkit-box ;
display: -ms-flexbox ;
display: flex ;
}
.flex-nowrap {
-ms-flex-wrap:nowrap;
flex-wrap:nowrap
}
.flex-wrap {
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.justify-content-end {
-webkit-box-pack:end;
-ms-flex-pack:end;
justify-content:flex-end
}
.justify-content-center {
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center
}
.justify-content-between {
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between
}
.align-items-start {
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start
}
.align-items-end {
-webkit-box-align:end;
-ms-flex-align:end;
align-items:flex-end
}
.align-items-center {
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.gap-5 {
gap: 5px;
}
.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-20 {
gap: 20px;
}
.m0 { margin: 0!important; } .ml0 { margin-left: 0; } .mr0 { margin-right: 0; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0!important; } .mlr0 { margin-left: 0; margin-right: 0; } .mtb0 { margin-top: 0!important; margin-bottom: 0!important; }
.m5 { margin: 5px; } .ml5 { margin-left: 5px; } .mr5 { margin-right: 5px; } .mt5 { margin-top: 5px; } .mb5 { margin-bottom: 5px!important; } .mlr5 { margin-left: 5px; margin-right: 5px; } .mtb5 { margin-top: 5px; margin-bottom: 5px; }
.m10 { margin: 10px; } .ml10 { margin-left: 10px; } .mr10 { margin-right: 10px; } .mt10 { margin-top: 10px; } .mb10 { margin-bottom: 10px!important; } .mlr10 { margin-left: 10px; margin-right: 10px; } .mtb10 { margin-top: 10px; margin-bottom: 10px; }
.m15 { margin: 15px; } .ml15 { margin-left: 15px; } .mr15 { margin-right: 15px; } .mt15 { margin-top: 15px; } .mb15 { margin-bottom: 15px!important; } .mlr15 { margin-left: 15px; margin-right: 15px; } .mtb15 { margin-top: 15px; margin-bottom: 15px; }
.m20 { margin: 20px; } .ml20 { margin-left: 20px; } .mr20 { margin-right: 20px; } .mt20 { margin-top: 20px; } .mb20 { margin-bottom: 20px!important; } .mlr20 { margin-left: 20px; margin-right: 20px; } .mtb20 { margin-top: 20px; margin-bottom: 20px; }
.m25 { margin: 25px; } .ml25 { margin-left: 25px; } .mr25 { margin-right: 25px; } .mt25 { margin-top: 25px; } .mb25 { margin-bottom: 25px!important; } .mlr25 { margin-left: 25px; margin-right: 25px; } .mtb25 { margin-top: 25px; margin-bottom: 25px; }
.m30 { margin: 30px; } .ml30 { margin-left: 30px; } .mr30 { margin-right: 30px; } .mt30 { margin-top: 30px; } .mb30 { margin-bottom: 30px!important; } .mlr30 { margin-left: 30px; margin-right: 30px; } .mtb30 { margin-top: 30px; margin-bottom: 30px; }
.m35 { margin: 35px; } .ml35 { margin-left: 35px; } .mr35 { margin-right: 35px; } .mt35 { margin-top: 35px; } .mb35 { margin-bottom: 35px!important; } .mlr35 { margin-left: 35px; margin-right: 35px; } .mtb35 { margin-top: 35px; margin-bottom: 35px; }
.m40 { margin: 40px; } .ml40 { margin-left: 40px; } .mr40 { margin-right: 40px; } .mt40 { margin-top: 40px; } .mb40 { margin-bottom: 40px!important; } .mlr40 { margin-left: 40px; margin-right: 40px; } .mtb40 { margin-top: 40px; margin-bottom: 40px; }
.m45 { margin: 45px; } .ml45 { margin-left: 45px; } .mr45 { margin-right: 45px; } .mt45 { margin-top: 45px; } .mb45 { margin-bottom: 45px!important; } .mlr45 { margin-left: 45px; margin-right: 45px; } .mtb45 { margin-top: 45px; margin-bottom: 45px; }
.m50 { margin: 50px; } .ml50 { margin-left: 50px; } .mr50 { margin-right: 50px; } .mt50 { margin-top: 50px; } .mb50 { margin-bottom: 50px!important; } .mlr50 { margin-left: 50px; margin-right: 50px; } .mtb50 { margin-top: 50px; margin-bottom: 50px; }
.p0 { padding: 0!important; } .pl0 { padding-left: 0; } .pr0 { padding-right: 0; } .pt0 { padding-top: 0; } .pb0 { padding-bottom: 0!important; } .plr0 { padding-left: 0; padding-right: 0; } .ptb0 { padding-top: 0!important; padding-bottom: 0!important; }
.p5 { padding: 5px; } .pl5 { padding-left: 5px; } .pr5 { padding-right: 5px; } .pt5 { padding-top: 5px; } .pb5 { padding-bottom: 5px!important; } .plr5 { padding-left: 5px; padding-right: 5px; } .ptb5 { padding-top: 5px; padding-bottom: 5px; }
.p10 { padding: 10px; } .pl10 { padding-left: 10px; } .pr10 { padding-right: 10px; } .pt10 { padding-top: 10px; } .pb10 { padding-bottom: 10px!important; } .plr10 { padding-left: 10px; padding-right: 10px; } .ptb10 { padding-top: 10px; padding-bottom: 10px; }
.p15 { padding: 15px; } .pl15 { padding-left: 15px; } .pr15 { padding-right: 15px; } .pt15 { padding-top: 15px; } .pb15 { padding-bottom: 15px!important; } .plr15 { padding-left: 15px; padding-right: 15px; } .ptb15 { padding-top: 15px; padding-bottom: 15px; }
.p20 { padding: 20px; } .pl20 { padding-left: 20px; } .pr20 { padding-right: 20px; } .pt20 { padding-top: 20px; } .pb20 { padding-bottom: 20px!important; } .plr20 { padding-left: 20px; padding-right: 20px; } .ptb20 { padding-top: 20px; padding-bottom: 20px; }
.p25 { padding: 25px; } .pl25 { padding-left: 25px; } .pr25 { padding-right: 25px; } .pt25 { padding-top: 25px; } .pb25 { padding-bottom: 25px!important; } .plr25 { padding-left: 25px; padding-right: 25px; } .ptb25 { padding-top: 25px; padding-bottom: 25px; }
.p30 { padding: 30px; } .pl30 { padding-left: 30px; } .pr30 { padding-right: 30px; } .pt30 { padding-top: 30px; } .pb30 { padding-bottom: 30px!important; } .plr30 { padding-left: 30px; padding-right: 30px; } .ptb30 { padding-top: 30px; padding-bottom: 30px; }
.p35 { padding: 35px; } .pl35 { padding-left: 35px; } .pr35 { padding-right: 35px; } .pt35 { padding-top: 35px; } .pb35 { padding-bottom: 35px!important; } .plr35 { padding-left: 35px; padding-right: 35px; } .ptb35 { padding-top: 35px; padding-bottom: 35px; }
.p40 { padding: 40px; } .pl40 { padding-left: 40px; } .pr40 { padding-right: 40px; } .pt40 { padding-top: 40px; } .pb40 { padding-bottom: 40px!important; } .plr40 { padding-left: 40px; padding-right: 40px; } .ptb40 { padding-top: 40px; padding-bottom: 40px; }
.p45 { padding: 45px; } .pl45 { padding-left: 45px; } .pr45 { padding-right: 45px; } .pt45 { padding-top: 45px; } .pb45 { padding-bottom: 45px!important; } .plr45 { padding-left: 45px; padding-right: 45px; } .ptb45 { padding-top: 45px; padding-bottom: 45px; }
.p50 { padding: 50px; } .pl50 { padding-left: 50px; } .pr50 { padding-right: 50px; } .pt50 { padding-top: 50px; } .pb50 { padding-bottom: 50px!important; } .plr50 { padding-left: 50px; margin-right: 50px; } .ptb50 { margin-top: 50px; margin-bottom: 50px; }
.user-action-tool {
list-style: none;
padding: 0;
margin: 0;
gap: 32px;
}
.user-action-tool > li {
display: flex;
position: relative;
}
.user-action-tool a {
font-size: 12px;
font-weight: 600;
color: #474b58;
text-decoration: none;
transition: color 0.3s;
}
.user-action-tool a:hover {
color: #135bec;
}
.count-noty {
position: absolute;
top: -10px;
right: -10px;
width: 18px;
height: 18px;
border: 2px solid white;
background: rgb(19, 91, 236);
text-align: center;
color: white;
border-radius: 100%;
font-size: 8px;
line-height: 14px;
font-weight: 800;
font-family: Inter;
}
.user-action-tool .button {
text-align: center;
font-family: "Be Vietnam Pro";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 20px;
padding: 3px 12px;
border-radius: 6px;
min-width: 100px;
border: 1px solid #135BEC;
}
.user-action-tool .login-button {
color: #135BEC;
}
.user-action-tool .register-button {
background-color: #135BEC;
color: white;
}
[data-theme="hocmai2026"] .pagination-info {
font-family: Be Vietnam Pro;
font-weight: 400;
font-size: 12px;
line-height: 20px;
color: rgb(106, 114, 130);
}
[data-theme="hocmai2026"] .pagination {
display: flex;
list-style: none;
gap: 10px;
align-items: center;
}
[data-theme="hocmai2026"] .pagination li a.prev,
[data-theme="hocmai2026"] .pagination li a.next {
border: 1px solid rgb(233, 237, 242);
}
[data-theme="hocmai2026"] .pagination li > * {
padding: 5px 10px;
text-decoration: none;
font-family: Be Vietnam Pro;
font-weight: 600;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: center;
vertical-align: middle;
color: rgb(106, 114, 130);
display: inline-block;
border-radius: 6px !important;
}
[data-theme="hocmai2026"] .pagination li.active a {
background: rgb(19, 91, 236);
padding: 7px 12px;
color: #fff;
}
[data-theme="hocmai2026"] .pagination span {
padding: 5px 10px;
color: #999;
}
/* END Theme hocmai2026 */
.visibility-hidden{
display: block!important;
visibility: hidden!important;
}
.nowrap{
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.height-full{
height: 100%;
}
.player {
background: #ccc none repeat scroll 0 0;
height: 380px;
position: relative;
width: 676px;
}
.page-title {
font-size: 24px;
font-weight: 500;
margin: 0 0 20px;
text-transform: uppercase;
}
.home-2-icon {
background: rgba(0, 0, 0, 0) url("../images/home-2-icon.png") no-repeat scroll center center;
display: inline-block;
height: 1.25em;
margin-right: 10px;
text-indent: -999em;
width: 24px;
}
.home-1-icon {
background: rgba(0, 0, 0, 0) url("../images/home-1-icon.png") no-repeat scroll 0 center;
display: inline-block;
padding-left: 18px;
}
.home-1-icon.white{
background-image: url("../images/white/home-1-icon.png");
}
.course-info-list {
list-style: outside none square;
margin: 10px 0;
padding-left: 1.5em;
}
.course-info-stitle {
color: #2a70b8;
margin: 10px 0 -10px !important;
}
/* ------- Layout -------- */
.wrapper {
margin: 0 auto;
padding: 0;
position: relative;
width: 1200px;
}
.full-wrapper{
margin: 0 auto;
padding-left: 0!important;
padding-right: 0!important;
position: relative;
max-width: none;
}
#main {
padding-bottom: 30px;
padding-top: 30px;
}
.sidebar-first {
float: left;
width: 240px;
}
.sidebar-large-first{
float: left;
width: 435px;
}
.with-sidebar-first-medium .sidebar-first{
width: 310px;
}
#sidebar-fisrt {
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-top: 1px solid #ebebeb;
}
.sidebar-second {
float: right;
width: 326px;
}
.sidebar-first, .sidebar-second, .fixsb{
height: 100%;
position: relative;
z-index: 2;
}
.content-wr {
float: left;
width: 100%;
}
.content-wr > .content{
position: relative;
}
.with-sidebar-first .content-wr {
margin-left: -240px;
}
.with-sidebar-first .content-wr > .content {
margin-left: 262px;
}
.with-sidebar-first-medium .content-wr {
margin-left: -310px;
}
.with-sidebar-first-medium .content-wr > .content {
margin-left: 335px;
}
.with-sidebar-first-large .content-wr {
margin-left: -435px;
}
.with-sidebar-first-large .content-wr > .content {
margin-left: 457px;
}
.scorm-page .with-sidebar-second .content-wr {
background-color: transparent;
}
.with-sidebar-second .content-wr > .content {
padding: 20px 0;
}
.button-register {
font-weight: 500;
font-size: 21px;
padding: 12px 35px;
border-radius: 15px;
background-color: white;
color: #007bff;
border: 1px solid;
margin-bottom: 8%;
}
.button-display {
display: none;
}
.display-block {
display: block !important;
}
.content-right {
display: flex;
justify-content: center;
align-items: flex-end;
}
.button-register:hover {
color:white;
background-color: #007bff;
}
.with-sidebar-second50 .content-wr {
margin-right: -50%;
}
.with-sidebar-second50 .content-wr > .content {
margin-right: 50%;
}
.with-sidebar-second50 .sidebar-second {
padding-left: 20px;
width: 50%;
}
.hide-sidebar-second .content-wr {
margin-right: 0!important;
}
.hide-sidebar-second .content-wr > .content {
margin-right: 0!important;
width: auto!important;
}
.hide-sidebar-second .sidebar-second {
display: none;
}
.hide-sidebar-second .learn-panel-close .fa-chevron-right:before {
content: "\f053";
}
/* ------- Colors -------- */
/* ------ Header ------*/
#header--new {
background: white;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
z-index: 99;
}
#header--new > .wrapper .course-menu{
display: none;
}
#header--new > .wrapper ._header-top{
padding: 10px 0;
}
#header--new .user-toggler,
#header--new .navbar-toggler {
padding: 0;
border: 0;
background: transparent;
text-align: right;
}
#header--new .navbar-toggler{
display: none;
}
#header--new .user-profile {
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
#header--new .user-avatar-section {
margin-top: 50px;
display: block;
text-align: center;
}
#header--new .user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 1px solid white;
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
#header--new .user-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
margin-top: 10px;
align-items: center;
}
#header--new .user-name {
font-weight: 700;
font-size: 18px;
line-height: 28px;
color: #1e2939;
margin-bottom: 0;
}
#header--new .grade-badge {
background: #f97316;
border-radius: 8px;
padding: 0 8px;
font-size: 10px;
font-weight: 700;
color: white;
letter-spacing: 0.5px;
width: fit-content;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
margin-top: 5px;
gap: 10px;
}
#header--new a.grade-badge:hover{
text-decoration: none;
color: white;
}
#header--new .user-avatar-section .box_avatar {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100%;
background-color: #f1f1f1;
box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: block;
}
#header--new .box_avatar a{
display: block;
}
#header--new .user-profile,
#header--new .menu-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
overflow-y: auto;
background-color: white;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
z-index: 9999999;
}
#header--new .user-profile{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#header--new .menu-container.inactive {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
#header--new .user-profile.active,
#header--new .menu-container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#header--new .user-toggler .box_avatar {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: #f1f1f1;
box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: block;
}
#header--new .user-toggler .userpicture {
border: 1px solid rgb(19, 91, 236);
}
#header--new .userpicture {
width: 100%;
height: 100%;
object-fit: cover;
border: 2px solid white;
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
#header--new .user-action-tool > li:last-child {
display: none;
}
#header--new .user-profile .menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-radius: 12px;
text-decoration: none;
color: #6a7282;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
#header--new .user-profile .menu-item.active {
color: rgb(19, 91, 236);
background: rgb(239, 246, 255);
}
#header--new .user-profile .menu-item.active svg path {
fill: rgb(19, 91, 236);
}
#header--new .user-profile .logout-btn {
background: #f8fafc;
border: none;
border-radius: 12px;
padding: 8px 12px;
font-size: 16px;
font-weight: 600;
color: #6a7282;
cursor: pointer;
transition: background 0.3s;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
#header--new {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
[data-theme="hocmai2026"] .sidebar {
background: #fff;
width: 280px;
position: sticky;
padding-top: 20px;
margin: 0;
}
.mod-scorm-view .scorm-page .sidebar {
border-right: 1px solid #e9edf2;
min-height: calc(100vh - 60px);
top: 60px;
height: calc(100vh - 60px);
}
.sidebar-header {
padding: 20px;
}
.mod-scorm-view #header--new.update-info ~ .scorm-page .sidebar{
min-height: calc(100vh - 110px);
height: calc(100vh - 110px);
top: 110px;
}
.mod-scorm-view .title-course {
color: #00339A;
font-size: 18px;
font-weight: 700;
line-height: 24px;
margin-top: 0;
}
.progress-learn-package span {
color: #474B58;
font-family: Inter;
font-size: 10px;
font-weight: 400;
line-height: 14px;
}
.progress-learn-package .progress {
border-radius: 64px;
background: #E0E0E0;
box-shadow: none;
height: 6px;
margin-top: 5px;
}
.progress-learn-package .progress-bar {
border-radius: 64px;
background: linear-gradient(90deg, #06F 0%, #579AFF 100%);
}
.search-scorm {position: relative;}
.search-scorm input {
border-radius: 8px;
border: 1px solid #E9EDF2;
background: #F8FAFC;
padding: 4px 34px 4px 10px;
box-shadow: none;
color: #6A7282;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.button-search-scorm {
position: absolute;
right: 0;
top: 0;
border: 0;
background: transparent;
z-index: 9;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.lecture-search {
position: relative;
margin: 0 -20px;
padding: 0px 20px;
}
.sidebar.active .lecture-search {
border-top: 1px solid #e9edf2;
border-bottom: 1px solid #e9edf2;
padding: 10px 20px;
}
.search-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
z-index: 999;
height: 300px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e9edf2;
box-shadow: 0px 9px 17px rgba(0, 0, 0, 0.12);
}
.search-dropdown-box {
flex-direction: column;
height: 100%;
background-color: white;
padding: 0;
}
.search-dropdown .scroll-wrapper {
height: 100%;
}
.search-section {
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
}
.search-section span{
display: none;
}
.search-item {
padding: 8px 20px;
cursor: pointer;
font-size: 12px;
}
.search-item:hover {
background: #f0f0f0;
}
[data-theme="hocmai2026"] main.content {
flex: 1;
padding: 20px 0 20px 30px;
position: relative;
width: calc(100% - 280px);
}
.sidebar-content .process-percent,
.sidebar-content .course-outline-head,
.sidebar-content #scorm-status-helper {
display: none;
}
.course-outline-wr {
counter-reset: item;
}
.scorm-section-right .section-right-name::before {
counter-increment: item;
content: counter(item) ". ";
/*width: 24px;
height: 24px;
position: absolute;
left: -5px;
top: 8px;
text-align: center;
border-radius: 100%;*/
font-size: 12px;
line-height: 24px;
color: #141414;
}
.sidebar-content {
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 20px;
}
.sidebar.active .sidebar-content::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
z-index: 99;
}
#course-outline .course-outline-wr,
#course-outline {
height: 100%;
}
.scorm-page .lesson-process-wr > span{display: none}
#search {
float: left;
padding: 8px 0;
width: 260px;
color: #505050;
}
.search-key-wr {
float: left;
margin-right: -33px;
width: 100%;
}
.search-key-inner {
background: #fff none repeat scroll 0 0;
border-radius: 6px 0 0 6px;
height: 33px;
margin-right: 33px;
padding: 0 10px;
}
.search-key {
border: medium none !important;
height: 100%;
width: 100%;
}
.search-submit-wr {
background: #fff none repeat scroll 0 0;
border-radius: 0 6px 6px 0;
float: right;
height: 100%;
position: relative;
width: 33px;
z-index: 2;
}
.search-submit {
background: transparent url("../images/search.png") no-repeat scroll center center;
border: medium none;
cursor: pointer;
display: block;
height: 33px;
padding: 0;
text-indent: -9999em;
width: 33px;
}
.logo {
background: rgba(0, 0, 0, 0) url("/img/hocmai/logo_w_45x43.png") no-repeat scroll center center;
display: block;
height: 100%;
left: 50%;
margin-left: -22px;
position: absolute;
text-indent: -9999em;
top: 0;
width: 45px;
}
.header-action {
display: block;
float: right;
padding: 8px 0;
}
.action-tool {
margin: 0;
padding: 0;
}
.action-tool li {
float: left;
height: 33px;
list-style: outside none none;
padding: 0 5px;
position: relative;
font-weight: bold;
}
.menu-icon {
display: block;
height: 100%;
position: relative;
width: 25px;
}
.menu-icon.book,.menu-icon.people{
text-indent: -9999em;
}
.login-bt {
display: inline-block;
line-height: 32px;
margin-right: 5px;
}
.menu-icon.logout {
font-size: 19px;
line-height: 1;
padding: 5px 0;
}
.bell {
background: rgba(0, 0, 0, 0) url("images_new/chuong.png") no-repeat scroll center center;
}
.book {
background: rgba(0, 0, 0, 0) url("images_new/book.png") no-repeat scroll center center;
}
.people {
background: rgba(0, 0, 0, 0) url("images_new/user.png") no-repeat scroll center center;
}
.count-notification {
background: #fb8b55 none repeat scroll 0 0;
border-radius: 10px;
bottom: -4px;
display: block;
font-size: 9px;
height: 18px;
line-height: 18px;
position: absolute;
right: -5px;
text-align: center;
width: 18px;
z-index: 10;
}
#notification-box {
color: #505050;
display: none;
padding: 20px 10px 20px 20px;
position: absolute;
right: 0;
top: 100%;
width: 290px;
z-index: 9;
border-radius: 12px;
background: white;
box-shadow: 0 0 6px 0 rgba(0, 75, 173, 0.10);
margin-top: 5px;
}
#notification-box li a {
display: block;
color: #1E2939;
font-size: 12px;
line-height: 20px;
}
#notification-box li a.not_read{
font-weight: 600;
}
.notification-title {
display: block;
margin: 0;
color: #4A5565;
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
.notification-list {
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
list-style: none;
margin-top: 10px;
}
#notification-list > li {
font-size: 13px;
height: auto;
line-height: 18px;
padding: 5px 10px 5px 0;
}
#notification-more {
border-radius: 6px;
border: 1px solid #135BEC;
color: #135BEC !important;
text-align: center;
padding: 5px;
margin-top: 15px;
display: block;
margin-right: 10px;
}
/* --------- Header white --------*/
.logo.logo-blue {
background: rgba(0, 0, 0, 0) url("../images/blue/logo.png") no-repeat scroll center center;
}
.header-white #search {
padding: 9px 0;
}
.header-white .search-form {
border: 1px solid #2a70b8;
border-radius: 3px;
}
.header-white .search-submit{
background-image: url("../images/blue/search-icon.png");
}
.header-white .bell {
background-image: url("../images/blue/bell.png");
}
.header-white .book {
background-image: url("../images/blue/book.png");
}
.header-white .people {
background-image: url("../images/blue/user.png");
}
.hd-back {
background: transparent url("../images/blue/support-icon.png?v=1") no-repeat scroll left center;
display: block;
font-size: 14px;
font-weight: bold;
height: 36px;
line-height: 36px;
margin-right: 40px;
min-width: 39px;
text-indent: -999em;
}
.header-white .header-action {
padding: 10px 0 9px;
}
.highlight-blue {
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
}
.highlight-blue .breadcrumbs, .highlight-blue #breadcrumbs > a, .highlight-blue #breadcrumbs > span,
.highlight-blue a{
color: inherit;
}
/* --------- Block --------*/
.block {
margin: 0 0 20px;
position: relative;
}
.course-list-title {
background: #e0e0e0 none repeat scroll 0 0;
color: #5c5c5c;
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 6px 6px 6px 40px;
}
.menu-hover {
margin: 0;
padding: 0;
}
#block-khoahoc{
border-bottom: 1px solid #e1dddd;
}
#sidebar-fisrt .menu-hover .menu-hover > li{
width: 238px;
}
.menu-hover > li {
font-size: 14px;
position: relative;
list-style: outside none none;
}
.menu-hover a {
background: #fff none repeat scroll 0 0;
color: #363636;
display: block;
font-size: 14px;
line-height: 20px;
padding: 6px 6px 6px 40px;
}
.menu-hover .hover-has-children > a{
padding-right: 20px;
position: relative;
}
.mhl > a, .menu-hover .hover > a, .menu-hover a:hover {
background-color: #2a70b8;
color: #fefefe;
}
.menu-hover .menu-hover {
display: none;
left: 100%;
position: absolute;
top: 0;
z-index: 2;
}
.menu-hover .menu-hover,
.menu-hover .menu-hover a{
background-color: #2a70b8;
color: #fff;
}
.menu-hover .menu-hover a{
padding-left: 60px;
}
.menu-hover .menu-hover a:hover, .menu-hover .menu-hover a:active{
background: #599de4;
}
.menu-subject-icon{
position: relative;
}
.menu-subject-icon:before {
background-image: url("../images/subject-28-icon.png");
background-position: 0 0;
background-repeat: no-repeat;
content: "";
display: block;
height: 18px;
left: 25px;
position: absolute;
top: 8px;
width: 18px;
}
.menu-subject-icon-0:before{
background-image: url("../images/subject-22-icon.png");
}
.menu-subject-icon-16:before{
background-image: url("../images/subject-16-icon.png");
}
.menu-subject-icon-18:before{
background-image: url("../images/subject-18-icon.png");
}
.menu-subject-icon-74:before,
.menu-subject-icon-22:before{
background-image: url("../images/subject-22-icon.png");
}
.menu-subject-icon-23:before{
background-image: url("../images/subject-23-icon.png");
}
.menu-subject-icon-24:before{
background-image: url("../images/subject-24-icon.png");
}
.menu-subject-icon-27:before{
background-image: url("../images/subject-27-icon.png");
}
.menu-subject-icon-26:before{
background-image: url("../images/subject-26-icon.png");
}
.menu-subject-icon-28:before,.menu-subject-icon-33:before,
.menu-subject-icon-17:before,.menu-subject-icon-42:before{
background-image: url("../images/subject-28-icon.png");
}
.menu-subject-icon-75:before,
.menu-subject-icon-29:before{
background-image: url("../images/subject-29-icon.png");
}
.menu-subject-icon-58::before{
background-image: url("../images/subject-16-icon.png");
}
.menu-subject-icon-57::before{
background-image: url("../images/subject-29-icon.png");
}
.menu-hover .my-course {
background-image: url("../images/menu-icon.png");
background-repeat: no-repeat;
background-position: 15px 12px;
}
.menu-hover a.my-course:hover{
background-image: url("../images/menu-icon-white.png");
}
.menu-hover.menu-blue a{
color: #2a70b8;
}
.menu-hover.menu-blue a:hover{
color: #fff;
}
.hover-has-children > a:after{
background-image: url("../images/menu-arrow-icon.png");
background-position: 0 0;
background-repeat: no-repeat;
content: "";
display: block;
height: 10px;
right: 10px;
position: absolute;
top: 10px;
width: 6px;
}
.hover-has-children > a:hover:after,
.hover-has-children.hover > a:after{
background-position: 0 -10px;
}
/* ----------- Breadcrumbs ------------ */
.breadcrumbs {
color: #6A7282;
font-size: 12px;
line-height: 20px;
font-weight: 600;
margin-bottom: 15px;
}
#breadcrumbs > a, #breadcrumbs > span {
color: #135BEC;
}
#breadcrumbs > a:hover{
text-decoration: none;
}
#breadcrumbs > a:first-child {
margin-right: 5px;
}
#breadcrumbs > a:not(:first-child) {
margin-left: 5px;
}
/* --------- Course grid ---------*/
.course-grid-item {
background: #fff none repeat scroll 0 0;
border: 1px solid #ececec;
float: left;
min-height: 299px;
position: relative;
}
.grid2 .course-grid-item:nth-child(2n+1),
.grid3 .course-grid-item:nth-child(3n+1),
.grid4 .course-grid-item:nth-child(4n+1) {
clear: both;
}
.course-grid.grid3 {
margin: 0 -10px;
}
.grid3 .course-grid-item{
margin: 0 10px 20px;
width: 240px;
}
.course-grid.grid4 {
margin: 0 -3px;
}
.grid4 .course-grid-item{
margin: 0 3px 20px;
width: 186px;
}
.grid3 .course-grid-image{
height: auto;
}
.course-grid-image {
height: 100px;
overflow: hidden;
text-align: center;
}
.course-grid-info {
padding: 8px;
position: relative;
}
.course-grid-name {
font-size: 13px;
font-weight: bold;
margin: 10px 0;
}
.course-grid-name a, .course-grid-teacher a:hover{
color: #2a70b8;
}
.course-grid-teacher, .course-closing-date {
color: #8d8989;
font-size: 12px;
margin: 0 0 10px;
}
.course-grid-teacher > a{
color: #8d8989;
}
.course-grid-teacher{
min-height: 2.5em;
}
.course-grid-teacher-des {
color: #8d8989;
font-size: 12px;
margin: 0 0 10px;
min-height: 2.5em;
}
.course-grid-fee {
color: #8d8989;
font-size: 12px;
margin: 0 0 10px;
}
.course-action {
text-align: right;
}
.course-view-more, .teacher-view-more{
color: #fefefe;
display: inline-block;
font-size: 12px;
padding: 5px 20px;
}
.teacher-view-more{
background: #bbbbbb none repeat scroll 0 0;
}
.course-view-more{
background: #2a70b8 none repeat scroll 0 0;
}
.course-view-more:hover, .course-view-more:focus{
background: #ff8d1f none repeat scroll 0 0;
color: #fefefe;
}
.course-grid-teacher a.teacher-view-more:hover{
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
}
/* ----------- Course detail ------------ */
#course-highlight {
border-bottom: 2px solid #eaeaea;
}
.course-detail-title {
color: #6b6b6b;
font-size: 22px;
font-weight: normal;
margin: 20px 0 15px;
text-transform: uppercase;
}
.course-short-description {
font-size: 14px;
font-weight: 300;
margin: 10px 0;
}
.course-detail-teacher {
font-size: 14px;
font-weight: 300;
margin: 10px 0;
}
.course-detail-video {
background: #ccc none repeat scroll 0 0;
height: 380px;
width: 676px;
}
.course-detail-stitle {
color: #505050;
font-size: 14px;
font-weight: bold;
margin: 0 0 20px;
}
.course-outline .course-detail-stitle {
border-bottom: 1px solid #2a70b8;
}
.course-outline .course-detail-stitle > span {
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
display: inline-block;
line-height: 30px;
padding: 0 15px;
}
.course-detail-description {
color: #515151;
font-size: 13px;
text-align: justify;
}
.course-detail-description.overhide{
height: 130px;
overflow: hidden;
position: relative;
}
.course-detail-description.overhide:after {
bottom: 0;
content: "";
display: block;
height: 25px;
opacity: 1;
position: absolute;
width: 100%;
background: -moz-linear-gradient(top, rgba(249,249,249,0) 0%, rgba(249,249,249,0.75) 70%, rgba(249,249,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,0)), color-stop(70%,rgba(249,249,249,0.75)), color-stop(100%,rgba(249,249,249,1)));
background: -webkit-linear-gradient(top, rgba(249,249,249,0) 0%,rgba(249,249,249,0.75) 70%,rgba(249,249,249,1) 100%);
background: -o-linear-gradient(top, rgba(249,249,249,0) 0%,rgba(249,249,249,0.75) 70%,rgba(249,249,249,1) 100%);
background: -ms-linear-gradient(top, rgba(249,249,249,0) 0%,rgba(249,249,249,0.75) 70%,rgba(249,249,249,1) 100%);
background: linear-gradient(to bottom, rgba(249,249,249,0) 0%,rgba(249,249,249,0.75) 70%,rgba(249,249,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f9f9f9', endColorstr='#f9f9f9',GradientType=0 );
}
.cdd-more-bt {
display: block;
font-size: 13px;
font-weight: 500;
margin: 10px 0;
}
.cdc-title {
color: #515151;
font-size: 13px;
font-weight: 900;
margin: 15px 0;
}
.course-detail-criteria {
color: #515151;
}
.cdc-description {
font-size: 13px;
text-align: justify;
}
/* ------- Scorm section ------- */
.section-name {
color: #505050;
font-size: 15px;
font-weight: 500;
margin: 20px 0 0;
padding: 5px 0;
}
.section-name .name{
float: left;
}
.course-section-reg {
background: #ff7d00 none repeat scroll 0 0;
color: #fff;
display: inline-block;
float: right;
font-size: 12px;
font-weight: 500;
line-height: 24px;
margin: -8px 0 0 20px;
padding: 0 10px;
}
.course-section-reg:hover{
background: #2a70b8;
color: #fff;
}
.course-section-fee {
float: right;
font-size: 12px;
margin-top: 3px;
}
.section-list {
border-top: 1px solid #d4d4d4;
font-size: 13px;
margin: 0;
padding: 0;
}
.section-list > li {
border-bottom: 1px solid #d4d4d4;
list-style: outside none none;
padding: 10px 0 5px 40px;
position: relative;
}
.section-list > li:before {
background: transparent url("../images/play-icon.png") no-repeat scroll 0 0;
content: "";
display: block;
height: 16px;
left: 0;
position: absolute;
top: 10px;
width: 16px;
}
.section-list > li.quiz:before, .section-list > li.label-mod:before{
background: transparent url("../images/document-icon.png") no-repeat scroll 0 0;
}
.section-list > li.can-play:before{
background: transparent url("../images/play-blue-icon.png") no-repeat scroll 0 0;
}
.section-scorm-name {
float: left;
font-size: 13px;
font-weight: normal;
line-height: 1.2;
margin: 0;
max-width: 430px;
}
.section-scorm-name > a, .scorm-time{
color: #2a70b8;
}
.section-scorm-name>a.scorm-gray-hover{
color: #505050;
}
.section-scorm-name.nowrap {
position: relative;
}
.section-scorm-name.nowrap:before{
content: "";
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 25px;
background: -moz-linear-gradient(left, rgba(249,249,249,0) 0%, rgba(249,249,249,0.9) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(249,249,249,0)), color-stop(100%,rgba(249,249,249,0.9)));
background: -webkit-linear-gradient(left, rgba(249,249,249,0) 0%,rgba(249,249,249,0.9) 100%);
background: -o-linear-gradient(left, rgba(249,249,249,0) 0%,rgba(249,249,249,0.9) 100%);
background: -ms-linear-gradient(left, rgba(249,249,249,0) 0%,rgba(249,249,249,0.9) 100%);
background: linear-gradient(to right, rgba(249,249,249,0) 0%,rgba(249,249,249,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e6ffffff',GradientType=1 );
}
.learn-trial-bt {
background: #a2a2a2 none repeat scroll 0 0;
color: #fff;
display: block;
float: right;
font-size: 13px;
font-weight: 500;
margin: -3px 20px;
padding: 2px 10px;
}
.learn-trial-bt:hover {
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
}
.scorm-public-date, .scorm-time {
display: block;
float: right;
min-width: 66px;
text-align: right;
}
.scorm-public-date {
color: #505050;
font-size: 11px;
}
.scorm-hover{
cursor: pointer;
}
.scorm-hover-arrow {
color: #505050;
font-size: 12px;
margin-left: 3px;
}
.scorm-detail-hover-summary {
display: none;
margin: 10px 0;
}
.section-scorm-action {
margin: 5px 0 0;
padding: 0;
}
.section-scorm-action > li {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.num-scorm-documents, .num-scorm-qa, .scorm-right-times, .scorm-allowtimes{
color: #505050;
display: block;
font-size: 12px;
height: 20px;
line-height: 20px;
position: relative;
text-align: right;
min-width: 50px;
}
.num-scorm-documents{
padding-right: 29px;
}
.num-scorm-qa{
padding-right: 25px;
}
.scorm-right-times{
padding-right: 25px;
}
.num-scorm-documents:before,
.num-scorm-qa:before,
.scorm-right-times:before{
content: "";
display: block;
height: 16px;
position: absolute;
right: 0;
top: 0;
}
.num-scorm-documents:before{
background: transparent url("images_new/download-icon.png") no-repeat scroll 0 center;
width: 23px;
}
.num-scorm-documents:hover:before{
background: transparent url("images_new/download-blue-icon.png") no-repeat scroll 0 center;
}
.num-scorm-qa:before{
background: transparent url("images_new/comment-icon.png") no-repeat scroll 0 center;
width: 19px;
}
.num-scorm-qa:hover:before{
background: transparent url("../images/comment-blue-icon.png") no-repeat scroll 0 center;
}
.scorm-right-times:before {
background: transparent url("images_new/clock-icon.png") no-repeat scroll 0 center;
width: 16px;
}
.scorm-right-times:hover:before {
background: transparent url("images_new/clock-blue-icon.png") no-repeat scroll 0 center;
}
.scorm-documents {
display: none;
margin: 10px 0;
padding: 0;
}
.scorm-documents > li {
list-style: outside none none;
}
.scorm.can-play.scorm-new::after {
background: transparent url("../images/new-icon.png") no-repeat scroll 0 0;
bottom: 0;
content: "";
display: block;
height: 32px;
position: absolute;
right: 0;
width: 32px;
}
.scorm-page .num-scorm-tooltip {
border-radius: 8px;
background: #E9EDF2;
padding: 0px 8px;
color: #141414;
font-size: 8px;
font-weight: 400;
line-height: 16px;
position: absolute;
top: 50% !important;
right: 23px !important;
transform: translate(0, -50%);
left: inherit !important;
}
/* -------- Sticky menu ------- */
.sticky-menu {
background: #fff;
box-shadow: -1px 2px 3px 0 rgba(225, 225, 225, 0.75);
}
.hide{
display: none;
}
.sticky-menu-scrolled{
display: block!important;
position: fixed;
width: 100%;
top: 0;
z-index: 888;
}
.course-sticky-name {
float: left;
font-size: 13px;
margin: 15px 0;
max-width: 676px;
text-transform: uppercase;
}
.course-sticky-fee, .course-sticky-register-now{
float: right;
}
.course-sticky-fee {
color: #ec7a00;
font-size: 22px;
line-height: 24px;
margin: 10px 0;
}
.course-sticky-fee > span{
float: left;
}
.course-sticky-fee .fee-currency {
font-size: 12px;
line-height: 14px;
margin-left: 3px;
text-transform: uppercase;
font-weight: bold;
}
.course-sticky-register-now {
background: #ff7d00 none repeat scroll 0 0;
border-radius: 3px;
color: #fff;
font-size: 12px;
height: 30px;
line-height: 30px;
margin: 7px 20px;
min-width: 115px;
padding: 0 15px;
text-align: center;
}
/* ------- Block course info -------*/
.course-info-title {
color: #2a70b8;
font-size: 20px;
font-weight: 500;
margin: 0 0 15px;
text-align: center;
}
.course-info-fee {
font-size: 28px;
display: inline-block;
}
.cif-old {
color: #747474;
display: block;
float: left;
}
.cif-current {
color: #ff7e00;
float: right;
margin-left: 20px;
}
.cif-old > span, .cif-current > span{
float: left;
}
.course-info-fee .fee-currency {
font-size: 14px;
margin: 4px 0 0 3px;
}
.cif-old .fee-value {
position: relative;
}
.cif-old .fee-value:before {
background: #666 none repeat scroll 0 0;
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
top: 50%;
width: 100%;
}
.course-register-wr {
margin: 20px 0 15px;
text-align: center;
}
.course-register-now {
background: rgba(0, 0, 0, 0) url("../images/register-now.png") no-repeat scroll 0 0;
color: #fff;
display: inline-block;
font-size: 22px;
font-weight: 500;
height: 54px;
line-height: 54px;
text-align: center;
width: 185px;
}
.course-info-description {
border-top: 1px solid #cccbcb;
color: #3d3d3d;
font-size: 13px;
}
.course-info-description > p {
margin: 10px 0;
}
/* -------- Scorm detail ------- */
.scorm-course-detail-title {
font-size: 22px;
font-weight: 500;
margin: 5px 0 -10px;
text-transform: uppercase;
}
.scorm-player-wr {
position: relative;
z-index: 9;
}
.scorm-box-shadow, .scorm-detail-info.with-play {
background: #fff none repeat scroll 0 0;
box-shadow: 2px 2px 3px 0 rgba(234, 232, 232, 0.75);
margin: 7px 0 50px;
padding: 10px 18px 10px 23px;
}
.scorm-header {
color: #505050;
padding: 0;
position: relative;
}
.course-section-name, .scorm-name{
font-family: "Roboto Condensed","Roboto",Tahoma,sans-serif;
}
.course-section-name {
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 5px 0;
}
.scorm-name {
font-size: 23px;
font-weight: bold;
margin: 0;
padding: 0;
}
.scorm-play-time {
font-size: 13px;
font-weight: 300;
margin: 0;
padding: 5px 0;
}
.scorm-header.with-play-scorm {
background: #2a70b8 none repeat scroll 0 0;
box-shadow: -1px 2px 3px 0 rgba(147, 135, 117, 0.77);
color: #fefefe;
margin-bottom: 0;
margin-top: 1px;
padding: 25px 16px 25px 120px;
cursor: pointer;
}
.scorm-header.with-play-scorm::before {
background: rgba(0, 0, 0, 0) url("../images/play-5-icon.png") no-repeat scroll center center;
content: "";
display: block;
height: 72px;
left: 30px;
margin-top: -35px;
position: absolute;
top: 50%;
width: 70px;
}
.course-current-scorm-link.scorm-header.with-play-scorm {
display: block;
}
.ccs-section {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
}
.ccs-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.ccs-playtime {
font-weight: 300;
}
a.learn-now-cta {
display: inline-block;
line-height: 30px;
background: #2a70b8;
color: #fff;
padding: 0 25px;
border-radius: 5px;
font-weight: bold;
text-transform: uppercase;
}
.scorm-header.with-play-scorm .course-section-name,
.scorm-header.with-play-scorm .scorm-name{
font-family: inherit;
}
.percent-complete {
color: #2a70b8;
font-size: 13px;
margin: 30px 0;
}
.percent-full {
box-shadow: -1px 2px 3px 0 rgba(217, 216, 214, 0.75);
margin: 5px 0;
width: 100%;
}
.percent-current {
background: #ff7e00 none repeat scroll 0 0;
display: block;
height: 25px;
text-indent: -999em;
}
.scorm-page .scorm-detail-documents {
border: none;
list-style: none;
padding: 10px 0 0;
border-radius: 8px;
background: white;
box-shadow: 0 0 6px 0 rgba(0, 75, 173, 0.10);
display: flex;
flex-wrap: wrap;
align-items: center;
}
.scorm-page .scorm-detail-documents:not(.AI-Exam) {
padding-bottom: 5px;
}
.scorm-page .scorm-detail-documents:not(.AI-Exam) .fa {
margin-right: 5px;
color: rgb(19, 91, 236);
}
.scorm-page .AI-Exam .btn {
border-radius: 8px;
padding: 6px 15px;
color: #135BEC;
}
.scorm-page .AI-Exam .btn.btn-border {
border: 1px solid #135BEC;
background-color: transparent;
color: #135BEC;
}
.scorm-page .AI-Exam .btn:not(.btn-default) {
color: #fff;
background: #135BEC;
}
.scorm-detail-documents > li {
float: left;
text-align: left;
padding: 5px 0;
width: 205px;
}
.scorm-detail-documents > li:last-child {
margin-right: 0;
}
.scorm-detail-documents > li:first-child{
text-align: left;
}
.scorm-detail-documents.with-2 li{
width: 310px;
}
.scorm-detail-documents.with-3 li{
/*width: 205px;*/
}
.scorm-detail-documents.with-4 li{
width: 150px;
}
.scorm-detail-documents.with-5 li{
width: 205px;
}
.scorm-detail-documents.with-6 li{
width: 205px;
}
.scorm-detail-documents.with-2 li:nth-child(2n),
.scorm-detail-documents.with-3 li:nth-child(3n),
.scorm-detail-documents.with-4 li:nth-child(4n){
float: right;
margin-right: 0;
text-align: right;
}
.scorm-detail-documents.with-2 li:nth-child(2n+1),
.scorm-detail-documents.with-3 li:nth-child(3n+1),
.scorm-detail-documents.with-4 li:nth-child(4n+1){
float: left;
clear: both;
text-align: left;
}
.scorm-detail-documents.with-3 li:nth-child(3n){
float: left;
text-align: left;
}
.scorm-next-prev {
float: left;
line-height: 30px;
list-style: outside none none;
margin: 0;
padding: 0 15px;
}
.scorm-next-prev > li {
float: left;
}
.scorm-prev, .scorm-next{
position: relative;
color: #fff;
}
.scorm-next-prev.color-inherit .scorm-prev,
.scorm-next-prev.color-inherit .scorm-next{
color: inherit;
}
.scorm-next-prev a:hover{
color: #fff;
}
.scorm-prev{
margin-right: 40px;
padding-left: 25px;
}
.scorm-next{
padding-right: 25px;
}
.scorm-social {
padding: 5px 0;
margin-bottom: -1px;
}
.scorm-view {
float: left;
font-size: 13px;
font-weight: 500;
line-height: 30px;
margin-right: 20px;
}
.scorm-fb {
height: 30px;
padding: 5px 0;
width: 300px;
}
.scorm-detail-summary {
margin: 15px 0;
}
.scorm-document-name {
color: inherit;
font-weight: 500;
padding-left: 20px;
position: relative;
}
.scorm-page .AI-Exam .scorm-document-name {
display: flex;
align-items: center;
gap: 10px;
color: #474B58;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.scorm-page .AI-Exam .scorm-document-name > span {
flex: 1;
}
.scorm-document-name i.fa{
color: #1a7fc3;
font-size: 14px;
}
.scorm-document-name:before{
background-repeat: no-repeat;
display: block;
content: "";
height: 12px;
left: 0;
margin-top: -6px;
position: absolute;
top: 50%;
width: 12px;
}
.scorm-doc-1:before{
background-image: url("../images/doc-1-icon-g.png");
}
.scorm-doc-2:before{
background-image: url("../images/doc-2-icon-g.png");
}
.scorm-doc-3:before{
background-image: url("../images/doc-3-icon-g.png");
}
.scorm-doc-4:before{
background-image: url("../images/doc-4-icon-g.png");
}
.scorm-doc-5:before{
background-image: url("../images/doc-5-icon-g.png");
}
a.scorm-doc-1:hover:before{
background-image: url("../images/doc-1-icon.png");
}
a.scorm-doc-2:hover:before{
background-image: url("../images/doc-2-icon.png");
}
a.scorm-doc-3:hover:before{
background-image: url("../images/doc-3-icon.png");
}
a.scorm-doc-4:hover:before{
background-image: url("../images/doc-4-icon.png");
}
a.scorm-doc-5:hover:before{
background-image: url("../images/doc-5-icon.png");
}
/* --- Scorm play list --- */
.struct-menu .playlist {
background: rgba(255, 255, 255, 0.9);
position: absolute;
right: 0;
top: 100%;
width: 100%;
z-index: 9;
display: none;
padding: 10px 15px;
border-radius: 0 0 8px 8px;
overflow-y: auto;
}
.scorm-detail-playlist{
list-style: none;
}
.scorm-detail-playlist .scorm-detail-playlist {
padding: 8px 0;
}
.scorm-detail-playlist > li {
position: relative;
color: #1E2939;
font-size: 12px;
font-weight: 600;
line-height: 20px;
}
.scorm-detail-playlist .with-video-play {
cursor: pointer;
color: #4A5565;
font-weight: 400;
line-height: 18px;
position: relative;
padding: 4px 8px 4px 30px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid transparent;
}
.scorm-detail-playlist .with-video-play:hover,
.scorm-detail-playlist .with-video-play.playing {
color: #1E2939;
border-radius: 12px;
border-color: rgba(19, 91, 236, 0.20);
background: rgba(19, 91, 236, 0.05);
}
.scorm-detail-playlist > li.with-video-play::before {
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 50%;
left: 8px;
transform: translate(0, -50%);
}
.scorm-detail-playlist .with-video-play::before {
background-image: url('data:image/svg+xml,');
}
.scorm-detail-playlist .incompleted.with-video-play.playing::before {
background-image: url('data:image/svg+xml,');
}
.scorm-detail-playlist .with-video-play.completed::before {
background-image: url('data:image/svg+xml,');
}
.scorm-detail-playlist > li + li {
margin-top: 10px;
}
.scorm-detail-playlist .with-video-play .scotime {
color: #94A3B8;
text-align: center;
font-size: 10px;
font-weight: 600;
line-height: normal;
padding: 2px 8px;
}
.scorm-detail-playlist .with-video-play.playing .scotime {
border-radius: 9999px;
background: rgba(19, 91, 236, .1);
color: #135BEC;
}
.hide-before-play{
display: none;
}
/* Floating Chat */
.floating-chat {
position: fixed;
bottom: 29px;
right: 16px;
background: white;
border-radius: 50%;
display: flex;
gap: 6px;
box-shadow: 0px 10px 15px 0px rgba(43, 127, 255, 0.3), 0px 4px 6px 0px rgba(43, 127, 255, 0.3);
cursor: pointer;
transition: all 0.5s;
z-index: 9;
}
.floating-chat:hover {
transform: translateY(-4px);
text-decoration: none;
border-radius: 20px;
padding: 12px;
}
.floating-chat:hover .chat-avatar {
width: 44px;
height: 44px;
}
.floating-chat:hover .chat-info {
display: flex;
}
.chat-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.chat-info {
display: flex;
flex-direction: column;
justify-content: center;
display: none;
}
.chat-info h4 {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #1e2939;
margin-bottom: 0;
}
.chat-info p {
font-size: 12px;
line-height: 20px;
color: #6a7282;
margin-bottom: 0;
}
#pancake-chat-plugin-root {
display: none;
}
/* ------------- New comments ------------- */
.scorm-comments{
color: #505050;
}
.comments-title {
color: #2a70b8;
font-size: 14px;
font-weight: 500;
margin: 10px 0;
text-transform: uppercase;
}
/* ------------- Scorm right --------------*/
.block-course-upgrade {
background: #e6e6e6 none repeat scroll 0 0;
box-shadow: -1px 2px 3px 0 rgba(204, 203, 203, 0.75);
padding: 26px 15px;
}
.scorm-info-title {
color: #2a70b8;
font-size: 18px;
margin: 0;
text-align: center;
}
.course-upgrade-fee {
color: #ff7e00;
font-size: 16px;
margin: 10px 0;
text-align: center;
}
.upgrade-fee-value {
font-size: 28px;
}
.old-fee {
color: #333;
margin-bottom: 5px;
margin-right: 5px;
position: relative;
}
.old-fee:before{
background: #333 none repeat scroll 0 0;
content: "";
display: block;
height: 2px;
left: 0;
margin-top: -1px;
position: absolute;
top: 50%;
width: 100%;
}
.old-fee .upgrade-fee-value {
font-size: 20px;
}
.old-fee .upgrade-fee-currency {
font-size: 10px;
}
.reg-decrease {
color: #2a70b8;
font-size: 14px;
font-weight: 300;
margin: 5px 0 0;
text-align: center;
}
.title-decrease {
background: #ff7e00 none repeat scroll 0 0;
color: #fff;
font-weight: bold;
margin: 0 0 5px;
padding: 6px 10px;
text-align: center;
text-transform: uppercase;
}
.upgrade-fee-currency {
margin: 5px;
text-transform: uppercase;
}
.upgrade-fee-value, .upgrade-fee-currency{
float: left;
}
.course-upgrade-fee > span {
display: inline-block;
}
.course-upgrade-wr {
text-align: center;
}
.course-upgrade-bt {
background: #ff7e00 none repeat scroll 0 0;
border-radius: 8px;
box-shadow: -1px 1px 2px 0 rgba(193, 193, 193, 0.75);
color: #fff;
display: inline-block;
font-size: 13px;
line-height: 34px;
min-width: 150px;
padding: 0 10px;
text-transform: uppercase;
}
.reg-now-des {
font-size: 18px;
}
.reg-now-des>span, .reg-dec-des>span{
color: #ff7e00;
}
.topic {
user-select: none;
}
/* --- Section --- */
.scorm-section-right {
padding-right: 10px;
padding-left: 20px;
}
.scorm-section-right:not(:last-child){
border-bottom: 1px solid #e9edf2;
}
.course-outline-wr .scroll-element.scroll-y {
background: #F1F1F1;
right: 0 !important;
}
.section-right-name[data-toggle="collapse"] {
cursor: pointer;
}
.section-right-name {
overflow: hidden;
color: #141414;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-transform: uppercase;
position: relative;
padding: 10px 60px 10px 0px;
margin: 0;
display: flex;
gap: 3px;
}
.section-right-name .name {
display: block;
}
.section-right-name:after {
background: rgba(0, 0, 0, 0) url("../images/__right.png") no-repeat scroll right center;
content: "";
display: block;
height: 11px;
margin-top: -5px;
position: absolute;
right: 12px;
top: 50%;
width: 11px;
}
.scorm-section-right.active .section-right-name:after,
.section.active > .section-right-name:after{
background-image: url("../images/__down.png");
}
.topic-right-name {
background: #e6e6e6 none repeat scroll 0 0;
border-bottom: 1px solid #d5d4d4;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 10px 30px 10px 10px;
position: relative;
z-index: 2;
cursor: pointer;
text-transform: uppercase;
}
.topic-right-name:before {
background: rgba(0, 0, 0, 0) url("../images/__right.png") no-repeat scroll right center;
content: "";
display: block;
height: 11px;
margin-top: -5px;
position: absolute;
right: 11px;
top: 50%;
width: 11px;
}
.scorm-section-right.active .topic-right-name:before,
.topic.active > .topic-right-name:before{
background-image: url("../images/__down.png");
}
.section-percent-full {
background: #e0e0e0 none repeat scroll 0 0;
display: block;
}
.section-percent-current {
background: #179dfb none repeat scroll 0 0;
display: block;
height: 6px;
}
.scorm-section-right-action {
border-bottom: 1px solid #d4d4d4;
font-size: 12px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
}
.scorm-section-right-action > li {
float: left;
font-weight: 500;
line-height: 30px;
text-align: center;
width: 50%;
}
.scorm-section-reg {
background: #ff7e00 none repeat scroll 0 0;
color: #fff;
display: block;
height: 100%;
text-align: center;
width: 100%;
}
.scorm-section-reg:hover{
color: #fff;
}
.learn-outline-list {
font-size: 13px;
list-style: none;
margin: 0;
padding: 0 10px 0 0;
}
.scorm-section-right.active .scorm-right-list{
display: block;
}
.scorm-right-name {
font-size: 13px;
font-weight: 500;
margin: 0 0 10px;
}
.scorm-right-name a{
color: inherit;
}
.scorm-right-name.here {
padding-right: 15px;
position: relative;
}
.scorm-right-name.here:before {
background: rgba(0, 0, 0, 0) url("../images/speak-icon.png") no-repeat scroll right center;
content: "";
display: block;
height: 11px;
margin-top: -5px;
position: absolute;
right: 0;
top: 50%;
width: 11px;
}
.scorm-right-link-wr{
display: block;
}
.scorm-right-action {
list-style: outside none none;
margin: 0;
padding: 0;
}
.scorm-right-action > li {
font-size: 12px;
}
.scorm-right-action > li:not(:first-child){
margin-left: 15px;
}
.scorm-right-action > li > span {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
}
.scorm-section-right .num-scorm-documents,
.scorm-section-right .num-scorm-qa,
.scorm-section-right .scorm-right-times{
font-size: 13px;
min-width: 60px;
}
.scorm-section-right .num-scorm-documents:before,
.scorm-section-right .num-scorm-qa:before,
.scorm-section-right .scorm-right-times:before{
top: 2px;
opacity: 0.6;
}
.scorm-section-right .num-scorm-documents:hover:before,
.scorm-section-right .num-scorm-qa:hover:before,
.scorm-section-right .scorm-right-times:hover:before{
opacity: 0.85;
}
.scorm-section-right .num-scorm-documents{
padding-right: 30px;
}
.scorm-section-right .num-scorm-documents:before{
background: transparent url("../images/download-icon.png") no-repeat scroll 0 center;
width: 23px;
}
.scorm-section-right .scorm-detail-playlist .with-video-play {
font-weight: 300;
}
.scorm-right-video-count{
display: none;
color: #4385ca;
}
/* --- learn page outline --- */
.learn-lesson-wr {
display: block;
padding: 9px 10px 9px 35px;
position: relative;
color: #141414;
font-size: 12px;
font-weight: 400;
line-height: 20px;
margin-bottom: 2px;
}
.num-scorm-tooltip ~ .tooltip {
font-size: 12px;
text-transform: none;
font-family: 'Be Vietnam Pro', sans-serif;
}
a.learn-lesson-wr:hover, .learn-lesson-wr.active{
border-radius: 16px;
background: #EFF6FF;
}
div.process-percent {
position: relative;;
margin-right: 10px;
width:20px; height:20px;
}
div.process-percent canvas {
display: block;
position:absolute;
top:0;
left:0;
}
div.process-percent span {
color:#555;
display:block;
line-height:220px;
text-align:center;
width:220px;
font-family:sans-serif;
font-size:40px;
font-weight:100;
margin-left:5px;
display: none;
}
.lesson-process-percent.percent-50 {
background-color: #54b551;
border-radius: 8px 0 0 8px;
width: 8px;
}
.lesson-process-percent.percent-100 {
background-color: #54b551;
border-radius: 8px;
}
.learn-lesson-wr .lesson-process-percent .fa,
.lesson-process-wr .lesson-process-percent .fa {
color: #fff;
display: block;
font-size: 11px;
line-height: 16px;
}
.learn-lesson-wr:hover .lesson-process-percent .fa,
.lesson-process-wr:hover .lesson-process-percent .fa{
color: #fff;
}
/* -- Outline -- */
.learn-lesson-wr .fa{
color: #8cbfe1;
font-size: 14px;
}
a.learn-lesson-wr:hover .fa{
/*color: #1a7fc3;*/
}
a.learn-lesson-wr:hover .scorm-right-action{
color: #333;
}
.scorm-page form.nf-form-add {
}
.scorm-page .note-mask ul li .note-content::after,
.scorm-page .note-mask .note-list::before,
.scorm-page .note-mask .sco-title::after{
display: none;
}
.scorm-page .note-form textarea.form-control {
border: 0;
border-radius: 0;
min-height: 60px;
padding: 8px 10px;
color: #141414;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.scorm-page .note-mask .note-list, .scorm-page .note-mask .note-list::before {
background: transparent;
padding-top: 0;
}
.scorm-page .note-mask ul li,
.scorm-page .note-list .sco-title {
padding: 0;
}
.scorm-page .note-mask ul li + li {
margin-top: 15px;
}
.scorm-page .note-mask ul li .note-item-player {
margin-right: 10px;
height: auto;
padding: 0;
}
.scorm-page .sco-note-list {
margin-bottom: 20px;
}
.scorm-page .note-mask ul li .note-item-body {
display: flex;
gap: 15px;
justify-content: space-between;
}
.scorm-page .note-item-body .note-content {
color: #141414;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.scorm-page .note-item-body .action {
display: flex;
gap: 10px;
width: 42px;
}
.scorm-page .note-item-body .action .editable-click,
.scorm-page .note-item-body .action .editable-click:hover{
border-bottom: none;
white-space: normal;
}
.scorm-page .note-item-body .action .note-delete {
display: block !important;
position: relative;
right: 0;
}
.scorm-page .note-mask ul li .note-item-player .ih-title {
color: #00339A;
text-align: center;
font-size: 10px;
font-weight: 400;
line-height: 16px;
border-radius: 12px;
background: #B8D7FF;
}
.scorm-page #hm-comment .comment-action {
margin: 0 0 20px;
}
.scorm-page .comment-container {
margin-top: 0;
}
.scorm-page .reply-item.hm-item,
.scorm-page .comment-item {
border-bottom: 0;
display: flex;
gap: 10px;
}
.scorm-page .reply-item .ri-reply,
.scorm-page .comment-item .ci-comment {
flex: 1;
width: auto;
}
.scorm-page .reply-item .ri-user,
.scorm-page .comment-item .ci-user {
width: 40px;
height: 40px;
}
.scorm-page .reply-item .ri-user img,
.scorm-page .comment-item .ci-user img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 100%;
}
.scorm-page .cih-title {
height: 40px;
}
.scorm-page .cih-title strong {
color: #1E2939;
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
.scorm-page .cih-title span:not(:last-child){
display: none;
}
.scorm-page .cih-title span {
display: block;
color: #6A7282;
text-align: justify;
font-size: 10px;
font-weight: 400;
line-height: 15px;
}
.scorm-page .ri-content.hmc-content,
.scorm-page .ci-content.hmc-content {
/*margin-left: -50px;*/
}
.scorm-page .hmc-content .content {
padding: 5px 0 0;
overflow: hidden;
color: #4A5565;
text-align: justify;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.scorm-page .content-bottom .cb-action {
font-size: 12px;
}
.scorm-page .reply {
padding-left: 0;
border-left: 0;
margin-bottom: 0;
}
.scorm-page .reply-item .ri-reply {
border-bottom-color: transparent;
margin-bottom: 0;
padding-bottom: 0;
}
.scorm-page .reply .add-reply {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.scorm-page .comment-item .owner-action{
background-color: transparent;
}
/*-----------Footer-new-------------------*/
#footer-new {
background: #0B0B3B;
color: #fff;
padding: 48px 0;
position: relative;
}
.social-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.social-footer ul > li > a {
border-radius: 100%;
background: #135BEC;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.title-company {
line-height: 24px;
white-space: nowrap;
}
.info-company{
font-size: 12px;
line-height: 20px;
margin-top: 15px;
}
.footer-block-title-new {
font-size: 18px;
font-weight: 700;
position: relative;
padding-bottom: 20px;
margin-top: 0;
margin-bottom: 15px;
position: relative;
}
.footer-block-title-new i {
font-size: 14px;
font-weight: normal;
}
.footer-block-title-new::before {
content: '';
border-radius: 4px;
background: #08F;
width: 50px;
height: 4px;
position: absolute;
bottom: 0;
left: 0;
}
.footer-block-list > li > a {
color: white;
font-size: 12px;
font-weight: 400;
line-height: 20px;
display: block;
padding-bottom: 5px;
}
.footer-block-list {
list-style: none;
margin: 0;
padding: 0;
}
.gphd {
color: #94A3B8;
font-size: 12px;
font-weight: 400;
line-height: 20px;
}
.footer-middle {
border-bottom: 1px solid rgb(35, 35, 116);
padding-bottom: 30px;
}
.footer-bottom {
padding-top: 20px;
}
.service-other {
color: #08F;
font-size: 24px;
font-weight: 700;
line-height: 30px;
margin-bottom: 20px;
}
.footer-bottom .item .text-center {
font-size: 13px;
margin-top: 5px;
}
.click-plus.active i::before {
content: "\f068";
}
@media (max-width: 900px) {
.footer-middle .footer-block.col-md-3 {
width: 100%;
}
.footer-middle .footer-block.col-md-5{
padding-left: 0;
}
.footer-middle .footer-block.col-md-5:not(.col-sm-6){
width: 60%
}
.footer-middle .footer-block.col-md-4 {
width: 40%;
}
}
@media screen and (max-width: 767px) {
.footer-middle .footer-block {
width: 100% !important;
padding: 0;
}
#footer-new {
padding: 20px 0;
}
}
@media screen and (max-width: 600px) {
.footer-bottom .item .text-center,
.service-other{display: none}
.footer-bottom .item img {height: auto}
}
@media screen and (max-width: 480px) {
.footer-image-app{
width: 52%;
padding-bottom: 6px;
padding-top: 9px;
}
}
/*-----------EndFooter-new--------*/
.turn-edit-bt {
background: #ccc none repeat scroll 0 0;
border-radius: 5px;
display: block;
height: 30px;
line-height: 30px;
padding: 0 20px;
position: absolute;
right: 0;
text-align: center;
top: 20px;
}
.course-outline {
margin: 30px 0 0;
}
/* ------- Teacher tooltip ------- */
.teacher-tooltip {
background: #ddd none repeat scroll 0 0;
border-radius: 5px;
display: none;
padding: 8px;
position: absolute;
width: 220px;
z-index: 9;
}
.teacher-tooltip-inner {
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
}
.teacher-tooltip-image {
background: #ddd;
height: 160px;
margin: 0 0 10px;
overflow: hidden;
}
.teacher-tooltip-name {
font-size: 16px;
margin: 10px 0;
}
.teacher-tooltip-des {
font-size: 13px;
margin: 10px 0;
}
/* --------- Playlist hover --------- */
.struct-menu {
position: relative;
background-color: white;
border-radius: 8px;
}
.struct-menu.plshow{
border-radius: 8px 5px 0 0;
}
.scorm-page .hm-player-header .struct-menu-title {
color: #1E2939;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 22px;
height: auto;
padding: 8px 20px 8px 10px;
display: flex;
align-items: center;
gap: 5px;
}
/* ----------- Pie chart ----------- */
.percent-complete-block {
box-shadow: 2px 2px 3px 0 rgba(234, 232, 232, 0.75);
margin: 0 0 20px;
}
.percent-complete-title {
font-size: 16px;
margin: 0 0 20px;
}
.scorm-package-complete {
margin-top: 25px;
font-size: 14px;
}
.scorm-package-complete .learn-progress-bar .progress {
height: 10px;
border-radius: 0;
box-shadow: none;
background-color: #D4D4D4;
}
.scorm-package-complete .learn-progress {
position: relative;
padding-top: 5px;
}
.scorm-package-complete .percent-complete-title {
margin: 0;
font-size: 14px;
}
.scorm-package-complete .learn-progress span.archive-poin {
width: 2px;
height: 10px;
position: absolute;
background-color: white;
right: 5%;
top: 5px;
}
.scorm-package-complete .learn-progress span.archive-award {
color: #d4d4d4;
font-size: 22px;
position: absolute;
top: -18px;
right: 0;
}
.scorm-package-complete .learn-progress span.archive-award.archived {
color: #2a70b8;
}
.label{
color: #505050;
text-align: left;
}
#live-poll-area {
overflow: auto;
}
.graph-container {
display: block;
float: left;
margin-right: 20px;
}
.canvas .graph-container {
display: block;
}
.graph-container .graph {
width: 100px;
margin: 0 auto 25px auto;
}
.graph-container .graph canvas {
max-width: 100px;
height: auto;
}
.bar-chart {
list-style-type: none;
margin: 0 auto;
padding: 0;
max-width: 244px;
}
.bar-chart li {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.45;
overflow: auto;
}
.bar-chart span {
display: block;
}
.bar-chart .label {
font-weight: 700;
width: 70%;
float: left;
}
.bar-chart .percentage {
width: 30%;
float: right;
font-size: 12px;
text-align: right;
}
.bar-chart .bar-track {
clear: both;
display: block;
background: #e6f0f2;
box-shadow: 0 2px 0 #cccccc;
height: 5px;
overflow: visible;
margin-bottom: 20px;
}
.bar-chart .bar {
display: block;
height: 5px;
min-width: 1%;
}
.bar-chart .answer-0 .bar {
background-color: #ff7e00;
}
.bar-chart .answer-1 .bar {
background-color: #e6e6e6;
}
.bar-chart .answer-2 .bar {
background-color: #f15637;
}
.bar-chart .answer-3 .bar {
background-color: #8b1851;
}
/* --------- Modal --------- */
.hocmai-modal{
font-size: 13px;
}
.hocmai-modal .modal-header {
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
padding: 10px 15px;
}
.hocmai-modal .modal-title {
font-size: 16px;
font-weight: normal;
padding-right: 15px;
text-align: center;
text-transform: uppercase;
}
.hocmai-modal .modal-content {
border-radius: 0;
}
.hocmai-modal .modal-footer{
padding: 10px 15px;
}
.modal-md{
max-width: 450px;
}
.login-box-left {
float: left;
padding-right: 5%;
width: 50%;
}
.login-box-right {
float: right;
padding-left: 5%;
width: 50%;
}
.lbt {
font-size: 13px;
margin: 0 0 15px;
}
.login-element-wr {
margin: 0 0 15px;
}
.edit-login {
height: 30px;
padding: 3px 6px;
width: 100%;
}
.social-login {
list-style: outside none none;
margin: 0;
padding: 0;
}
.login-register {
font-size: 14px;
}
.social-login > li {
margin: 0 0 5px;
}
.login-forgot-pass {
text-align: center;
margin-top: 10px;
font-size: 15px;
}
.login-forgot-pass a {
font-size: 15px;
}
.login-forgot {
display: inline-block;
font-size: 12px;
margin: 2px 0 0;
}
.warning-ans-wr {
float: left;
max-width: 60%;
padding: 8px 0;
text-align: left;
}
label{
font-weight: normal;
}
.warning-ans-wr > input {
float: left;
margin: 2px 5px 2px 0;
}
.warning-ans-wr label {
font-size: 13px;
margin: 0;
}
.btn{
font-size: 13px;
}
.btn-primary {
background-color: #2a70b8;
border-color: #337ab7;
}
.btn-cancel {
background-color: #e0e0e0;
border-color: #ccc;
}
.control-group {
margin-bottom: 10px;
}
.modal-body .control-group:last-child{
margin-bottom: 0;
}
.control-group label {
float: left;
font-weight: normal;
line-height: 30px;
min-width: 135px;
margin: 0;
}
.control-group textarea,
.control-group input[type="text"],
.control-group input[type="email"],
.control-group select{
background: #fff none repeat scroll 0 0;
border: 1px solid #aaa;
border-radius: 4px;
padding: 2px 8px;
width: 283px;
}
.control-group textarea.error,
.control-group input[type="text"].error,
.control-group input[type="email"].error,
.control-group select.error,
.control-group .error .select2-selection{
background: #ffe9e9 none repeat scroll 0 0;
border-color: #cc3333;
}
.control-group .error-message {
color: red;
font-style: italic;
line-height: 1.25;
margin-top: 5px;
}
.control-group textarea.valid,
.control-group input[type="text"].valid,
.control-group input[type="email"].valid,
.control-group select.valid,
.control-group .valid .select2-selection{
background: #cdfccd none repeat scroll 0 0;
border-color: #54b551;
}
.control-group textarea{
height: 108px;
}
.control-group input[type="text"], .control-group input[type="email"], .control-group select{
height: 28px;
width: 100%;
}
.control-group input[type="checkbox"],
.control-group input[type="radio"]{
float: left;
margin: 14px 0;
}
.control-mwr{
float: right;
width: 280px;
}
.reg-submit {
background: #31a9a3 none repeat scroll 0 0;
border: medium none;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
font-weight: normal;
height: 34px;
padding: 8px 10px;
text-transform: uppercase;
width: 125px;
}
/* --------- Relate course --------- */
.relate-course {
background: #f5f5f5 none repeat scroll 0 0;
box-shadow: -1px 2px 2px 0 rgba(216, 216, 216, 0.75);
font-size: 12px;
margin: 0 0 15px;
padding: 10px 8px;
}
.relate-course-block-title {
font-size: 14px;
font-weight: 500;
margin: 0 0 20px;
}
.relate-course-image {
float: left;
margin: 0 10px 10px 0;
width: 150px;
}
.relate-course-name {
font-size: 12px;
font-weight: bold;
margin: 0 0 5px;
min-height: 5em;
text-transform: uppercase;
}
.relate-course-name a{
color: inherit;
}
.relate-course-more {
background: #f5f5f5 none repeat scroll 0 0;
box-shadow: -1px 2px 2px 0 rgba(216, 216, 216, 0.75);
cursor: pointer;
font-size: 13px;
font-weight: 500;
margin: 0 0 15px;
padding: 10px;
text-align: center;
}
.course-group-name {
font-size: 14px;
font-weight: 500;
}
.course-group-name > span {
background: #2a70b8 none repeat scroll 0 0;
color: #fff;
display: inline-block;
line-height: 29px;
min-width: 180px;
padding: 0 15px;
}
.course-group-des {
font-size: 13px;
margin: 15px 0;
}
.hm-player-wr {
border-radius: 10px;
overflow: hidden;
}
.nav.nav-tabs.scorm-content-tabs {
border-color: #E9EDF2;
margin-top: 20px;
}
.nav.nav-tabs.scorm-content-tabs > li > a {
display: flex;
align-items: center;
gap: 5px;
color: #6A7282;
font-size: 12px;
font-weight: 600;
line-height: 20px;
border: 0;
padding: 16px;
border-bottom: 3px solid transparent;
}
.nav.nav-tabs.scorm-content-tabs > li.active > a,
.nav.nav-tabs.scorm-content-tabs > li:hover > a {
background-color: transparent;
border-color: #135BEC;
color: #135BEC;
}
.nav.nav-tabs.scorm-content-tabs > li:hover svg path,
.nav.nav-tabs.scorm-content-tabs > li.active svg path {
fill: #135BEC;
}
#subAllowTimeModal .modal-dialog {
width: 450px;
}
/*hmpro*/
/* ------------- Learn page --------------- */
#learn-page {
background: #2c2f37 none repeat scroll 0 0;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 129;
}
#learn-page.with-sidebar-second .content-wr > .content {
margin-right: 326px;
}
#player-container{
background: #2c2f37 none repeat scroll 0 0;
color: #84848c;
position: relative;
}
#player-container::before {
background: transparent url("../images/timeline-bar.png") repeat-y scroll 0 0;
content: "";
display: block;
height: 100%;
position: fixed;
top: 0;
width: 5px;
}
.player-header {
height: 50px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.player-rp {
background: #000 none repeat scroll 0 0;
bottom: 60px;
position: absolute;
top: 50px;
width: 100%;
}
.player-footer {
bottom: 0;
height: 60px;
left: 0;
position: absolute;
width: 100%;
}
#player-container::before,
.scorm-prev, .scorm-next{
left: 180px;
}
.scorm-prev, .scorm-next, .scorm-view-back,
.learn-panel-close, .scorm-learn-count{
color: #84848c;
display: block;
position: absolute;
text-align: center;
}
.scorm-view-back:active, .scorm-view-back:focus,
.scorm-prev:active, .scorm-prev:focus,
.scorm-next:active, .scorm-next:focus,
.learn-panel-close:active, .learn-panel-close:focus {
color: #335d82;
text-decoration: none;
}
.scorm-view-back:hover,
.scorm-prev:hover, .scorm-next:hover,
.learn-panel-close:hover
.scorm-learn-count:hover{
color: #FFF;
}
.scorm-view-back,
.scorm-prev{
font-size: 13px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-top: -10px;
padding-left: 22px;
top: 50%;
}
.scorm-view-back {
left: 15px;
}
.scorm-view-back > i,
.scorm-prev > i{
left: 0;
position: absolute;
}
.scorm-view-back > i {
font-size: 15px;
margin-top: -7px;
top: 50%;
}
.scorm-prev > i {
background: #000 none repeat scroll 0 0;
height: 20px;
line-height: 18px;
margin-left: -8px;
top: 0;
width: 20px;
}
.scorm-next {
background: #393c44 none repeat scroll 0 0;
border: 3px solid #000;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);
color: #ababae;
font-size: 12px;
height: 30px;
line-height: 24px;
margin-left: -53px;
margin-top: -16px;
text-transform: uppercase;
top: 50%;
width: 110px;
}
.scorm-next:before, .scorm-next:after {
border-style: solid;
content: "";
display: block;
height: 0;
position: absolute;
top: 100%;
width: 0;
z-index: 2;
}
.scorm-next::before {
border-color: #000 transparent transparent;
border-width: 10px 12px 0;
content: "";
left: 50%;
margin-left: -12px;
}
.scorm-next::after {
border-color: #393c44 transparent transparent;
border-width: 7px 8px 0;
content: "";
left: 50%;
margin-left: -8px;
}
.scorm-learn-count {
display: block;
font-size: 13px;
font-weight: 700;
left: 10px;
line-height: 20px;
margin-top: -10px;
top: 50%;
}
.learn-panel-close {
font-size: 22px;
margin-top: -11px;
right: 10px;
top: 50%;
}
.learn-panel-close:hover{
color: #FFF;
}
#player-container .player-footer .scorm-fb {
margin-top: -15px;
position: absolute;
right: 30px;
top: 50%;
}
.hide-sidebar-second .player-footer .scorm-fb {
right: 356px;
margin-top: -15px;
position: absolute;
top: 50%;
}
/* --- learn page outline --- */
.scorm-section-right-action:before{
background: #e6e5e5 none repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 20px;
position: absolute;
top: 0;
width: 1px;
}
.lesson-process-wr:not(.process-percent_100) {
background-color: #fff;
border: 1px solid #7A828C;
border-radius: 100%;
display: block;
width: 13px;
height: 13px;
left: 24px;
margin-left: -10px;
position: absolute;
top: 11px;
z-index: 9;
background: conic-gradient(#22C55E var(--percent), #fff 0);
}
.lesson-process-wr:not(.process-percent_0) {
border-color: #22C55E;
}
.lesson-process-wr.process-percent_100 {
content: '';
width: 13px;
height: 13px;
position: absolute;
top: 10px;
left: 14px;
background-image: url('data:image/svg+xml,');
}
.lesson-process-percent {
background-color: #fff;
border-radius: 8px;
display: block;
height: 16px;
text-align: center;
width: 16px;
}
.lesson-process-percent.percent-50 {
background-color: #54b551;
border-radius: 8px 0 0 8px;
width: 8px;
}
.lesson-process-percent.percent-100 {
background-color: #54b551;
border-radius: 8px;
}
.learn-lesson-wr .lesson-process-percent .fa,
.lesson-process-wr .lesson-process-percent .fa {
color: #fff;
display: block;
font-size: 11px;
line-height: 16px;
}
.learn-lesson-wr:hover .lesson-process-percent .fa,
.lesson-process-wr:hover .lesson-process-percent .fa{
color: #fff;
}
.scorm-page .hm-player-header {
position: absolute;
top: 5px;
right: 5px;
z-index: 9;
background: transparent;
box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07);
width: 240px;
}
.scorm-page .scorm-detail-documents.AI-Exam > li {
width: 50%;
float: left;
margin: 0 0 15px;
}
/* -- Outline -- */
.scorm-right-action {
display: flex;
align-items: center;
}
/* --- learn page left --- */
.course-outline{
/*background: #fff none repeat scroll 0 0;
box-shadow: 0 2px 3px 0 rgba(234, 232, 232, 0.75);*/
}
.learn-page-info {
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.learn-page-tabs {
background: #FFF;
border-bottom: 1px solid #e2e2e2;
margin: 0;
padding: 0;
}
.learn-page-tabs .lpt-tt {
display: none;
}
.learn-page-tabs .fa{
font-size: 19px;
}
.learn-page-tabs > li {
float: left;
list-style: outside none none;
text-align: center;
width: 20%;
}
.learn-page-tabs > li > a {
border-right: 1px solid #e2e2e2;
display: block;
padding: 10px;
}
.learn-page-tabs > li.active > a,
.learn-page-tabs > li > a:hover{
background: #2a86c7;
color: #FFF;
}
.learn-page-tabs > li:last-child > a{
border-right: 0 none;
}
.learn-page-panels {
border-left: 1px solid #e2e2e2;
bottom: 35px;
overflow-y: auto;
position: absolute;
top: 40px;
width: 100%;
}
.scorm-learn-panel-content {
padding: 10px 15px;
}
.learn-scorm-summary {
font-size: 13px;
text-align: justify;
}
.learn-scorm-documents {
margin: 15px 0 0;
padding: 0;
}
.learn-scorm-documents > li {
border: 1px solid #bbb;
font-size: 14px;
font-weight: 300;
list-style: outside none none;
margin: 15px 0 0;
}
.learn-scorm-document {
color: #333;
display: block;
padding: 8px 34px 8px 10px;
position: relative;
}
.learn-scorm-document .fa-download, .learn-scorm-document em {
border-left: 1px solid #bbb;
bottom: 0;
color: #5ea5d5;
display: block;
padding: 10px;
position: absolute;
right: 0;
top: 0;
}
.learn-scorm-document em {
font-size: 13px;
font-weight: bold;
}
/* /hmpro*/
/* Block link */
#link-block {
margin-top: 40px;
}
#link-block ul {
list-style: none;
padding-left: 0px;
margin-top: 25px;
}
#link-block ul li {
height: 25px;
margin: 15px 0;
}
#link-block ul li a,
#link-block ul li a:hover,
#link-block ul li a:visited {
color: #2a70b8;
display: block;
width: 25px;
height: 25px;
position: relative;
}
a.link-facebook {
background: transparent url("/theme/new/images/social/facebook.png") no-repeat scroll left center;
}
a.link-twitter {
background: transparent url("/theme/new/images/social/twitter.png") no-repeat scroll left center;
}
a.link-youtube {
background: transparent url("/theme/new/images/social/youtube.png") no-repeat scroll left center;
}
a.link-google {
background: transparent url("/theme/new/images/social/google.png") no-repeat scroll left center;
}
a.link-facebook:hover {
background: transparent url("/theme/new/images/social/facebook-active.png") no-repeat scroll left center;
}
a.link-twitter:hover {
background: transparent url("/theme/new/images/social/twitter-active.png") no-repeat scroll left center;
}
a.link-youtube:hover {
background: transparent url("/theme/new/images/social/youtube-active.png") no-repeat scroll left center;
}
a.link-google:hover {
background: transparent url("/theme/new/images/social/google-active.png") no-repeat scroll left center;
}
#link-block a span {
position: absolute;
/* height: 34px; */
font-size: 12px;
top: 12px;
color: #000000;
background: #FFFFFF;
border: 2px solid #DDDDDD;
padding: 0 10px;
line-height: 24px;
text-align: left;
visibility: hidden;
border-radius: 5px;
/* white-space: nowrap; */
max-width: 280px;
width: 280px;
}
#link-block a span:before {
content: '';
position: absolute;
top: 12px;
right: 100%;
margin-top: -10px;
width: 0;
height: 0;
border-right: 10px solid #DDDDDD;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#link-block a span:after {
content: '';
position: absolute;
top: 12px;
right: 100%;
margin-top: -7px;
width: 0;
height: 0;
border-right: 7px solid #ffffff;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
#link-block a:hover span {
visibility: visible;
opacity: 1;
left: 100%;
/* top: 0; */
margin-top: -14.5px;
margin-left: 15px;
z-index: 999;
}
#link-block .link-title {
display: block;
padding-top: 5px;
text-transform: uppercase;
}
.fl-learn-now {
background-color: #ff8a00;
border-color: #ff8a00;
}
/* Notice block */
#notice-block {
display: block;
}
.notice-button {
cursor: pointer;
display: inline-block;
height: 34px;
width: 125px;
background-color: #b7b8b7;
border-radius: 5px;
color: white;
border: 1px solid #b7b8b7;
padding: 5px 12px;
font-size: 16px;
font-weight: 500;
}
.notice-button span {
margin-left: 5px;
}
.notice-button i {
font-size: 18px;
vertical-align: top;
}
.notice-button.active {
background-color: #FFFFff;
}
.notice-button.active i {
color: #ff902c;
}
.notice-button.active span {
color: #505050;
}
.notice-button:hover,
.notice-button.active:hover {
background-color: #0072bc;
border: 1px solid #0072bc;
color: white;
}
.notice-button.active:hover span {
color: white;
}
/* teacher info block */
#teacher-info-block {
margin-top: 70px;
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.ti-list {
margin-top: 10px;
}
.ti-image {
display: inline-block;
width: 25%;
overflow: hidden;
position: relative;
height: 110px;
}
.ti-image img {
width: 110px;
float: left;
}
.ti-short {
width: 74%;
display: inline-block;
vertical-align: top;
text-align: justify;
}
.ti-social ul {
display: block;
list-style: none;
padding: 0;
margin-top: 15px;
}
.ti-social ul li {
display: inline-block;
margin-right: 10px;
}
.ti-social ul li a {
display: inline-block;
width: 25px;
height: 25px;
}
.ti-mid {
margin: 15px 0 25px 0;
text-align: justify;
width: 99%;
}
.ti-bot {
margin: 5px 0;
}
/*------- my course ------*/
.course-wrapper .modal-body-title {
font-size: 50px;
font-weight: 300;
text-align: center;
color: #2a70b8;
}
.course-wrapper .cw-children .registed-courses .title{
font-size: 16px;
margin: 10px 0;
color: #2a70b8;
font-weight: 600;
text-transform: uppercase;
}
.course-wrapper .cw-children .registed-courses .title.title-2 {
color: #54b551;
}
.course-wrapper .tbl-courses {
width: 100%;
font-size: 13px;
text-align: center;
}
.course-wrapper .tbl-courses thead tr {
height: 36px;
background-color: #e1e1e1;
}
.course-wrapper .tbl-courses thead th,
.course-wrapper .tbl-courses tbody td {
border-right: 2px solid white;
text-align: center;
}
.course-wrapper .tbl-courses tbody td span {
color: #ffa200;
}
.course-wrapper .tbl-courses tbody tr {
height: 36px;
}
.course-wrapper .tbl-courses tbody tr:nth-child(even) {
background-color: #ececec;
}
.course-wrapper .btn-fl.extent-trial {
-webkit-box-shadow: 0px 2px 0px #fb7b7b;
-moz-box-shadow: 0px 2px 0px #fb7b7b;
box-shadow: 0px 2px 0px #fb7b7b;
background: #ca0606;
}
.course-wrapper .btn-fl.extent-trial:hover {
background: #ca0606;
color: #555555;
}
.course-wrapper .btn-fl.buy {
-webkit-box-shadow: 0px 2px 0px #286090;
-moz-box-shadow: 0px 2px 0px #286090;
box-shadow: 0px 2px 0px #286090;
background: #2a70b8;
}
.course-wrapper .btn-fl.buy:hover {
background: #2a70b8;
color: #555555;
}
.course-wrapper .btn-fl {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 2px 0px #bb7700;
-moz-box-shadow: 0px 2px 0px #bb7700;
box-shadow: 0px 2px 0px #bb7700;
color: #ffffff;
font-size: 13px;
background: #ffa200;
padding: 3px 12px 3px 12px;
margin: 0 5px;
text-decoration: none;
min-width: 85px;
}
.course-wrapper .btn-fl:hover {
background: #ffa200;
text-decoration: none;
color: #555555;
}
.course-wrapper .cw-children .other-course .other-title {
font-size: 16px;
margin: 10px 0;
color: #ffa200;
font-weight: 600;
}
.course-wrapper .nav-tabs {
border: none;
height: 36px;
}
.course-wrapper .nav-tabs > li {
margin-bottom: 0px;
width: 16.66%;
border-right: 4px solid white;
background-color: #e1e1e1;
text-align: center;
height: 36px;
}
.course-wrapper .nav-tabs > li.active,
.course-wrapper .nav-tabs > li:hover
{
background-color: #ffa200;
}
.course-wrapper .nav-tabs>li.active>a,
.course-wrapper.nav-tabs>li.active>a:focus,
.course-wrapper .nav-tabs>li.active>a:hover {
color: #555;
border: none;
background-color: #ffa200;
}
.course-wrapper .nav-tabs > li a {
background-color: transparent;
border: none;
height: 36px;
font-size: 14px;
color: #555555;
padding: 9px;
font-weight: 600;
}
.course-wrapper .list-head {
margin-top: 30px;
font-size: 18px;
height: 25px;
width: 100%;
}
.course-wrapper .list-head .lh-name {
min-width: 40%;
display: inline-block;
}
.course-wrapper .list-head .lh-action {
display: inline-block;
text-align: center;
min-width: 10%;
}
.course-wrapper .course-container {
padding: 0;
width: 100%;
font-size: 13px;
margin-top: 15px;
}
.course-wrapper .course-container tr {
height: 36px;
}
.course-wrapper .course-container tr td {
padding: 5px;
font-size: 13px;
line-height: 1.5;
}
.course-wrapper .course-container button {
font-size: 13px;
}
.course-wrapper .free-exercise {
margin-top: 30px;
}
.course-wrapper .course-container tbody tr:nth-child(even){
background-color: #ececec;
}
.course-wrapper .info {
color: red;
padding-top: 10px;
}
.course-wrapper .registed-courses {
padding-bottom: 30px;
}
/*-----mega menu------*/
.subject-icon {
background: transparent none no-repeat scroll center center;
float: left;
height: 18px;
text-indent: -999em;
width: 18px;
}
.geography-icon{
background-image: url("../images/subject-16-icon.png");
}
.chemistry-icon{
background-image: url("../images/subject-18-icon.png");
}
.english-icon{
background-image: url("../images/subject-22-icon.png");
}
.history-icon{
background-image: url("../images/subject-23-icon.png");
}
.biology-icon{
background-image: url("../images/subject-24-icon.png");
}
.math-icon {
background-image: url("../images/subject-27-icon.png");
}
.literature-icon{
background-image: url("../images/subject-28-icon.png");
}
.physics-icon{
background-image: url("../images/subject-29-icon.png");
}
.active-menu .pie {
display: inline-block;
vertical-align: middle;
}
.active-menu .pie .pie-part {
height: 3px;
background-color: #2a70b8;
width: 30px;
margin: 4px;
display: block;
}
.active-menu span {
padding-right: 5px;
}
.rating-block {
margin: 20px 0 0;
padding: 10px 0;
}
.qt-prefix{
color: #ff7e00;
font-weight: 400;
}
#learn-page .ui-resizable-e {
background: #fff url("../images/three-dots.png") no-repeat scroll center center;
cursor: e-resize;
display: block;
height: 60px;
margin-top: -30px;
opacity: 0.95;
position: absolute;
right: 0;
top: 50%;
width: 15px;
z-index: 9;
}
#learn-page.hide-sidebar-second .ui-resizable-e{
display: none;
}
#learn-page .ui-resizable-e::before {
border-color: transparent transparent #fff;
border-style: solid;
border-width: 0 0 18px 15px;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
bottom: 100%;
width: 0;
}
#learn-page .ui-resizable-e::after {
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 0 15px 18px 0;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
top: 100%;
width: 0;
}
#learn-page .qa_form{
padding: 10px 0 5px;
}
#learn-page .qa_form ul.note{
clear: both;
padding: 0;
}
#scorm-status-helper {
border-bottom: 1px solid #c3c3c3;
margin: 0 0 1px;
padding: 8px;
}
#scorm-status-helper > li {
float: left;
list-style: outside none none;
margin-right: 40px;
}
#scorm-status-helper .lesson-process-wr {
display: inline-block;
float: left;
margin-left: 0;
margin-right: 5px;
position: static;
}
.subject-icon {
background: transparent none no-repeat scroll center center;
float: left;
height: 18px;
text-indent: -999em;
width: 18px;
}
.geography-icon{
background-image: url("../images/subject-16-icon.png");
}
.chemistry-icon{
background-image: url("../images/subject-18-icon.png");
}
.english-icon{
background-image: url("../images/subject-22-icon.png");
}
.history-icon{
background-image: url("../images/subject-23-icon.png");
}
.biology-icon{
background-image: url("../images/subject-24-icon.png");
}
.math-icon {
background-image: url("../images/subject-27-icon.png");
}
.literature-icon{
background-image: url("../images/subject-28-icon.png");
}
.physics-icon{
background-image: url("../images/subject-29-icon.png");
}
#scorm-view-comments {
background: #fff none repeat scroll 0 0;
box-shadow: 0 2px 3px 0 rgba(234, 232, 232, 0.75);
}
.active-search-box {
display: none;
}
.mobile-notify {
display: none;
}
.account-icon {
display: none;
}
.m-action-tool {
display: none;
}
.social-btn .social-icon {
padding: 10px 0 10px 5px;
display: inline-block;
font-size: 20px;
border-right: 1px solid rgba(0, 0, 0, 0.2);
margin-right: 10px;
width: 50px;
text-align: center;
font-weight: 700;
}
.social-btn {
margin-top: 10px;
color: #fff !important;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
padding: 0 20px 0 0;
display: block;
}
.social-btn.fb-login {
background: #2b85c3;
}
.social-btn.fb-login:hover {
background: #2979b0;
}
.social-btn.gg-login {
background: #d03a3c;
}
.social-btn.gg-login:hover {
background: #b73638;
}
.social-btn.yh-login .social-icon {
background: transparent url("../images/yahoo-icon.png") no-repeat scroll center center;
background-size: 23px;
text-indent: 9999em;
}
.social-btn.yh-login {
background: #4101AF;
}
.social-btn.yh-login:hover {
background: #4c0282;
}
.login-box-left, .login-box-right {
padding: 20px 20px 10px;
}
.login-box-right {
border-left: 1px solid #d3d3d3;
}
.login-element-wr input {
border-radius: 5px;
padding: 10px 10px 10px 40px;
height: auto;
outline: 0;
font-size: 15px;
color: #355368;
border: 1px solid #a9a9a9;
}
.login-element-wr {
position: relative;
}
.login-element-wr:before {
font-family: 'FontAwesome';
position: absolute;
left: 10px;
top: 0;
font-size: 18px;
color: #d3d3d3;
width: 20px;
z-index: 2;
text-align: center;
line-height: 1;
margin-top: 10px;
}
.input-username:before {
content: "\f007";
}
.input-password:before {
content: "\f023";
}
.login-element-wr input:focus {
border-color: #2b85c3;
}
.login-element-wr input:focus i {
color: #B5C3D4;
}
.btn-login {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
border: none;
background-color: #2A70B8;
border-radius: 5px;
color: white;
display: block;
font-size: 16px;
}
.modal-footer, .modal-footer a {
font-size: 15px;
}
.notify-phone {
color: #cc3333;
font-weight: bold;
text-align: center;
margin-right: 50%;
}
#loginModal .modal-dialog {
max-width: 650px;
width: 100%;
}
.qt-prefix{
color: #ff7e00;
font-weight: 400;
}
#learn-page .ui-resizable-e {
background: #fff url("../images/three-dots.png") no-repeat scroll center center;
cursor: e-resize;
display: block;
height: 60px;
margin-top: -30px;
opacity: 0.95;
position: absolute;
right: 0;
top: 50%;
width: 15px;
z-index: 9;
}
#learn-page.hide-sidebar-second .ui-resizable-e{
display: none;
}
#learn-page .ui-resizable-e::before {
border-color: transparent transparent #fff;
border-style: solid;
border-width: 0 0 18px 15px;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
bottom: 100%;
width: 0;
}
#learn-page .ui-resizable-e::after {
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 0 15px 18px 0;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
top: 100%;
width: 0;
}
#learn-page .qa_form{
padding: 10px 0 5px;
}
#learn-page .qa_form ul.note{
clear: both;
padding: 0;
}
#scorm-status-helper {
border-bottom: 1px solid #c3c3c3;
margin: 0 0 1px;
padding: 8px;
}
#scorm-status-helper > li {
float: left;
list-style: outside none none;
margin-right: 40px;
}
#scorm-status-helper .lesson-process-wr {
display: inline-block;
float: left;
margin-left: 0;
margin-right: 5px;
position: static;
}
#scorm-view-comments {
background: #fff none repeat scroll 0 0;
box-shadow: 0 2px 3px 0 rgba(234, 232, 232, 0.75);
}
.active-search-box {
display: none;
}
.mobile-notify {
display: none;
}
.account-icon {
display: none;
}
.m-action-tool {
display: none;
}
.hotline-number {
padding-top: 11px;
padding-left: 75px;
}
.hotline-number:before {
background: rgba(0,0,0,0) url("//hocmai.vn/public/home/img/hotline.png") no-repeat scroll 0 0;
content: "";
display: block;
height: 35px;
left: 0;
top: 57px;
position: absolute;
width: 35px;
}
.hotline-number li {
padding: 0 0 10px 0;
}
.hotline-number span.lbl {
min-width: 160px;
display: inline-block;
}
.download-link li {
width: 45%;
float: left;
display: inline-block;
font-size: 14px;
}
.download-iphone:before {
background: rgba(0, 0, 0, 0) url("//hocmai.vn/public/home/img/app-store-icon.png") no-repeat scroll 0 7px;
background-size: 35px 35px;
content: "";
display: inline-block;
width: 48px;
height: 48px;
float: left;
}
.download-link span {
display: inline-block;
line-height: 48px;
}
.download-android:before {
background: url('../images/google_play.png') no-repeat scroll 0 0;
content: "";
display: inline-block;
width: 36px;
height: 36px;
float: left;
margin-top: 10px;
}
.download-android span {
padding-left: 10px;
}
/*--- update info sticky ---*/
.update-info-stick {
width: 100%;
display: block;
background-color: #7644C3;
padding: 10px 0 10px 0;
}
.update-info-wrap {
padding: 0 100px 0 0;
}
.update-info-cta {
line-height: 30px;
color: white;
float: left;
font-size: 14px;
}
a.update-info-cta-button {
background-color: transparent;
height: 30px;
line-height: 28px;
border: 1px solid white;
color: white;
font-size: 14px;
padding: 0 20px;
text-align: center;
float: right;
}
/*--- end update info sticky ---*/
/*--------hmpro start--------*/
.wrapper-pro {
margin: 0 auto;
padding-left: 15px!important;
padding-right: 15px!important;
position: relative;
width: 1170px;
}
.wrapper-pro .scorm-detail-documents > li {
/*width: 186px;*/
}
.wrapper-pro .scorm-detail-documents.with-2 li{
width: 280px;
}
.wrapper-pro .scorm-detail-documents.with-3 li{
/*width: 186px;*/
width: 49%;
}
.wrapper-pro .scorm-detail-documents.with-4 li{
width: 49%;
float: left;
}
.scorm-category-8{
padding: 0;
}
.category-8{
width: 100% !important;
}
.wrapper-pro .scorm-detail-documents.with-5 li{
width: 186px;
}
.wrapper-pro .scorm-detail-documents.with-6 li{
width: 186px;
}
.scorm-category-8 li{
width: 49%;
text-align: left;
display: inline-block;
}
.wrapper-pro .scorm-detail-documents.with-4 li:nth-child(3n){
float: left;
margin-right: 0;
text-align: left;
}
.wrapper-pro .scorm-detail-documents.with-4 li:nth-child(3n+1) {
float: left;
clear: both;
text-align: left;
}
.wrapper-pro .scorm-document-name {
padding-left: 0;
}
.full-wrapper .course-outline {
margin: 0;
}
.full-wrapper .struct-menu {
height: 100%;
position: absolute;
right: 50px;
top: 0;
}
.full-wrapper .struct-menu-title {
background: transparent none repeat scroll 0 0;
border-radius: 4px 4px 0 0;
color: #84848c;
cursor: pointer;
display: block;
font-size: 13px;
font-weight: 500;
height: 30px;
left: 0;
line-height: 30px;
margin-top: -15px;
padding: 0 20px 0 38px;
position: relative;
top: 50%;
}
.full-wrapper .struct-menu-title:hover{
color: #fff;
}
.full-wrapper .struct-menu-title .fa{
font-size: 14px;
}
.full-wrapper .struct-menu .playlist {
background: #fff none repeat scroll 0 0;
border-top: 1px solid #999;
display: none;
padding: 10px 10px 10px 20px;
position: absolute;
right: -49px;
top: 100%;
width: 285px;
z-index: 9;
}
.wrapper-pro .bar-chart .answer-0 .bar {
background-color: #54b551;
}
.wrapper-pro .bar-chart .answer-1 .bar {
background-color: #bbb;
}
a.course-free-learn-bt{
background: #ff6c00 none repeat scroll 0 0;
}
a.course-free-learn-bt,
a.course-register-now.flbtshow,
a.course-register-now.flbtshow:hover,
a.course-register-now.flbtshow:focus {
border-radius: 10px;
color: #fff;
display: block;
font-size: 16px;
font-weight: 500;
height: 35px;
line-height: 35px;
margin: 0 auto 12px;
text-transform: uppercase;
width: 185px;
}
a.course-register-now.flbtshow {
background: transparent none repeat scroll 0 0;
border: 1px solid #2a70b8;
color: #2a70b8;
}
a.course-register-now.flbtshow:hover, a.course-register-now.flbtshow:focus{
background: #2a70b8 none repeat scroll 0 0;
border: 1px solid #2a70b8;
color: #FFF;
}
.sticky-left {
float: left;
}
.sticky-left .smenu {
display: none;
}
.smenu {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
.smenu li {
float: left;
margin-right: 30px;
display: inline-block;
padding: 12px 0;
border-bottom: 3px solid transparent;
}
.smenu li:last-child {
margin-right: 0;
}
.smenu li.active {
border-bottom: 3px solid #2a70b8;
}
.smenu li a {
color: #515151;
}
.course-detail .smenu {
border-top: 2px solid #eaeaea;
}
.sticky-right {
float: right;
}
.group-study-title {
color: #2d2d2d;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
#group-study-block p {
margin-bottom: 3px;
}
.course-hr {
border-top: 1px solid #d3d3d3;
}
a.gv-facebook {
background: transparent url("/theme/new2/images/social/facebook2.png") no-repeat scroll left center;
}
a.gv-youtube {
background: transparent url("/theme/new2/images/social/youtube2.png") no-repeat scroll left center;
}
a.gv-google {
background: transparent url("/theme/new2/images/social/google2.png") no-repeat scroll left center;
}
#under-video {
border-top: 2px solid #eaeaea;
margin-top: 20px;
}
.content .rating-block {
margin: 0;
padding: 0;
}
.testinbt {
background: rgba(0, 0, 0, 0) url("../images/testinputbg_1.png") no-repeat scroll 0 0;
display: block;/* float: left; */
font-size: 13px;
font-weight: bold;
height: 45px;
line-height: 45px;
padding-left: 60px;
padding-right: 10px;
text-transform: uppercase;
}
.testinbt:after {
width: 8px;
height: 45px;
content: ' ';
margin-left: 10px;
position: absolute;
float: right;
background: url("../images/testinputbg_2.png") no-repeat right top;
}
.testinbt:last-child {
float: right;
}
.testinbt:first-child {
float: left;
}
a.ask-a-question {
position: absolute;
display: block;
text-align: center;
font-size: 12px;
height: 30px;
line-height: 24px;
margin-left: -53px;
margin-top: -13px;
text-transform: uppercase;
top: 50%;
left: 320px;
padding: 0;
}
a.ask-a-question span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
line-height: 20px;
background-color: #808080;
font-size: 18px;
font-weight: 900;
text-align: center;
vertical-align: middle;
margin-right: 3px;
margin-bottom: 2px;
}
#report-issues-form {
font-size: 13px;
}
#report-issues-form .form-group {
margin: 30px 0;
}
#report-issues-form .form-group > label {
font-weight: 700;
}
#report-issues-form .checkbox label, #report-issues-form .radio label {
line-height: 1.43;
}
#report-issues-form .form-control {
font-size: 13px;
}
#report-issues-form .form-group .radio {
padding-left: 20px;
}
.foreword {
margin-top: 20px;
color: #9e9e9e;
}
#report-issues-form .step {
display: none;
}
#report-issues-form .step.active {
display: block;
}
.ri-msg {
padding: 10px;
margin: 10px 0;
}
.signup-round a {
width: 106px;
height: 30px;
display: inline-block;
background: #f68b20;
border-radius: 3px;
box-shadow: 1px 1px 1px #004776;
text-align: center;
}
.errorbox {
text-align: center;
margin: 0 auto;
border: none;
}
.print_button input[type="submit"] {
background: #2A70B8;
color: #FFFFff;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
margin-right: 20px;
margin-top: 15px;
min-width: 80px;
}
.generalbox {
border: none;
line-height: 1.4;
}
.generalboxcontent h1, .generalboxcontent h1 a,
.generalboxcontent h1 span, .generalboxcontent h1 strong,
.generalboxcontent font, .generalboxcontent a {
color: #2a70b8 !important;
}
/*
MATHJAX STYLE
*/
.mjx-chtml {
display: inline-block!important;
}
.MJXc-display {
margin: 0 !important;
}
/*
END MATHJAX STYLE
*/
.gov-link {
padding-top: 0;
}
.gov-img {
width: 154px;
}
/*s-tuyendc*/
.small-screen{
display: none;
}
.learn-page-tabs > .small-screen{
width: 16.66667%;
}
.small-screen .learn-panel-close{
position: static;
padding-top: 18px;
}
.mobile-dc{
display: none;
}
/*e-tuyendc*/
/*---------------------------------*/
/*------------SideBanner-----------*/
/*---------------------------------*/
.SideBanner {
position: fixed;
top: 100px;
}
.banner-position-left {
left: 0;
}
.banner-position-right {
right: 0;
}
#lof_go_top:hover {
background-color: #C22500;
border: 3px solid #C22500;
}
#lof_go_top {
background: url(/course/images/back-to-top.png) 50% 50% no-repeat #bbb;
bottom: 50px;
display: none;
height: 45px;
position: fixed;
right: 12px;
width: 45px;
z-index: 99999;
cursor: pointer;
}
.footer-block{
position: relative;
}
.click-plus{
position: absolute;
right: 0;
top: 3px;
display: none;
z-index: 99999;
width: 30px;
height: 30px;
text-align: center;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 1120px) {
.SideBanner {
display: none;
}
}
.extension-addon{
display:none;
}
.view-more-addon {
text-align: center;
padding: 10px 10px 10px;
color: #2a70b8;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
margin-bottom: 10px;
}
.description-addon {
font-size: 12px;
padding-top: 5px;
color: #555;
padding-left: 9px;
}
a.cfl-cta {
display: block;
background: #41b867;
width: 185px;
margin: 5px auto 15px;
height: 50px;
font-size: 20px;
font-weight: bold;
color: #fff;
line-height: 50px;
border-radius: 9px;
box-shadow: 0 5px 0 #2d944e;
}
.mb_show{
display: none;
}
@media screen and (max-width: 980px) {
.pc_show{
display: none;
}
.mb_show{
display: block;
}
}
.popup-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.2);
opacity: 1;
filter: alpha(opacity=100);
}
.popup-backdrop .popup-loading-indicator {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 130px;
left: 50%;
margin-left: -50px;
-webkit-transition: all 0.3s,width 0s;
transition: all 0.3s,width 0s;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
filter: alpha(opacity=0);
}
.popup-backdrop.loading .popup-loading-indicator {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.popup-backdrop .popup-loading-indicator::after {
content: ' ';
display: block;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' version='1.1' x='0px' y='0px' width='41px' height='41px' viewBox='134 73 41 41' enable-background='new 134 73 41 41' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Crect x='0.5' y='0.5' display='none' fill='%23B8CC44' stroke='%23FFFFFF' width='315' height='291'/%3E%3Cpath id='bg_1_' opacity='0' fill='%23FFFFFF' d='M135.015,93.554c0.002-10.854,8.8-19.653,19.654-19.655 c10.856,0.002,19.653,8.802,19.655,19.657c-0.001,6.679-3.331,12.577-8.422,16.129c-3.184,2.223-7.056,3.525-11.232,3.526 C143.815,113.209,135.016,104.41,135.015,93.554z'/%3E%3Cpath opacity='0' fill='none' stroke='%232A98DB' stroke-width='6' d='M137.644,93.554c0.001-9.402,7.623-17.024,17.025-17.026 c9.404,0.002,17.025,7.625,17.026,17.028c0,5.785-2.886,10.896-7.295,13.972c-2.758,1.925-6.112,3.054-9.73,3.055 C145.267,110.58,137.645,102.959,137.644,93.554z'/%3E%3Cpath fill='none' stroke='%235FB6F5' stroke-width='5.28' stroke-linecap='round' stroke-linejoin='round' d='M142.114,105.059 c-4.002-4.376-5.601-10.721-3.64-16.765c1.318-4.052,4.011-7.271,7.39-9.312'/%3E%3C/svg%3E");
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
width: 50px;
height: 50px;
margin: 25px 0 0 25px;
}
@-moz-keyframes spin {0% {-moz-transform:rotate(0deg) }100% {-moz-transform:rotate(359deg) }}
@-webkit-keyframes spin {0% {-webkit-transform:rotate(0deg) }100% {-webkit-transform:rotate(359deg) }}
@-o-keyframes spin {0% {-o-transform:rotate(0deg) }100% {-o-transform:rotate(359deg) }}
@-ms-keyframes spin {0% {-ms-transform:rotate(0deg) }100% {-ms-transform:rotate(359deg) }}
@keyframes spin {0% {transform:rotate(0deg) }100% {transform:rotate(359deg) }}
.scorm-detail-summary .glyphicon, .nav.nav-tabs.course-tabs li:nth-child(2){
display: none;
}
.scorm-detail-summary:after{
content: '';
display: block;
clear: both;
}
.scorm-detail-summary .text{
display: none;
}
@media screen and (max-width: 959px){
.wrapper-pro {
min-width: 300px !important;
}
.scorm-detail-summary .mobile{
display: none;
}
.scorm-detail-summary .text{
float: left;
font-weight: bold;
display: block;
}
.scorm-detail-summary {
border-top: 1px solid #ddd;
margin-top: 0;
padding-top: 15px;
border-bottom: 1px solid #ddd;
}
.scorm-detail-summary .glyphicon {
float: right;
padding: 10px;
position: relative;
top: -10px;
cursor: pointer;
display: block;
}
#hm-comment .nav-tabs>li {
width: 33.33% !important;
}
.num-scorm-tooltip {
right: 45px !important;
}
.section-right-name:before {
background-position: center !important;
right: 6px;
top: 12px;
width: 24px;
height: 24px;
}
.list-mobile{
display: none;
}
.scorm-section-right.active .list-mobile,.nav.nav-tabs.course-tabs li:nth-child(2){
display: block;
}
#hm-comment .nav-tabs {
clear: both;
}
}
@media screen and (min-width: 768px){
.scorm-page main.content ~ .with-sidebar-second.handset-one-col.clearfix {
margin-left: 300px;
}
}
@media screen and (max-width: 767px){
#header--new > .wrapper .course-menu{
display: block;
}
.num-scorm-tooltip {
left: 6px !important;
top: 17px;
right: inherit !important;
}
#scorm-status-helper > li {
margin-bottom: 5px;
margin-right: 30px;
}
.graph-container {
display: none;
}
.scorm-detail-documents > li {
float: left !important;
text-align: left !important;
width: 100% !important;
}
}
@media screen and (max-width: 479px){
#scorm-status-helper > li {
margin-bottom: 5px;
margin-right: 0;
font-size: 10px;
width: inherit;
padding: 0 5px;
line-height: 2;
}
.bar-chart {
max-width: 100%;
}
}
@media screen and (max-width: 380px){
#hm-comment .nav-tabs > li > a {
font-size: 10px;
}
#scorm-status-helper > li {
font-size: 8px;
}
}
.answer span.wrong-answer {
color: #d54e21;
position: relative;
}
.answer span.wrong-answer:before {
content: "\f00d";
font: normal normal normal 16px/1 FontAwesome;
display: block;
position: absolute;
left: -25px;
width: 16px;
height: 16px;
top: 50%;
margin-top: 0px;
}
.answer .iradio_square-blue.iradio_square-red {
background: url(/plugins/icheck/skins/square/red.png) no-repeat;
}
.answer .iradio_square-blue.iradio_square-red.checked.disabled {
background-position: -168px 0;
}