@charset "UTF-8";
/*
///////////////////////////////////////////
CSS FOR Lesson
Made	by Ngoc Thuy (ゴックトゥイ)
/////////////////////////////////////
*/
/* Sub-visual */
#Sub-visual {
  background: url("../images/lesson/bg_visual.png") no-repeat 50% 0;
  background-size: cover; }

.group-lesson {
  padding: 50px 0; }

.section-inner {
  margin-bottom: 30px; }
  .section-inner h4 {
    font-size: 26px;
    font-weight: bold;
    background: url("../images/common/icon_ball.png") 0 0 no-repeat;
    padding: 5px 0 5px 50px;
    color: #000;
    margin-left: 20px;
    margin-bottom: 20px; }
  .section-inner .block-table {
    width: 80%;
    margin: 0 auto; }
    .section-inner .block-table th, .section-inner .block-table td {
      text-align: center; }

.box {
  color: #000;
  margin-top: 5px; }

.group-left {
  position: relative; }

.list-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: -10px;
  top: 0; }
  .list-radio li button {
    font-weight: bold;
    padding: 11px 20px;
    font-size: 18px;
    position: relative;
    background: none;
    border: 0;
    outline: 0;
    list-style-type: none;
    z-index: 20;
    color: #038cb1; }
    .list-radio li button:before {
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efeeed+1,e9e7e7+49,a2a2a2+100 */
      background: #efeeed;
      /* Old browsers */
      background: -moz-linear-gradient(top, #efeeed 1%, #e9e7e7 49%, #a2a2a2 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #efeeed 1%, #e9e7e7 49%, #a2a2a2 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #efeeed), color-stop(49%, #e9e7e7), to(#a2a2a2));
      background: -o-linear-gradient(top, #efeeed 1%, #e9e7e7 49%, #a2a2a2 100%);
      background: linear-gradient(to bottom, #efeeed 1%, #e9e7e7 49%, #a2a2a2 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efeeed', endColorstr='#a2a2a2', GradientType=0);
      /* IE6-9 */
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
      transform: skewX(-25deg);
      z-index: -1;
      -webkit-transition: all 0.3s 0s ease;
      -o-transition: all 0.3s 0s ease;
      transition: all 0.3s 0s ease;
      border: 1px solid #1199bc; }
    .list-radio li button.active {
      color: #fff; }
      .list-radio li button.active:before {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1199bc+1,07515e+49,064f5b+99 */
        background: #1199bc;
        /* Old browsers */
        background: -moz-linear-gradient(top, #1199bc 1%, #07515e 49%, #064f5b 99%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #1199bc 1%, #07515e 49%, #064f5b 99%);
        /* Chrome10-25,Safari5.1-6 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #1199bc), color-stop(49%, #07515e), color-stop(99%, #064f5b));
        background: -o-linear-gradient(top, #1199bc 1%, #07515e 49%, #064f5b 99%);
        background: linear-gradient(to bottom, #1199bc 1%, #07515e 49%, #064f5b 99%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1199bc', endColorstr='#064f5b', GradientType=0);
        /* IE6-9 */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
        transform: skewX(-25deg);
        z-index: -1;
        -webkit-transition: all 0.3s 0s ease;
        -o-transition: all 0.3s 0s ease;
        transition: all 0.3s 0s ease; }

.block-pagination {
  margin: 0 auto;
  text-align: center; }
  .block-pagination .pagination {
    margin: 0 0; }

.block-advance {
  background: #e4f1f5 url("../images/common/bg_advance.png") no-repeat 0 0;
  background-size: auto 100%;
  padding: 30px 0 20px; }
  .block-advance dt {
    font-size: 16px;
    font-weight: bold;
    color: #131e84;
    padding-bottom: 5px; }
  .block-advance dd {
    font-size: 14px;
    color: #000;
    padding-bottom: 10px; }

th, td {
  border: 1px solid #ddd; }

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
  .group-lesson {
    padding: 30px 0; }
  .list-radio {
    top: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .list-radio li button {
      font-size: 14px;
      padding: 12px 20px; }
  .box {
    margin-top: 20px; } }

@media (max-width: 768px) {
  .section-inner h4 {
    font-size: 17px;
    background: url("../images/common/icon_ball.png") 0 50% no-repeat;
    background-size: auto 90%;
    padding-left: 35px;
    margin-bottom: 10px; }
  .section-inner .block-table {
    width: 100%; }
  .table-common td,
  .table-common th {
    width: 100%;
    display: block; }
  .section-inner {
    margin-bottom: 20px; }
  .block-advance dt {
    font-size: 14px; }
  .block-advance dd {
    font-size: 12px; } }