/* WordPress-only parts of the TTI design. Loaded after style.css. Values are copied from the design rule each block names, so the WordPress markup ( links instead of buttons, MONA Smart Form instead of the demo forms ) looks the same. */ /* language switch: links to each translation instead of in-page buttons ( style.css .lang button ) */ .lang a{padding:7px 12px;border-radius:999px;color:var(--mute);transition:background .2s,color .2s} .lang a[aria-pressed="true"]{background:var(--ink);color:var(--bg)} /* project filter: real ?country= links ( style.css .pfilter button ) */ .pfilter a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--g-line);background:var(--g-bg);font-weight:500;font-size:14.5px;transition:background .2s,color .2s,border-color .2s} .pfilter a:hover{border-color:var(--teal)} .pfilter a[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#04210a} /* spacing the prototype wrote inline */ .ph .wrap>.ph-btn{margin-top:30px} .ph .wrap>.btn.ph-read{margin-top:30px} .band .others.tti-after{margin-top:clamp(32px,4vw,56px)} .tti-next{margin-top:clamp(28px,4vw,56px)} .tti-ticks{margin-top:26px} .cards.blog{margin-top:clamp(26px,3.4vw,48px)} .duo .tti-mt{margin-top:28px} .duo .tti-mt .link{margin-top:22px} .ph-cover .wrap>.link,.ph-constk .wrap>.link{margin-top:22px} /* ── MONA Smart Form inside the design's forms ( style.css .form / .dlg-form ) ── */ .tti-form .msf-form,.dlg-form .msf-form{display:grid;gap:14px;position:relative} .msf-form .msf-field{display:grid;gap:7px;margin:0} /* the design marks no field as required ( the browser still enforces it ) */ .msf-form .msf-req{display:none} .msf-form .msf-field>label{display:block} .form .msf-field>label{font:500 11px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--t-soft)} .form .msf-form input,.form .msf-form textarea,.form .msf-form select{font:400 16px/1.4 var(--f-b);color:var(--t-ink);background:var(--t-field);border:1px solid transparent;border-radius:4px;padding:13px 14px;letter-spacing:0;width:100%} .form .msf-form input:focus,.form .msf-form textarea:focus,.form .msf-form select:focus{outline:none;border-color:var(--t-accent)} .form .msf-form input[type=file]{font-size:14px} .dlg-form .msf-field>label{font:500 11px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)} .dlg-form .msf-form input,.dlg-form .msf-form select,.dlg-form .msf-form textarea{font:400 16px/1 var(--f-b);color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:4px;padding:14px;letter-spacing:0;width:100%} .dlg-form .msf-form select option{color:#0b1c26} .dlg-form .msf-form input:focus,.dlg-form .msf-form select:focus{outline:none;border-color:var(--cyan)} /* submit = the design's .btn */ .msf-form .msf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border:0;border-radius:999px;background:var(--green);color:#04210a;font:600 17px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease),background .2s;margin-top:6px} .sub .msf-form .msf-btn{font:600 15px/1 var(--f-d);letter-spacing:.01em;text-transform:none} .msf-form .msf-btn:hover{background:#6be85b;transform:translateY(-2px)} .msf-form .msf-btn:disabled{opacity:.6;transform:none} .msf-form>p:last-of-type{margin:0} .msf-form .msf-status{font-size:14px} .msf-form .msf-status-err,.msf-form .msf-field-error{color:#ff8a7a;font-size:13px} /* the success state is the design's .form-done ( tti-forms.js ), not the plugin's message */ .msf-form .msf-status-ok{display:none} .form-done .form-pdf{display:inline-flex;margin-top:14px} /* the design rules give these a display, which would otherwise beat the hidden attribute */ .msf-form[hidden],.form-done[hidden],.form-done .form-pdf[hidden]{display:none} /* home banner picture / video under the globe ( Trang chủ → Nền banner ) */ .hero>.tti-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero>.tti-hero-bg>*{width:100%;height:100%;object-fit:cover;opacity:.55} /* a picture slot holding a video ( mona_get_media() ): the wrapper takes the slot's box from the .tti-m rules, the picture fills it ( as picture.tti-m does ), and the design's green Play button ( style.css .vplay ) sits in the middle; tti-vpop.js opens the video in a dialog. */ .tti-vid{position:relative;overflow:hidden;background:#06162b} .tti-vid>img,.tti-vid>picture,.tti-vid>picture>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;margin:0;translate:none;scale:none;box-shadow:none;border:0;max-width:none;position:static;animation:none} .tti-play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;width:clamp(40px,26%,96px);aspect-ratio:1;border-radius:50%;background:var(--green);display:grid;place-items:center;cursor:pointer;transition:scale .3s var(--ease)} .tti-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(68,209,50,.6);animation:ping 2.4s var(--ease) infinite} .tti-play span{width:36%;height:36%;margin-left:8%;background:#04210a;clip-path:polygon(15% 0,100% 50%,15% 100%)} .tti-play:hover{scale:1.08} /* cards are links: the card opens its page, so no Play on it */ a .tti-play{display:none} /* the video dialog ( design .dlg + .vid ) */ .vid>iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* YouTube opened by Play in a [data-vbox] ( site.js / app.js ), placed like the design's