@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);#jansharecanvas{position: absolute;width: 0px;height: 0px} .disp-none{display:none}#anhcrop{height: 38px;border-radius: 4px}#upload-aphoto{background: #12a37f;border-color:#12a37f;margin: 17px 12px} .button2{left: 50px;background-color: #a7ffd7;color: black;border: 2px solid #f44336;width: 150px;height: 40px;text-align: center;font-size: 22px;margin: 17px 24px}.button2:hover{background-color: #f44336;color: white} .button3{background-color: yellow;color: black;border: 2px solid #f44336;width: 150px;height: 40px;text-align: center;font-size: 22px}.button3:hover{background-color: #f44336;color: white} .button7{height: 32px;margin: 10px;line-height: 23px;border-radius: 3px;display: inline-block;background: #179b07;padding-bottom: 1px;background-image: -moz-linear-gradient(100% 100% 90deg, #CC0000, #F80000);text-decoration: none;color: #FFF;font-weight: bold;border-color: #ffd6ea} .janbutton{display:inline-block;padding:.35em 0.65em;font-size:.90em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration: none}.janbutton2{display:inline-block;padding:.65em 1.75em;font-size:.90em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration: none}.bovien{border-radius:50rem!important}.jan1{color:#fff;background-color:#456bc2}.jan1:hover{color:#fff;background-color:#FF4943}.jan2{color:#fff;background-color:#00ab90}.jan2:hover{color:#fff;background-color:#FF4943}.jan33{color:#fff;background-color:#9b00ab}.jan33:hover{color:#fff;background-color:#FF4943}.jan4{color:#fff;background-color:#14ab00}.jan4:hover{color:#fff;background-color:#FF4943}.jan5{color:#fff;background-color:#234158}.jan5:hover{color:#fff;background-color:#FF4943}.jan6{color:#fff;background-color:#ff8e02}.jan6:hover{color:#fff;background-color:#FF4943}.jan7{color:#fff;background-color:#FF4943}.jan7:hover{color:#fff;background-color:#9873c8} .tatqc{display:inline-block;padding:.35em 0.65em;font-size:.90em;font-weight:700;line-height:1;color:#fff;background-color:#8c8c8c;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration: none}.jan0{color:#fff;background-color:#8c8c8c};.thanhtruot{-webkit-appearance: none;width: 100%;height: 10px;border-radius: 5px;background: #3c4f38;outline: none;opacity: 0.7;-webkit-transition: .2s;transition: opacity .2s} .thanhtruot::-webkit-slider-thumb{-webkit-appearance: none;appearance: none;width: 25px;height: 10px;border-radius: 2%;background: red;cursor: pointer} .thanhtruot::-moz-range-thumb{width: 25px;height: 25px;border-radius: 50%;background: #4CAF50;cursor: pointer} @font-face{font-family: fontquotes;src: url(https://codetienich.github.io/dulieu/0056-LNTH-PajaritoFont-Regular.ttf)} @font-face{font-family: fontlogo;src: url(https://codetienich.github.io/dulieu/LinotypeMinos_janshare2.ttf)} @font-face{font-family: fontlogo5;src: url(https://codetienich.github.io/font/janlogo1.ttf)} @font-face{font-family: fontlogo4;src: url(https://codetienich.github.io/font/janlogo2.otf)} @font-face{font-family: fontlogo3;src: url(https://codetienich.github.io/font/janlogo3.ttf)} @font-face{font-family: fontlogo2;src: url(https://codetienich.github.io/font/janlogo4.ttf)} @font-face{font-family: fontlogo1;src: url(https://codetienich.github.io/font/janlogo5.otf)} @font-face{font-family: Fontnv;src: url(https://codetienich.github.io/dulieu/0051-LNTH-MarkerBrush.ttf)} @font-face{font-family: Fontnv2;src: url(https://codetienich.github.io/dulieu/LNTH-PaulMaul.ttf)} @font-face{font-family: Fontnv3;src: url(https://codetienich.github.io/dulieu/0155-LNTH-picto.ttf)} @font-face{font-family: Fontnv4;src: url(https://codetienich.github.io/dulieu/SVN-Arial%20Bold.ttf)} @font-face{font-family: fontchuky1;src: url(https://codetienich.github.io/dulieu/Autografia_nvh2.ttf)} @font-face{font-family: fontchuky2;src: url(https://codetienich.github.io/dulieu/ )} @font-face{font-family: fontnamsinh1;src: url(https://codetienich.github.io/dulieu/La%20Liga%20Font.ttf)} @font-face{font-family: fontnamsinh2;src: url(https://codetienich.github.io/dulieu/AlphaSports6.ttf)} @font-face{font-family: fontnamsinh3;src: url(https://codetienich.github.io/dulieu/BrightnessInverted.ttf)} @font-face{font-family: fontnamsinh4;src: url(https://codetienich.github.io/dulieu/FinishedSympathy.otf)} @font-face{font-family: fontnamsinh5;src: url(https://codetienich.github.io/dulieu/gunmetl.ttf)} @font-face{font-family: fontnamsinh6;src: url(https://codetienich.github.io/dulieu/PaintDrops.ttf)} @font-face{font-family: fontnamsinh7;src: url(https://codetienich.github.io/dulieu/GoodMorning.ttf)} @font-face{font-family: fontjan1;src: url(https://codetienich.github.io/dulieu/0230-LNTH-Promenadenmischung.ttf)} @font-face{font-family: fontjan2;src: url(https://codetienich.github.io/dulieu/0110-LNTH-Marker-Scratch.ttf)} @font-face{font-family: fontjan3;src: url(https://codetienich.github.io/dulieu/0255-LNTH-Paraglide.ttf)} @font-face{font-family: fontjan4;src: url(https://codetienich.github.io/dulieu/0259-LNTH-angrybirds-regular.ttf)} @font-face{font-family: fontjan5;src: url(https://codetienich.github.io/dulieu/0309-LNTH-Hold-On.ttf)} @font-face{font-family: fontjan6;src: url(https://codetienich.github.io/dulieu/0306-LNTH-Hello-Jones-Free-Trial.ttf)} @font-face{font-family: fontjan7;src: url(https://codetienich.github.io/dulieu/0011-LNTH-Alberto-Regular.ttf)} @font-face{font-family: fontjan8;src: url(https://codetienich.github.io/dulieu/0283-LNTHFC-Balinos.ttf)} @font-face{font-family: fontjan9;src: url(https://codetienich.github.io/dulieu/SVN-Apple.ttf)} @font-face{font-family: fontjan10;src: url(https://codetienich.github.io/font/0011-LNTH-Alberto-Regular.ttf)} @font-face{font-family: fontjan11;src: url(https://codetienich.github.io/dulieu/0223-LNTH-Hoa-Nho-LNTH.ttf)} @font-face{font-family: fontjan12;src: url(https://codetienich.github.io/dulieu/0032-LNTH-BarbershopInThailand.ttf)} @font-face{font-family: fontjan14;src: url(https://codetienich.github.io/dulieu/0132-LNTH-Doodles.ttf)} @font-face{font-family: fontjan15;src: url(https://codetienich.github.io/dulieu/UTM_Facebook.ttf)} @font-face{font-family: fontjan16;src: url(https://codetienich.github.io/dulieu/0151-LNTH-flower3.ttf)} @font-face{font-family: fontjan17;src: url(https://codetienich.github.io/dulieu/0156-LNTH-Briarwood.ttf)} @font-face{font-family: fontjan18;src: url(https://codetienich.github.io/dulieu/0162-LNTH-eglantine.ttf)} @font-face{font-family: fontjan19;src: url(https://codetienich.github.io/dulieu/UTM_Daxline_Medium.ttf)} @font-face{font-family: fontjan20;src: url(https://codetienich.github.io/dulieu/0291-LNTH-Cabron.ttf)} @font-face{font-family: fontjan21;src: url(https://codetienich.github.io/dulieu/Arial_Rounded_MT_Bold.ttf)} @font-face{font-family: fontjan22;src: url(https://codetienich.github.io/dulieu/0072-LNTH-Fair-Prosper.ttf)} @font-face{font-family: fontjan23;src: url(https://codetienich.github.io/dulieu/iCiel_Altus.otf)} @font-face{font-family: fontjan24;src: url(https://codetienich.github.io/dulieu/Franklin_Gothic_Medium.ttf)} @font-face{font-family: fontjan25;src: url(https://codetienich.github.io/dulieu/SVN-Fords-Folly.otf)} @font-face{font-family: fontjan26;src: url(https://codetienich.github.io/dulieu/0259-LNTH-angrybirds-regular.ttf)} @font-face{font-family: fontjan27;src: url(https://codetienich.github.io/dulieu/0206-LNTH-Minangkabau_EA_144.ttf)} @font-face{font-family: fontjan28;src: url(https://codetienich.github.io/dulieu/SVN-New-Athletic-M54.ttf)} @font-face{font-family: fontjan29;src: url(https://codetienich.github.io/dulieu/SVN-Brandon%20Printed%20Shadow.otf)} @font-face{font-family: fontjan30;src: url(https://codetienich.github.io/dulieu/0048-LNTH-Fonters.ttf)} @font-face{font-family: fontjan31;src: url(https://codetienich.github.io/dulieu/0222-LNTH-Font-ve-tay.ttf)} @font-face{font-family: fontjan32;src: url(https://codetienich.github.io/dulieu/UTM_Androgyne.ttf)} @font-face{font-family: fontjan33;src: url(https://codetienich.github.io/dulieu/MuseoSansCyrl-500.otf)} @font-face{font-family: fontjan34;src: url(https://codetienich.github.io/dulieu/UVF_DK_Crayon_Crumble.ttf)} @font-face{font-family: fontjan35;src: url(https://codetienich.github.io/dulieu/Janshare-CloudsOfDespairLSF.ttf)} @font-face{font-family: fontjan36;src: url(https://codetienich.github.io/dulieu/SVN-Fords_Folly.otf)} @font-face{font-family: fontjan37;src: url(https://codetienich.github.io/dulieu/SVN-Moon_Earth.otf)} @font-face{font-family: fontjan38;src: url(https://codetienich.github.io/dulieu/SVN-Progs.otf)} @font-face{font-family: fontjan39;src: url(https://codetienich.github.io/dulieu/SVN-Tango.otf)} @font-face{font-family: fontjan40;src: url(https://codetienich.github.io/dulieu/0060-LNTH-La-lune.ttf)} @font-face{font-family: fontjan41;src: url(https://codetienich.github.io/dulieu/0164-LNTH-Rembank.ttf)} @font-face{font-family: fontjan42;src: url(https://codetienich.github.io/dulieu/0246-LNTH-typogarden-demo.ttf)} @font-face{font-family: fontjan43;src: url(https://codetienich.github.io/dulieu/0310-LNTH-Apasih.ttf)} @font-face{font-family: fontjan44;src: url(https://codetienich.github.io/dulieu/0328-LNTH-BLOBBYCHUG.ttf)} @font-face{font-family: fontjan45;src: url(https://codetienich.github.io/dulieu/0323-LNTH-bBungaku.ttf)} @font-face{font-family: fontjan46;src: url(https://codetienich.github.io/dulieu/0327-LNTH-Message-From-Bear.ttf)} @font-face{font-family: fontjan47;src: url(https://codetienich.github.io/dulieu/Fz-Scripture-1.ttf)} @font-face{font-family: fontjan48;src: url(https://codetienich.github.io/dulieu/Fz-Authentic-Photograph.ttf)} @font-face{font-family: fontjan49;src: url(https://codetienich.github.io/dulieu/Fz-Photograph.ttf)} @font-face{font-family: fontjan50;src: url(https://codetienich.github.io/dulieu/Fz-Presidente.ttf)} @font-face{font-family: fontjan51;src: url(https://codetienich.github.io/dulieu/Linotte-Semi-Bold.ttf)} @font-face{font-family: fontjan52;src: url(https://codetienich.github.io/dulieu/Linotte-Bold.ttf)} @font-face{font-family: fontjan53;src: url(https://codetienich.github.io/dulieu/0002-LNTH-Yellowtail.ttf)} @font-face{font-family: fontjan54;src: url(https://codetienich.github.io/dulieu/0321-LNTH-Katto-PersonalUse.ttf)} @font-face{font-family: fontjan55;src: url(https://codetienich.github.io/dulieu/0202-LNTH-balonez-fantasia-br.ttf)} @font-face{font-family: fontjan56;src: url(https://codetienich.github.io/dulieu/Janshare-DK-Cool-Crayons.ttf)} @font-face{font-family: fontjan57;src: url(https://codetienich.github.io/dulieu/0229-LNTH-teefont.ttf)} @font-face{font-family: fontjan58;src: url(https://codetienich.github.io/dulieu/DFVN-Oakley-Bold.otf)} @font-face{font-family: fontjan59;src: url(https://codetienich.github.io/dulieu/iCielDreamsUnwound-Regular.ttf)} @font-face{font-family: fontjan60;src: url(https://codetienich.github.io/dulieu/Tonos-Regular.ttf)} @font-face{font-family: fontjan61;src: url(https://codetienich.github.io/dulieu/PaytoneOne-RegularSS.ttf)} @font-face{font-family: fontjan62;src: url(https://codetienich.github.io/dulieu/SVN-South-Dakota.ttf)} @font-face{font-family: fontjan63;src: url(https://codetienich.github.io/dulieu/0123-LNTH-Telegraphem.ttf)} @font-face{font-family: fontjan64;src: url(https://codetienich.github.io/dulieu/0044-LNTH-Awesome-South-Korea.ttf)} @font-face{font-family: fontjan65;src: url(https://codetienich.github.io/dulieu/0016-LNTH-big-noodle-titling.ttf)} @font-face{font-family: fontjan66;src: url(https://codetienich.github.io/dulieu/0015-LNTH-BELLABOO.ttf)} @font-face{font-family: fontjan67;src: url(https://codetienich.github.io/dulieu/0083-LNTH-octin-vintage-free.ttf)} @font-face{font-family: fontjan68;src: url(https://codetienich.github.io/dulieu/0135-LNTH-marquee-moon.ttf)} @font-face{font-family: fontjan69;src: url(https://codetienich.github.io/dulieu/0144-LNTH-torkrg.ttf)} @font-face{font-family: fontjan70;src: url(https://codetienich.github.io/dulieu/0257-LNTH-Handy-ModeDemo.ttf)} .img-container #image{display: block;max-width: 100%;max-height: 280px} #imgout img{max-width: 100%;object-fit: contain} .scroller-type{overflow: auto;flex-wrap: nowrap;display: flex;padding-left: 5px;max-height: 180px;max-width: 100%;margin-bottom: 10px;flex-direction: row} .scroller-type *{-webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none} .scroller-type .mauanh{width: 130px;margin-top: 15px;margin-bottom: 15px;margin-right: 15px;max-width: 100%;cursor: pointer;-ms-flex: none;flex: none} .scroller-type .mauanh .wrap-img{display: block;position: relative} .scroller-type .mauanh .wrap-img .zoomin-icon{display: block;width: 20px;height: 20px;color: #fff;border: #fff solid 2px;border-radius: 50%;text-align: center;font-size: 16px;line-height: 14px;position: absolute;bottom: 10px;right: 10px;z-index: 100px;cursor: zoom-in} .scroller-type .mauanh img{width: 130px;height: 100px;object-fit: contain;background-color: #dce7e6;border: 1px solid #3198ff;border-radius: 0.5rem} .scroller-type .mauanh.active img{box-shadow: 0 0 0 0.2rem rgb(255 0 0);border-color: rgba(38,143,255,0.5)} .scroller-type label{font-size: 11px} @media only screen and (max-width: 576px){.scroller-type{max-height: 200px;flex-direction: column;flex-wrap: wrap!important;align-content: flex-start} } @import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);.nhaptentab{max-width: 800px;margin: 0 auto;padding: 60px 30px;position: relative;z-index: 1} .nhaptentab:before{position: absolute;content: "";display: block;top: 0;height: 100%;z-index: -1;background: inherit} .nhaptentab:first-child{padding: 40px 30px} .nhaptentab:nth-child(2), .nhaptentab:nth-child(8), .nhaptentab:nth-child(10){background: #134A46} .nhaptentab:nth-child(3), .nhaptentab:nth-child(7){background: #377D6A} .nhaptentab:nth-child(4), .nhaptentab:nth-child(6){background: #7AB893} .nhaptentab:nth-child(5){background: #B2E3AF} .nhaptentab span{position: relative;display: inline-block} .nhaptentab2 span{position: relative;display: block} .nhapten{display: inline-block;width: 100%;height: 40px;font-family: "Lato", sans-serif;color: #fff;font-weight: 400;font-size: 1rem;color: #000000;background: #fbf0ff;border: 0;border-radius: 3px;outline: 0;text-indent: 101px;transition: all .3s ease-in-out} .nhapten::-webkit-input-placeholder{color: #9c9ab3;text-indent: 100px;font-weight: 600px} .nhapten + label{display: inline-block;position: absolute;top: 0;left: 0;padding: 8px 15px;height: 40px;font-family: "Lato", sans-serif;background: #ff0000;color: #fff;vertical-align: middle;transition: all .4s ease-in-out;border-top-left-radius: 3px;border-bottom-left-radius: 3px;transform-origin: left bottom;z-index: 25} .nhapten + label:before, .nhapten + label:after{content: "";position: absolute;top: 10;right: 0;bottom: 0;left: 50px;transform-origin: left bottom;transition: all .4s ease-in-out;pointer-events: none;z-index: -1} span:nth-child(2) .nhapten{text-indent: 85px} span:nth-child(2) .nhapten:focus, span:nth-child(2) .nhapten:active{text-indent: 0} .nhapten:focus, .nhapten:active{color: #eb1369;text-indent: 26px;background: #f0feff;border-top-right-radius: 3px;border-bottom-right-radius: 3px} .nhapten:focus::-webkit-input-placeholder, .nhapten:active::-webkit-input-placeholder{color: #aaa} .nhapten:focus + label, .nhapten:active + label{transform: rotate(-66deg);border-radius: 3px} .nhapten:focus + label:before, .nhapten:active + label:before{transform: rotate(10deg)} /*JanSelector-mausac*/ .JanSelector{text-align:center} .JanSelector .element{padding:10px;margin:10px;border:1px solid #aaaaaa;background:#e9e9e9;cursor:pointer;display:inline-block;vertical-align:middle;border-radius: 15px 3px} .JanSelector .element img{cursor:pointer} .JanSelector .element:hover{border:1px solid #999999;background:#f9f9f9} .JanSelector .element.selected, .JanSelector .element.selected:hover{border:1px solid #777777;background:#ffffff} /*jancolor*/ .jancolorPreview{display:inline-block;width:15px;height:15px;margin-left:-23px;background:red;cursor:pointer;vertical-align:middle} input.jancolor{padding-right:23px;cursor:pointer;width:100px} .jancolorW{padding:10px;border:1px solid #bbbbbb;background:#f4f4f4;position:absolute;z-index:200} .jancolorW .sat_val{width:160px;height:160px;float:left;background:#ff0000 url('https://lh3.googleusercontent.com/-7vor7_NXcrc/YfFwhaB--6I/AAAAAAAAAzs/OB_JYHPboUIhL1c8xTsWwvuXeNDpe5j5ACNcBGAsYHQ/s0/bangmau.png') no-repeat;background-position:0px 0px;cursor:crosshair} .jancolorW .hue{height:160px;margin-left:15px;width:15px;background:url('https://lh3.googleusercontent.com/-7vor7_NXcrc/YfFwhaB--6I/AAAAAAAAAzs/OB_JYHPboUIhL1c8xTsWwvuXeNDpe5j5ACNcBGAsYHQ/s0/bangmau.png') no-repeat;background-position:-160px 0px;float:left} .jancolorW .sat_val .cursor{width:13px;height:13px;margin-top:-6px;margin-left:-6px;background:url('https://lh3.googleusercontent.com/-7vor7_NXcrc/YfFwhaB--6I/AAAAAAAAAzs/OB_JYHPboUIhL1c8xTsWwvuXeNDpe5j5ACNcBGAsYHQ/s0/bangmau.png') no-repeat;background-position:-175px -9px;position:relative;cursor:none} .jancolorW .hue .cursor{width:33px;height:9px;margin-top:-4px;margin-left:-9px;background:url('https://lh3.googleusercontent.com/-7vor7_NXcrc/YfFwhaB--6I/AAAAAAAAAzs/OB_JYHPboUIhL1c8xTsWwvuXeNDpe5j5ACNcBGAsYHQ/s0/bangmau.png') no-repeat;background-position:-175px 0px;position:relative} .jancolorW .options{margin-left:205px} .jancolorW .preview{width:50px;height:50px;margin:0px auto 10px auto;overflow:hidden;border:1px solid #dddddd} .jancolorW .preview div{width:50px;height:25px;background:#ff0000} .jancolorW label{width:15px} .jancolorW .values input{width:35px} .jancolorW .buttons{clear:both;text-align:center;padding-top:10px} .jancolorW .buttons button{background:#c6ffc5;background-position:0px -1581px;border:1px solid #bbbbbb;color:#000000;padding:6px 5px;width:100px;margin:0px 5px;font-size:0.9em;cursor:default} .jancolorW .buttons button:hover{background-color:#FFFB00;border:1px solid #aaaaaa} .jancolorW .buttons button:active{background-color:#FF6D6D;color:#000000;border:1px solid #555555} /*buttoncolor*/ .jbtn{position: relative;display: inline-block;letter-spacing: 1.2px;padding: 6px 32px;text-align: center;text-transform: uppercase;overflow:hidden;z-index: 1;cursor: pointer;text-decoration:none;font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif} .jbtn:focus{outline: none} .jbtn--border{border-width: 1px;border-style: solid;border-radius: 25px;box-sizing: border-box} .jbtn--primary{color: #0080ff} .jbtn--animated{transition-property: color;transition-duration: 0.5s} .jbtn--animated.jbtn--border.jbtn--primary{border: 1px solid lightslategray} .jbtn--animated:before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #0b7ad9;transform: scaleX(0);transform-origin: 0 50%;transition-property: transform;transition-duration: 0.5s;transition-timing-function: ease-out;z-index: -1} .jbtn--animated:hover{color: white} .jbtn--animated:hover:before{transform: scaleX(1);transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)} .jbtn--primary2{color: #f70000} .jbtn--animated2{transition-property: color;transition-duration: 0.5s} .jbtn--animated2.jbtn--border.jbtn--primary{border: 1px solid lightslategray} .jbtn--animated2:before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #eb3840;transform: scaleX(0);transform-origin: 0 50%;transition-property: transform;transition-duration: 0.5s;transition-timing-function: ease-out;z-index: -1} .jbtn--animated2:hover{color: white} .jbtn--animated2:hover:before{transform: scaleX(1);transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)} .center-block{display:inline-block} .jan3 select{background-color: #49aabb;color: white;font-weight: bold;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;cursor: pointer;width: 150px;height: 40px;font-size: 16px} :root{--input-color: #99A3BA;--input-border: #CDD9ED;--input-background: #fff;--input-placeholder: #CBD1DC;--input-border-focus: #275EFE;--group-color: var(--input-color);--group-border: var(--input-border);--group-background: #EEF4FF;--group-color-focus: #fff;--group-border-focus: #ffffff;--group-background-focus: #678EFE} .janform-field{display: block;width: 100%;padding: 8px 16px;line-height: 25px;font-size: 14px;font-weight: 500;font-family: inherit;border-radius: 6px;-webkit-appearance: none;color: #0036b2 border: 1px solid var(--input-border);background: var(--input-background);transition: border 0.3s ease} .janform-field::-moz-placeholder{color: var(--input-placeholder)} .janform-field:-ms-input-placeholder{color: var(--input-placeholder)} .janform-field::placeholder{color: var(--input-placeholder)} .janform-field:focus{outline: none;border-color: var(--input-border-focus)} .janform-group{position: relative;display: flex;width: 100%} .janform-group > span, .janform-group .janform-field{white-space: nowrap;display: block} .janform-group > span:not(:first-child):not(:last-child), .janform-group .janform-field:not(:first-child):not(:last-child){border-radius: 0} .janform-group > span:first-child, .janform-group .janform-field:first-child{border-radius: 6px 0 0 6px} .janform-group > span:last-child, .janform-group .janform-field:last-child{border-radius: 0 6px 6px 0} .janform-group > span:not(:first-child), .janform-group .janform-field:not(:first-child){margin-left: -1px} .janform-group .janform-field{position: relative;z-index: 1;width: 1%;margin-top: 0;margin-bottom: 0} .janform-group > span{text-align: center;padding: 8px 12px;font-size: 14px;line-height: 25px;color: #ffffff;background: #00a8ab;border: 1px solid var(--group-border);transition: background 0.3s ease, border 0.3s ease, color 0.3s ease} .janform-group:focus-within > span{color: #ffffff;background: #ff005c;border-color: #c8126e} body .janform-group{max-width: 500px} body .janform-group:not(:last-child){margin-bottom: 32px} .codepro-note{position: relative!important;padding: 20px 20px 20px 50px!important;background: #ffe7e7!important;color: #0054ba!important;font-size: 16px!important;font-family: var(--font-body)!important;line-height: 1.6em!important;border-radius: 10px!important;overflow: hidden!important} .codepro-note:before{content: ''!important;width: 60px!important;height: 60px!important;background: #ff006c!important;display: block!important;border-radius: 50%!important;position: absolute!important;top: -8px!important;left: -12px!important;opacity: 0.15!important} .codepro-note:after{content: '\2767'!important;position: absolute!important;left: 18px!important;top: 19px!important;font-size: 22px!important;min-width: 15px!important;text-align: center!important} .canhbao{position: relative!important;padding: 20px 20px 20px 50px!important;background: #ff4577!important;color: #ffffff!important;font-size: 16px!important;font-family: var(--font-body)!important;line-height: 1.6em!important;border-radius: 10px!important;overflow: hidden!important;text-align: justify} .canhbao:before{content: 'THÔNG BÁO'!important;color: red!important;text-align: center!important;font-size: 16px!important;font-family: var(--font-body)!important;height: 25px;width: 200px;background: #ffffff!important;display: block!important;margin-left: auto;margin-right: auto} .buttontaoanh.ttn:before{content: "\26A1 Tạo ảnh \26A1"} .buttontaoanh{text-transform: uppercase;display: inline-block;font-size: 20px;text-align: center;text-decoration: none;font-family: 'Open Sans', Helvetica, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #03a9f4;height: 60px;width: 220px;box-sizing: border-box;border-radius: 50px;border: 3px solid #03a9f4;overflow: hidden;font-weight: bold;outline: none;background-color: transparent;transition: all ease 0.5s} .buttontaoanh:hover{cursor: pointer;background-color: #00f366;font-size: 20px;text-align: center;text-decoration: none;font-family: 'Open Sans', Helvetica, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #ffffff} .buttonactive{height: 110px;width: 220px;background-image: url("https://lh3.googleusercontent.com/-jMJ7TmPHIdI/Y3OUeyOOBGI/AAAAAAAABds/TPN27rF1KWMpZYjcV1AX1hafR0g7hWPnACNcBGAsYHQ/h120/dangtaoanh4.gif")} .buttonsuccess{position: relative;background-color: #fff;animation: bounce .3 ease-in} .buttonsuccess:before{content: '';position: absolute;background: url(https://lh3.googleusercontent.com/-_6oA-Q3jdi0/Y3Om38CdCyI/AAAAAAAABd8/rKzR5HJDyPwvtNgjhYOLmcsAWxcCOGsoQCNcBGAsYHQ/h120/hoanthanh.gif) no-repeat;left: 0;top: 10px;right: 0;margin: 0 auto;width:40px;height: 40px;line-height: 31px} .nuttatmo{position: relative;display: inline-block;width: 55px;height: 25px} .nuttatmo input{opacity: 0;width: 0;height: 0} .checkbox2{position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s} .checkbox2:before{position: absolute;content: "";height: 18px;width: 18px;left: 4px;bottom: 3px;background-color: white;-webkit-transition: .4s;transition: .4s} input:checked + .checkbox2{background-color: #ff0063} input:focus + .checkbox2{box-shadow: 0 0 1px #2196F3} input:checked + .checkbox2:before{-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px)} .checkbox2.bovien{border-radius: 34px} .checkbox2.bovien:before{border-radius: 50%}