@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Effect: slideInRight slideInLeft slideInUp slideInDown rotateInUpLeft rotateInUpRight
Copyright (c) 2015 Daniel Eden
*/


@font-face {
    font-family: feather;
    src: url(https://sacobuild.vn/Asset/iconfeather/fonts/feather.eot?t=1525787366991);
    src: url(https://sacobuild.vn/Asset/iconfeather/fonts/feather.eot?t=1525787366991#iefix) format('embedded-opentype'),url(https://sacobuild.vn/Asset/iconfeather/fonts/feather.woff?t=1525787366991) format('woff'),url(https://sacobuild.vn/Asset/iconfeather/fonts/feather.ttf?t=1525787366991) format('truetype'),url(https://sacobuild.vn/Asset/iconfeather/fonts/feather.svg?t=1525787366991#feather) format('svg')
}

.icon-link-2:before {
    content: "\e882"
}

.icon-link:before {
    content: "\e884"
}

.icon-type:before {
    content: "\e8df"
}

.icon-user-x:before {
    content: "\e8e8"
}

.icon-user:before {
    content: "\e8e9"
}

.icon-x:before {
    content: "\e8f6"
}

.icon-bold:before {
    content: "\e901"
}

/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
@-webkit-keyframes spinAround {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

@keyframes spinAround {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.content:not(:last-child),.title:not(:last-child) {
    margin-bottom: 1.5rem
}

.input {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    display: inline-flex;
    font-size: 1rem;
    height: 2.5em;
    justify-content: flex-start;
    line-height: 1.5;
    padding-bottom: calc(.5em - 1px);
    padding-left: calc(.75em - 1px);
    padding-right: calc(.75em - 1px);
    padding-top: calc(.5em - 1px);
    position: relative;
    vertical-align: top
}

.input:active,.input:focus {
    outline: 0
}

.input[disabled] {
    cursor: not-allowed
}

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
body,h1,h2,h3,h4,h5,h6,html,li,p,ul {
    margin: 0;
    padding: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400
}

ul {
    list-style: none
}

input {
    margin: 0
}

html {
    box-sizing: border-box
}

*,::after,::before {
    box-sizing: inherit
}

th {
    padding: 0
}

th:not([align]) {
    text-align: inherit
}

html {
    background-color: #fff;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

article,section {
    display: block
}

body,input {
    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}

body {
    color: #4a4a4a;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5
}

a {
    color: #3273dc;
    cursor: pointer;
    text-decoration: none
}

a strong {
    color: currentColor
}

a:hover {
    color: #363636
}

input[type=checkbox],input[type=radio] {
    vertical-align: baseline
}

span {
    font-style: inherit;
    font-weight: inherit
}

strong {
    color: #363636;
    font-weight: 700
}

.container {
    flex-grow: 1;
    margin: 0 auto;
    position: relative;
    width: auto
}

@media screen and (min-width: 1024px) {
    .container {
        max-width:960px
    }
}

@media screen and (min-width: 1216px) {
    .container:not(.is-max-desktop) {
        max-width:1152px
    }
}

@media screen and (min-width: 1408px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width:1344px
    }
}

.content li+li {
    margin-top: .25em
}

.content p:not(:last-child),.content ul:not(:last-child) {
    margin-bottom: 1em
}

.content h1,.content h2,.content h3,.content h4,.content h5,.content h6 {
    color: #363636;
    font-weight: 600;
    line-height: 1.125
}

.content h1 {
    font-size: 2em;
    margin-bottom: .5em
}

.content h1:not(:first-child) {
    margin-top: 1em
}

.content h2 {
    font-size: 1.75em;
    margin-bottom: .5714em
}

.content h2:not(:first-child) {
    margin-top: 1.1428em
}

.content h3 {
    font-size: 1.5em;
    margin-bottom: .6666em
}

.content h3:not(:first-child) {
    margin-top: 1.3333em
}

.content h4 {
    font-size: 1.25em;
    margin-bottom: .8em
}

.content h5 {
    font-size: 1.125em;
    margin-bottom: .8888em
}

.content h6 {
    font-size: 1em;
    margin-bottom: 1em
}

.content ul {
    list-style: disc outside;
    margin-left: 2em;
    margin-top: 1em
}

.content ul ul {
    list-style-type: circle;
    margin-top: .5em
}

.content ul ul ul {
    list-style-type: square
}

.icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem
}

@-webkit-keyframes moveIndeterminate {
    from {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

@keyframes moveIndeterminate {
    from {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

.title {
    word-break: break-word
}

.title em,.title span {
    font-weight: inherit
}

.title {
    color: #363636;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125
}

.title strong {
    color: inherit;
    font-weight: inherit
}

.title:not(.is-spaced)+.subtitle {
    margin-top: -1.25rem
}

.title.is-1 {
    font-size: 3rem
}

.title.is-2 {
    font-size: 2.5rem
}

.title.is-3 {
    font-size: 2rem
}

.title.is-4 {
    font-size: 1.5rem
}

.title.is-5 {
    font-size: 1.25rem
}

.title.is-6 {
    font-size: 1rem
}

.title.is-7 {
    font-size: .75rem
}

.input {
    background-color: #fff;
    border-color: #dbdbdb;
    border-radius: 4px;
    color: #363636
}

.input::-moz-placeholder {
    color: rgba(54,54,54,.3)
}

.input::-webkit-input-placeholder {
    color: rgba(54,54,54,.3)
}

.input:-moz-placeholder {
    color: rgba(54,54,54,.3)
}

.input:-ms-input-placeholder {
    color: rgba(54,54,54,.3)
}

.input:hover {
    border-color: #b5b5b5
}

.input:active,.input:focus {
    border-color: #3273dc;
    box-shadow: 0 0 0 .125em rgba(50,115,220,.25)
}

.input[disabled] {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    box-shadow: none;
    color: #7a7a7a
}

.input[disabled]::-moz-placeholder {
    color: rgba(122,122,122,.3)
}

.input[disabled]::-webkit-input-placeholder {
    color: rgba(122,122,122,.3)
}

.input[disabled]:-moz-placeholder {
    color: rgba(122,122,122,.3)
}

.input[disabled]:-ms-input-placeholder {
    color: rgba(122,122,122,.3)
}

.input {
    box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
    max-width: 100%;
    width: 100%
}

.input[readonly] {
    box-shadow: none
}

.is-link.input {
    border-color: #3273dc
}

.is-link.input:active,.is-link.input:focus {
    box-shadow: 0 0 0 .125em rgba(50,115,220,.25)
}

.control {
    box-sizing: border-box;
    clear: both;
    font-size: 1rem;
    position: relative;
    text-align: inherit
}

.control.has-icons-left .input:focus~.icon,.control.has-icons-right .input:focus~.icon {
    color: #4a4a4a
}

.control.has-icons-left .icon,.control.has-icons-right .icon {
    color: #dbdbdb;
    height: 2.5em;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2.5em;
    z-index: 4
}

.control.has-icons-left .input {
    padding-left: 2.5em
}

.control.has-icons-left .icon.is-left {
    left: 0
}

.control.has-icons-right .input {
    padding-right: 2.5em
}

.control.has-icons-right .icon.is-right {
    right: 0
}

.has-text-link {
    color: #3273dc!important
}

a.has-text-link:focus,a.has-text-link:hover {
    color: #205bbc!important
}

.has-background-link {
    background-color: #3273dc!important
}

.has-text-grey {
    color: #7a7a7a!important
}

.has-background-grey {
    background-color: #7a7a7a!important
}

.is-relative {
    position: relative!important
}

.m-0 {
    margin: 0!important
}

.m-1 {
    margin: .25rem!important
}

.m-2 {
    margin: .5rem!important
}

.m-3 {
    margin: .75rem!important
}

.m-4 {
    margin: 1rem!important
}

.m-5 {
    margin: 1.5rem!important
}

.m-6 {
    margin: 3rem!important
}

.p-0 {
    padding: 0!important
}

.pt-0 {
    padding-top: 0!important
}

.px-0 {
    padding-left: 0!important;
    padding-right: 0!important
}

.py-0 {
    padding-top: 0!important;
    padding-bottom: 0!important
}

.p-1 {
    padding: .25rem!important
}

.pt-1 {
    padding-top: .25rem!important
}

.px-1 {
    padding-left: .25rem!important;
    padding-right: .25rem!important
}

.py-1 {
    padding-top: .25rem!important;
    padding-bottom: .25rem!important
}

.p-2 {
    padding: .5rem!important
}

.pt-2 {
    padding-top: .5rem!important
}

.px-2 {
    padding-left: .5rem!important;
    padding-right: .5rem!important
}

.py-2 {
    padding-top: .5rem!important;
    padding-bottom: .5rem!important
}

.p-3 {
    padding: .75rem!important
}

.pt-3 {
    padding-top: .75rem!important
}

.px-3 {
    padding-left: .75rem!important;
    padding-right: .75rem!important
}

.py-3 {
    padding-top: .75rem!important;
    padding-bottom: .75rem!important
}

.p-4 {
    padding: 1rem!important
}

.pt-4 {
    padding-top: 1rem!important
}

.px-4 {
    padding-left: 1rem!important;
    padding-right: 1rem!important
}

.py-4 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important
}

.p-5 {
    padding: 1.5rem!important
}

.pt-5 {
    padding-top: 1.5rem!important
}

.px-5 {
    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important
}

.py-5 {
    padding-top: 1.5rem!important;
    padding-bottom: 1.5rem!important
}

.p-6 {
    padding: 3rem!important
}

.pt-6 {
    padding-top: 3rem!important
}

.px-6 {
    padding-left: 3rem!important;
    padding-right: 3rem!important
}

.py-6 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important
}

.is-size-1 {
    font-size: 3rem!important
}

.is-size-2 {
    font-size: 2.5rem!important
}

.is-size-3 {
    font-size: 2rem!important
}

.is-size-4 {
    font-size: 1.5rem!important
}

.is-size-5 {
    font-size: 1.25rem!important
}

.is-size-6 {
    font-size: 1rem!important
}

.is-size-7 {
    font-size: .75rem!important
}

@media screen and (max-width: 768px) {
    .is-size-1-mobile {
        font-size:3rem!important
    }

    .is-size-2-mobile {
        font-size: 2.5rem!important
    }

    .is-size-3-mobile {
        font-size: 2rem!important
    }

    .is-size-4-mobile {
        font-size: 1.5rem!important
    }

    .is-size-5-mobile {
        font-size: 1.25rem!important
    }

    .is-size-6-mobile {
        font-size: 1rem!important
    }

    .is-size-7-mobile {
        font-size: .75rem!important
    }
}

.has-text-centered {
    text-align: center!important
}

.has-text-left {
    text-align: left!important
}

.has-text-right {
    text-align: right!important
}

@media screen and (max-width: 768px) {
    .has-text-centered-mobile {
        text-align:center!important
    }
}

@media screen and (max-width: 768px) {
    .has-text-left-mobile {
        text-align:left!important
    }
}

@media screen and (max-width: 768px) {
    .has-text-right-mobile {
        text-align:right!important
    }
}

.has-text-weight-bold {
    font-weight: 700!important
}

.section {
    padding: 3rem 1.5rem
}

a {
    color: inherit
}

a:hover {
    color: var(--color-main)
}

.content a {
    color: #3273dc
}

.color_main {
    color: var(--color-main)!important
}

.color_text {
    color: var(--color-text)!important
}

.background_main {
    background-color: var(--color-main)
}

.background_bg {
    background-color: var(--color-bg)
}

.font_13 {
    font-size: 13px
}

.font_14 {
    font-size: 14px
}

#notify {
    font-size: 13px;
    position: fixed;
    z-index: 90000;
    top: 20px;
    right: 20px;
    max-width: calc(100% - 40px);
    width: 360px
}

.content h1 {
    font-size: 1.75em
}

.content h2 {
    font-size: 1.5em
}

.content h3 {
    font-size: 1.4em
}

.title.has_icon {
    display: flex;
    align-items: center
}

.section_content {
    width: 960px;
    max-width: 100%;
    margin: 0 auto
}

@media (max-width: 768px) {
    #main {
        overflow:hidden
    }

    .font_13_mobile {
        font-size: 13px!important
    }

    .font_14_mobile {
        font-size: 14px!important
    }
}

:root {
    --color-main: #F35A1E;
    --color-extra: #485fc7;
    --color-bg: #EBECF0;
    --color-text: #fff
}

.content strong {
    color: #fff
}
#app_loban
{
	color: #fff;
}
li{color: #fff;}
.container {
    max-width: 1110px!important;
    width: 100%
}

.loban_scroll {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden
}

.loban {
    margin-top: 40px;
    cursor: grab
}

.loban:active {
    cursor: grabbing
}

.loban ul {
    display: flex;
    height: 40px;
    background: #f3f3f3;
    overflow: hidden;
    border-top: 1px solid #111;
    font-family: Arial
}

.loban ul li {
    flex: none;
    position: relative;
    color: #000;
}

.loban_ruler {
    border-top: 1px solid #111
}

.loban_ruler li {
    width: 100px;
    position: relative;
    background-image: url(https://sacobuild.vn/thuocloban/loban.png);
    background-repeat: no-repeat;
    background-position: 0 0
}

.loban_ruler li.is_cm {
    border-left: 1px solid #111;
    height: 12px
}

.loban_ruler li.is_cm:first-child {
    height: 100%
}

.loban_ruler li.is_cm:last-child {
    width: 1px;
    height: 100%
}

.loban_ruler li.is_cm::before {
    content: attr(data-title);
    font-size: 12px;
    color: #111;
    white-space: nowrap;
    position: absolute;
    top: 15px;
    left: -4px
}

.loban_ruler li.is_mm {
    border-left: 1px solid #111;
    height: 4px
}

.loban_ruler li.is_mm.is_5 {
    height: 8px
}

.loban_khoan li {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #111;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase
}

.loban_khoan li[data-good=true] {
    color: #c80202
}

.loban_cung li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 1px solid #111;
    border-bottom: 4px solid #111
}

.loban_cung li[data-good=true] {
    color: #c80202;
    border-bottom-color: #c80202
}

.loban_title {
    font-size: 14px;
    position: relative
}

.loban_title div {
    position: absolute;
    left: 0;
    top: 16px
}

.loban_title div:nth-child(2) {
    top: 176px
}

.loban_title div:nth-child(3) {
    top: 336px
}

.loban_title div strong {
    font-weight: 600;
    color: var(--color-main)!important
}

.loban_measure {
    position: relative;
    padding-left: 530px
}

.loban_measure .control {
    width: 140px
}

.loban_measure::after {
    content: "";
    position: absolute;
    left: 600px;
    top: 40px;
    width: 1px;
    height: 480px;
    background: #3273dc;
    z-index: 2
}

@media screen and (max-width: 1024px) {
    .loban_measure {
        position:relative;
        padding-left: 130px
    }

    .loban_measure::after {
        content: "";
        position: absolute;
        left: 200px;
        top: 40px;
        width: 1px;
        height: 477px;
        background: #3273dc;
        z-index: 2
    }
}